【vue】vue组件之颜色选择器（基于element-ui）

╰半夏微凉° 2022-10-09 06:29 1123阅读 0赞

### vue组件之颜色选择器（基于element-ui） ###

*  1. 代码(待优化，后面会改为双向绑定)
 *  2. 引用
 *  3. 示例

ps：需要引入element-ui

# 1. 代码(待优化，后面会改为双向绑定) #

<template>
      <div class="public-input-color-picker">
        <el-input v-model="value2" :placeholder="placeholder" @input="_change"></el-input>
        <el-color-picker v-model="value2" :show-alpha="showAlpha" :predefine="predefineColors" @change="_change" ></el-color-picker>
      </div>
    </template>
    <script> /** * 输入框颜色选择器 * ps：预定义颜色中，如果颜色不对，将无法选中 * * @showAlpha 是否支持透明度 默认false * @predefineColors 预定义颜色 * @value 默认颜色编码 示例：#ffffff * @placeholder 输入框提示文字 */ export default { name: 'public-input-color-picker', data() { return { value2: '' } }, props: { showAlpha: { type: Boolean, default: false }, predefineColors: { type: Array, default: () => { return [ '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', '#FF0000' ] } }, value: { type: String, default: '' }, placeholder: { type: String, default: '请输入颜色编码' } }, components: { }, computed: { }, created() { }, onload() { }, onShow() { }, watch: { value: { handler: function(newVal, oldVal) { this.value2 = JSON.parse(JSON.stringify(newVal)) }, immediate: true, deep: true } }, mounted() { }, methods: { _change(val) { this.$emit('change', val) } } } </script>
    <style lang="less" scoped> @box-width: 200px; .public-input-color-picker { // display: flex; // -webkit-box-align: center; // -webkit-align-items: center; // align-items: center; position: relative; width: @box-width; .el-input { width: @box-width; } .el-color-picker { position: absolute; right: 0; /deep/ .el-color-picker__trigger { border: 0; } } } </style>

# 2. 引用 #

<public-input-color-picker :value="form2.labelColor" placeholder="请输入标签颜色" @change="(val)=>{form2.labelColor=val,clearValidata()}" />

# 3. 示例 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]: /images/20221005/575303603ced46cb93133f55189f9616.png