Element UI el-color-picker 组件自定义显示文字并弹出颜色选择器

<p>要实现这个需求，可以使用 element-ui 提供的 slot 插槽来自定义 el-color-picker 组件的显示内容。具体操作如下：</p>
<ol>
<li>在 el-color-picker 组件上添加一个名为 'trigger' 的 slot 插槽。</li>
<li>在插槽中添加一个文本框，用于显示当前选择的颜色值。</li>
<li>在文本框上添加一个点击事件，当点击文本框时，弹出 el-color-picker 的颜色选择器。</li>
</ol>
<p>代码示例：</p>
<pre><code class="html"><template>
  <div>
    <el-color-picker v-model="color">
      <template #trigger>
        <input type="text" :value="color" @click="showColorPicker">
      </template>
    </el-color-picker>
  </div>
</template>
<script>
export default {
  data() {
    return {
      color: '#000000',
    };
  },
  methods: {
    showColorPicker() {
      this.$refs.colorPicker.showPicker();
    },
  },
};
</script></code></pre>
<p>在上面的代码中，我们通过在 el-color-picker 组件中添加一个名为 'trigger' 的 slot 插槽，并在插槽中添加一个文本框来自定义 el-color-picker 的显示内容。然后在文本框上添加了一个点击事件，当点击文本框时，调用 showColorPicker 方法来弹出 el-color-picker 的颜色选择器。</p>