el-color-picker-sheldon使用说明(一款基于Vue和ElementUI的取色器)
<template>
<div id="app">
<el-color-picker
v-model="color"
:predefine="predefineColors"
@change="handleColorChange">
</el-color-picker>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
color: '#409EFF',
predefineColors: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 64, 129, 0.68)',
'rgb(255, 255, 255)',
'rgba(16, 142, 232, 0.1)'
]
};
},
methods: {
handleColorChange(val) {
console.log(`当前颜色:${val}`);
}
}
};
</script>
这个代码实例展示了如何在Vue应用中使用el-color-picker
组件,它包含了一个取色器和一个预定义颜色列表。用户可以从预定义颜色中选择,也可以通过取色器选择任意颜色。每次颜色更改时,都会触发一个事件,并在控制台打印出新的颜色值。
评论已关闭