vue 自定义颜色组件化
gooood个人博客网站
数组
1、组件演示图
2、组件代码
<template>
<div>
<div>
<span :style="{'background':color}"></span>
</div>
<div>
<ul>
<template v-for="item in colorList">
<li :style="{'background':item.color}" :data-color="item.color" @click="getColor(item.color)"></li>
</template>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
color:this.total,
colorList:[
{color:"#000000"},
{color:"#424242"},
{color:"#616261"},
{color:"#9D9C95"},
{color:"#CDC7CF"},
{color:"#EFF0EF"},
{color:"#F0F9F8"},
{color:"#FFFFFF"},
{color:"#F70000"},
{color:"#FD9B00"},
{color:"#FFFD00"},
{color:"#36FD00"},
{color:"#36FFFF"},
{color:"#001AFF"},
{color:"#991AFF"},
{color:"#F91AFF"},
{color:"#F7C5CF"},
{color:"#FFE7CA"},
{color:"#FEF0C5"},
{color:"#D7EFD4"},
{color:"#CFDFE7"},
{color:"#CFE8F8"},
{color:"#D7D7E8"},
{color:"#E7D7DF"},
{color:"#E49B99"},
{color:"#FDC799"},
{color:"#FDE797"},
{color:"#B7D7A4"},
{color:"#A5C5CF"},
{color:"#9DC5F2"},
{color:"#B5A6D9"},
{color:"#D5A4BF"},
{color:"#E45F60"},
{color:"#F6AD65"},
{color:"#FFD55A"},
{color:"#96BD76"},
{color:"#74A6AD"},
{color:"#6DAFE2"},
{color:"#8B7BCB"},
{color:"#C57AA5"},
{color:"#CC0000"},
{color:"#E6932A"},
{color:"#EFC509"},
{color:"#6CA43F"},
{color:"#4C7A8E"},
{color:"#3D86CB"},
{color:"#614CAA"},
{color:"#A54A7C"},
{color:"#990000"},
{color:"#B36100"},
{color:"#BC9100"},
{color:"#3D7A14"},
{color:"#124759"},
{color:"#115396"},
{color:"#2E1873"},
{color:"#701843"},
{color:"#610100"},
{color:"#783800"},
{color:"#856200"},
{color:"#2B5212"},
{color:"#0B3038"},
{color:"#023164"},
{color:"#1E0F4A"},
{color:"#480F31"},
]
}
},
props: ["total"],
mounted:function(){
},
methods:{
getColor(val){
this.color=val;
this.$emit('color',val);
},
}
}
</script>
注：需要引入button.css样式文件可看效果