Vue+elementUI下拉框自定义颜色选择器方式

正波

elementUI下拉框自定义颜色选择器


组件的定义

1.定义颜色选择器组件
话不多说，直接上代码

1. <template>
   
2.   <el-select ref="colorSelect" placeholder="" v-model="myColor" style="width: 100%" @change="handleChange">
   
3.     <el-option
   
4.       v-for="item in colorList"
   
5.       :key="item"
   
6.       label=" "
   
7.       :value="item"
   
8.       v-html="'<div style=background-color:'+ item+';width:' +'100%'+';height:'+'90%'+'></div>'">
   
9.     </el-option>
   
10.   </el-select>
    
11. </template>
    
12. 
    
13. <script>
    
14.   export default {
    
15.     name: "colorSelect",
    
16.     //允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
    
17.     model: {
    
18.       prop: 'color',
    
19.       event: 'update'
    
20.     },
    
21.     props: {
    
22.       //颜色数组
    
23.       colorList: {
    
24.         type: Array,
    
25.         default: () => {
    
26.           return ["#FFC0CB", "#DB7093", "#FF1493", "#DC143C"];
    
27.         }
    
28.       },
    
29.       //父组件绑定的值
    
30.       color: {
    
31.         type: String,
    
32.         default: undefined
    
33.       }
    
34.     },
    
35.     data() {
    
36.       return {
    
37.         myColor: undefined
    
38.       }
    
39.     },
    
40.     methods: {
    
41.       //设置颜色选择框中颜色
    
42.       setSelectColor(color) {
    
43.         //通过操作dom节点改变样式
    
44.         this.$nextTick(() => {
    
45.           let dom = this.$refs.colorSelect;
    
46.           if (dom) {
    
47.             dom = dom.$el.children[0];
    
48.             let inputDom = dom.querySelectorAll(".el-input__inner");
    
49.             let icon = dom.querySelectorAll(".el-input__icon");
    
50.             inputDom[0].style["background-color"] = color;
    
51.             icon[0].style["color"] = "black";
    
52.           }
    
53.         })
    
54.       },
    
55.       handleChange(val) {
    
56.         this.setSelectColor(val);
    
57.         //触发update事件更新父组件绑定值
    
58.         this.$emit('update', val);
    
59.       }
    
60.     },
    
61.     created() {
    
62.       if (this.color && this.color.length > 0) {
    
63.         this.myColor = this.color;
    
64.         this.setSelectColor(this.color)
    
65.       }
    
66.     },
    
67.     watch: {
    
68.       'color': function (val) {
    
69.         this.setSelectColor(val);
    
70.       }
    
71.     }
    
72.   }
    
73. </script>
    
74. 
    
75. <style scoped>
    
76. 
    
77. </style>

复制代码

组件使用了model，不明白的可以查看官网https://cn.vuejs.org/v2/api/#model

父组件使用步骤

1.引入子组件
具体进入路径要看你的子组件位置

1. import colorSelect from "../../../elements/colorSelect";

复制代码

2.声明组件
在components中声明组件

1.         components: {
   
2.       colorSelect
   
3.     }

复制代码

3.子组件使用
在data中定义自己的颜色数组与绑定属性

1. data(){
   
2.         //颜色初始数据
   
3.         colorList: ["#FFC0CB", "#DB7093", "#FF1493", "#DC143C",
   
4.                 "#DDA0DD", "#DA70D6", "#FF00FF", "#9370DB",
   
5.                 "#800080", "#6495ED", "#4169E1", "#0000FF",
   
6.                 "#87CEEB", "#E1FFFF", "#00FFFF", "#7FFFAA",
   
7.                 "#00FF7F", "#008000", "#FFFFE0", "#FFFF00",
   
8.                 "#FFD700", "#F5DEB3", "#FFA500", "#CD5C5C"],
   
9.         //可设置默认值
   
10.         color:'#FFC0CB'
    
11. }

复制代码

使用

1. <color-select :color-list="colorList" v-model="color"></color-select>

复制代码

完（最后贴图一张）

elementUI中修改下拉框的背景颜色和字体颜色

在项目开发过程中，需要用到下拉框，于是想到使用elementUI中的下拉框
就是需要修改一下字体颜色和背景颜色

1. /deep/.el-input__inner {
   
2.   background-color: rgba(108,113,127,30%);
   
3.   border: 1px solid rgba(13, 43, 81, 0.1);
   
4.   color: rgba(116, 116, 116, 1);
   
5.   padding: 0 0px 0 5px;
   
6.   font-size: 12px;
   
7.   border-radius: 0px;
   
8. }

复制代码

至此都是顺利的，但是在修改背景图片的时候，在浏览器上修改可以生效的样式，写到代码里就不生效了，于是开始百度之旅

1. /deep/.el-select-dropdown{
   
2.   background-color: rgb(51 55 64)!important;
   
3.   /* background-color: #f0f; */
   
4.   color: rgba(116, 116, 116, 1)!important;
   
5.   border: none;
   
6. }

复制代码

官方的解释：
Popper-append-to-body属性是Element-UI官方文档中提供的一个属性，该属性的用途就是将el-select选项的内容移动div#app当中，默认值是true

1. :popper-append-to-body="false"

复制代码

自此，问题解决！！

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/article/276234.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！