Vue+elementUI下拉框自定義顏色選擇器方式

更新時(shí)間：2023年02月23日 10:31:59 作者：走在菜鳥路上

這篇文章主要介紹了Vue+elementUI下拉框自定義顏色選擇器方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

elementUI下拉框自定義顏色選擇器

組件的定義

1.定義顏色選擇器組件

話不多說，直接上代碼

<template>
  <el-select ref="colorSelect" placeholder="" v-model="myColor" style="width: 100%" @change="handleChange">
    <el-option
      v-for="item in colorList"
      :key="item"
      label=" "
      :value="item"
      v-html="'<div style=background-color:'+ item+';width:' +'100%'+';height:'+'90%'+'></div>'">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: "colorSelect",
    //允許一個(gè)自定義組件在使用 v-model 時(shí)定制 prop 和 event。默認(rèn)情況下，一個(gè)組件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入類型比如單選框和復(fù)選框按鈕可能想使用 value prop 來達(dá)到不同的目的。使用 model 選項(xiàng)可以回避這些情況產(chǎn)生的沖突。
    model: {
      prop: 'color',
      event: 'update'
    },
    props: {
      //顏色數(shù)組
      colorList: {
        type: Array,
        default: () => {
          return ["#FFC0CB", "#DB7093", "#FF1493", "#DC143C"];
        }
      },
      //父組件綁定的值
      color: {
        type: String,
        default: undefined
      }
    },
    data() {
      return {
        myColor: undefined
      }
    },
    methods: {
      //設(shè)置顏色選擇框中顏色
      setSelectColor(color) {
        //通過操作dom節(jié)點(diǎn)改變樣式
        this.$nextTick(() => {
          let dom = this.$refs.colorSelect;
          if (dom) {
            dom = dom.$el.children[0];
            let inputDom = dom.querySelectorAll(".el-input__inner");
            let icon = dom.querySelectorAll(".el-input__icon");
            inputDom[0].style["background-color"] = color;
            icon[0].style["color"] = "black";
          }
        })
      },
      handleChange(val) {
        this.setSelectColor(val);
        //觸發(fā)update事件更新父組件綁定值
        this.$emit('update', val);
      }
    },
    created() {
      if (this.color && this.color.length > 0) {
        this.myColor = this.color;
        this.setSelectColor(this.color)
      }
    },
    watch: {
      'color': function (val) {
        this.setSelectColor(val);
      }
    }
  }
</script>

<style scoped>

</style>

組件使用了model，不明白的可以查看官網(wǎng)https://cn.vuejs.org/v2/api/#model

父組件使用步驟

1.引入子組件

具體進(jìn)入路徑要看你的子組件位置

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

2.聲明組件

在components中聲明組件

	components: {
      colorSelect
    }

3.子組件使用

在data中定義自己的顏色數(shù)組與綁定屬性

data(){
	//顏色初始數(shù)據(jù)
	colorList: ["#FFC0CB", "#DB7093", "#FF1493", "#DC143C",
		"#DDA0DD", "#DA70D6", "#FF00FF", "#9370DB",
		"#800080", "#6495ED", "#4169E1", "#0000FF",
		"#87CEEB", "#E1FFFF", "#00FFFF", "#7FFFAA",
		"#00FF7F", "#008000", "#FFFFE0", "#FFFF00",
		"#FFD700", "#F5DEB3", "#FFA500", "#CD5C5C"],
	//可設(shè)置默認(rèn)值
	color:'#FFC0CB'
}

使用

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

完（最后貼圖一張）

elementUI中修改下拉框的背景顏色和字體顏色

在項(xiàng)目開發(fā)過程中，需要用到下拉框，于是想到使用elementUI中的下拉框

就是需要修改一下字體顏色和背景顏色

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

至此都是順利的，但是在修改背景圖片的時(shí)候，在瀏覽器上修改可以生效的樣式，寫到代碼里就不生效了，于是開始百度之旅

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

官方的解釋：

Popper-append-to-body屬性是Element-UI官方文檔中提供的一個(gè)屬性，該屬性的用途就是將el-select選項(xiàng)的內(nèi)容移動div#app當(dāng)中，默認(rèn)值是true