Vue+elementUI下拉框自定義顏色選擇器方式
更新時(shí)間：2023年02月23日 10:31:59 作者：走在菜鳥(niǎo)路上
這篇文章主要介紹了Vue+elementUI下拉框自定義顏色選擇器方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
elementUI下拉框自定義顏色選擇器
組件的定義
1.定義顏色選擇器組件
話(huà)不多說(shuō)，直接上代碼
<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 會(huì)把 value 用作 prop 且把 input 用作 event，但是一些輸入類(lèi)型比如單選框和復(fù)選框按鈕可能想使用 value prop 來(lái)達(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) {
//通過(guò)操作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)目開(kāi)發(fā)過(guò)程中，需要用到下拉框，于是想到使用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í)候，在瀏覽器上修改可以生效的樣式，寫(xiě)到代碼里就不生效了，于是開(kāi)始百度之旅
/deep/.el-select-dropdown{
? background-color: rgb(51 55 64)!important;
? /* background-color: #f0f; */
? color: rgba(116, 116, 116, 1)!important;
? border: none;
}官方的解釋?zhuān)?/strong>
Popper-append-to-body屬性是Element-UI官方文檔中提供的一個(gè)屬性，該屬性的用途就是將el-select選項(xiàng)的內(nèi)容移動(dòng)div#app當(dāng)中，默認(rèn)值是true
:popper-append-to-body="false"
自此，問(wèn)題解決??！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能實(shí)例
- vue+elementUI的select下拉框回顯為數(shù)字問(wèn)題
- vue+elementUI下拉框回顯問(wèn)題及解決方式
- VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問(wèn)題
- vue3+elementUI實(shí)現(xiàn)懸浮多行文本輸入框效果
- Vue+elementUI?el-input輸入框手機(jī)號(hào)校驗(yàn)功能
- Vue ElementUI實(shí)現(xiàn):限制輸入框只能輸入正整數(shù)的問(wèn)題
- vue elementui 動(dòng)態(tài)追加下拉框、輸入框功能
相關(guān)文章
Vue的事件響應(yīng)式進(jìn)度條組件實(shí)例詳解
這篇文章主要介紹了Vue的事件響應(yīng)式進(jìn)度條組件的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02
這篇文章主要介紹了簡(jiǎn)述vue狀態(tài)管理模式之vuex，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue學(xué)習(xí)筆記之slot插槽基本用法實(shí)例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之slot插槽基本用法,結(jié)合實(shí)例形式分析了vue slot插槽基本使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
Vue3發(fā)送post請(qǐng)求出現(xiàn)400?Bad?Request報(bào)錯(cuò)的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue3發(fā)送post請(qǐng)求出現(xiàn)400?Bad?Request報(bào)錯(cuò)的解決辦法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式簡(jiǎn)單總結(jié)
在做開(kāi)發(fā)中都會(huì)遇到的需求,每個(gè)用戶(hù)的權(quán)限是不一樣的,那他可以訪(fǎng)問(wèn)的頁(yè)面(路由)可以操作的菜單選項(xiàng)是不一樣的,如果由后端控制,我們前端需要去實(shí)現(xiàn)動(dòng)態(tài)路由,動(dòng)態(tài)渲染側(cè)邊菜單欄,這篇文章主要給大家介紹了關(guān)于vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了10分鐘教你快速上手Vue3中新增的API,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
淺談Vuex的this.$store.commit和在Vue項(xiàng)目中引用公共方法
這篇文章主要介紹了淺談Vuex的this.$store.commit和在Vue項(xiàng)目中引用公共方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue阻止頁(yè)面回退的實(shí)現(xiàn)方法(瀏覽器適用)
這篇文章主要介紹了vue阻止頁(yè)面回退的實(shí)現(xiàn)方法(瀏覽器適用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
解決vue cli4升級(jí)sass-loader(v8)后報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了解決vue cli4升級(jí)sass-loader(v8)后報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端
在開(kāi)發(fā)中我們常常會(huì)遇到需要讓滾動(dòng)條保持到最底端的需求,比如在開(kāi)發(fā)一個(gè)聊天框時(shí),請(qǐng)求接口拿到消息列表數(shù)據(jù),展示到前端頁(yè)面時(shí),需要讓滾動(dòng)條自動(dòng)滾到最底端,以此來(lái)展示最后的聊天記錄,這篇文章主要介紹了Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端,需要的朋友可以參考下2024-08-08