Element UI el-color-picker 组件插入 el-input 文本示例

<template>
  <el-color-picker v-model='color' show-alpha>
    <el-input slot='prepend' v-model='text' style='width: 100px;'></el-input>
  </el-color-picker>
</template>
<script>
export default {
  data() {
    return {
      color: '#409EFF',
      text: '',
    };
  },
};
</script>
<p>在上面的代码中，我们在 el-color-picker 组件中使用了 slot 插槽，将 el-input 组件插入到了 el-color-picker 组件的前面。同时，我们使用了 v-model 指令分别绑定了 el-color-picker 组件的 color 属性和 el-input 组件的 text 属性，以便在用户选择颜色或输入文本时可以动态更新数据。</p>