【vue + element ui】ColorPicker 颜色选择器的使用_elementui 颜色选择器

项目场景：

组件提供的ColorPicker 颜色选择器不能满足实际需求，所以在此基础上使用了自定义的方式进行使用

我这边的使用场景是ColorPicker与el-input输入框的联动使用，在这里参考了下面博主的文章

https://blog.csdn.net/s1441101265/article/details/109672819

---

使用步骤

1.自定义组件inputColor.vue

2.父组件引入该组件

3.在父组件内需要使用的地方使用该组件

4.我这个地方的使用是在表单里面进行使用，并且需要进行表单不能为空的校验

5.所以这个地方就涉及到了在父组件里面的调用，在最后进行表单验证判断的时候，父组件的验证与子组件的验证都需要全部通过才可以，所以这个地方呢就在子组件内定义了一个是否通过了验证的方法，然后在父组件的验证方法里面调用子组件的是否通过验证的判断方法，只有两个验证都返回true的时候才能进行下一步的操作

6.这里就需要使用到一次性同时验证多个表单验证的方法了，可以参考我之前分享过的博文
vue + element ui 同时提交多个表单的表单验证

使用代码

在这里附上我使用过程的完整代码，供参考

1.inputColor.vue

<template>
  <div class="public-input-color-picker">
    <el-form ref="form" :model="formData" :rules="formRules">
      <el-form-item prop="value2">
        <el-input v-model="formData.value2" :placeholder="placeholder" @input="_change"></el-input>
        <el-color-picker v-model="formData.value2" :show-alpha="showAlpha" :predefine="predefineColors"
          @change="_change"></el-color-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
/**
 * 输入框颜色选择器
 * ps：预定义颜色中，如果颜色不对，将无法选中
 *
 * @showAlpha 是否支持透明度 默认false
 * @predefineColors 预定义颜色
 * @value 默认颜色编码 示例：#ffffff
 * @placeholder 输入框提示文字
 */
export default {
  name: 'public-input-color-picker',
  data() {
    const validateColor = (rule, value, callback) => {
      if (this.formData.value2 === '' || this.formData.value2 === null) {
        callback(new Error('请选择颜色'))
      } else {
        callback()
      }
    }
    return {
      formData: {
        value2: ''
      },
      formRules: {
        value2: [{ required: true, validator: validateColor, trigger: 'blur' }]
      }
    }
  },
  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.formData.value2 = JSON.parse(JSON.stringify(newVal))
      },
      immediate: true,
      deep: true
    }
  },
  mounted() { },
  methods: {
    _change(val) {
      this.$refs.form.validate((res) => {
        if (res) {
          this.$emit('change', val)
        }
      })
    },
    //这个方法就是用来判断当前组件的表单验证是否通过
    async justify() {
      const res = await this.$refs['form'].validate()
      if (res) {
        return true
      } else {
        return false
      }
    },
  }
}
</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

2.父组件中的调用

<template>
    <div>
        <el-form ref="form" :model="formData">
            <el-form-item label="颜色" prop="color" required>
                <template>
                    <inputColor ref="inputColor" :value="formData.color" placeholder="请选择颜色" @change="colorChange"></inputColor>
                </template>
             </el-form-item>
         </el-form>
    </div>
</template>

<script>
import inputColor from './inputColor.vue'
export default {
    components: { inputColor },
    data() {
        return {
            formData:{
               color:''
            }
        }
    },
    created() {
    },
    methods: {
        checkForm(formName) {
            return new Promise((resolve, reject) => {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        resolve()
                    } else reject()
                })
            })
        },
        submit() {
            //调用校验子组件的方法
            let form1 = this.$refs.inputColor.justify()
            let list = [] //这个数组就是一个用来存放所有表单验证结果的集合
            list.push(
                this.checkForm('form'),//绑定的表单1
                form1 //绑定的子组件的表单验证
            )
            Promise.all(list)
                .then(async () => {
                   //这个地方就放我们的逻辑操作代码即可
                   console.log('表单校验通过')
                })
                .catch(() => {
                    console.log('表单校验未通过')
                })
        },
        colorChange(val) {
            this.formData.color = val
        },
}
</script>

<style lang="less" scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61