Element UI el-color-picker 组件文字触发弹出选择颜色

在使用 el-color-picker 组件时，可以通过设置 el-input 组件的 v-model 值来实现文字触发弹出选择颜色的效果。具体实现步骤如下：

在模板中使用 el-input 组件，并设置其 v-model 值为一个 data 中定义的变量。

<el-input v-model='text' placeholder='点击选择颜色'>
  <el-color-picker v-model='color' @change='handleChange'></el-color-picker>
</el-input>

在 el-input 组件上绑定一个点击事件，用来触发 el-color-picker 组件的显示。

<el-input v-model='text' placeholder='点击选择颜色' @click='showPicker'>
  <el-color-picker v-model='color' @change='handleChange'></el-color-picker>
</el-input>

在 methods 中定义 showPicker 方法，用来显示 el-color-picker 组件。

methods: {
  showPicker() {
    this.$refs.colorPicker.showPanel()
  },
  handleChange(color) {
    this.color = color
    this.text = color
  }
}

在 handleChange 方法中，将选择的颜色设置给 color 变量，并将其赋值给 text 变量，以便在 el-input 组件中显示选择的颜色。

通过以上步骤，即可实现在 el-color-picker 组件中显示文字，并通过文字触发弹出选择颜色的效果。