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如何通過(guò)某個(gè)字段獲取詳細(xì)信息
這篇文章主要介紹了vue如何通過(guò)某個(gè)字段獲取詳細(xì)信息，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
?用Vue?Demi?構(gòu)建同時(shí)兼容Vue2與Vue3組件庫(kù)
這篇文章主要介紹了?用Vue?Demi?構(gòu)建同時(shí)兼容Vue2與Vue3組件庫(kù)，我們通過(guò)考慮其功能、工作原理以及如何開(kāi)始使用它來(lái)了解?Vue?Demi，下面我們一起進(jìn)入文章學(xué)起來(lái)吧2022-02-02
在移動(dòng)端使用vue-router和keep-alive的方法示例
這篇文章主要介紹了在移動(dòng)端使用vue-router和keep-alive的方法示例，vue-router與keep-alive提供的路由體驗(yàn)與移動(dòng)端是有一定差別的，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue使用nprogress加載路由進(jìn)度條的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
Vue-loader其實(shí)就是一個(gè)webpack的loader，用來(lái)把vue組件轉(zhuǎn)換成可部署的js, html, css模塊，這篇文章主要介紹了Vue-loader使用教程,需要的朋友可以參考下2022-08-08
解決vue中數(shù)據(jù)更新視圖不更新問(wèn)題this.$set()方法
這篇文章主要介紹了解決vue中數(shù)據(jù)更新視圖不更新問(wèn)題this.$set()方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue.js動(dòng)態(tài)組件和插槽的使用匯總，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
vue中使用mixins/extends傳入?yún)?shù)的方式
這篇文章主要介紹了vue中使用mixins/extends傳入?yún)?shù)的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue echarts實(shí)現(xiàn)綁定事件和解綁事件
這篇文章主要介紹了vue echarts實(shí)現(xiàn)綁定事件和解綁事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
基于Vue實(shí)現(xiàn)樹(shù)形穿梭框的示例代碼
這篇文章主要為大家介紹了如何利用Vue實(shí)現(xiàn)一個(gè)樹(shù)形穿梭框，elementUI和ant-d組件庫(kù)的穿梭框組件效果都不是很好，所以本文將利用一個(gè)新的插件來(lái)實(shí)現(xiàn)，需要的可以參考一下2022-04-04