Element-UI MCP Server

## ColorPicker 颜色选择器 用于颜色选择，支持多种格式。 ### 基础用法 :::demo 使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。 ```html <div class="block"> <span class="demonstration">有默认值</span> <el-color-picker v-model="color1"></el-color-picker> </div> <div class="block"> <span class="demonstration">无默认值</span> <el-color-picker v-model="color2"></el-color-picker> </div> <script> export default { data() { return { color1: '#409EFF', color2: null } } }; </script> ``` ::: ### 选择透明度 :::demo ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过`show-alpha`属性即可控制是否支持透明度的选择。 ```html <el-color-picker v-model="color" show-alpha></el-color-picker> <script> export default { data() { return { color: 'rgba(19, 206, 102, 0.8)' } } }; </script> ``` ::: ### 预定义颜色 :::demo ColorPicker 支持预定义颜色 ```html <el-color-picker v-model="color" show-alpha :predefine="predefineColors"> </el-color-picker> <script> export default { data() { return { color: 'rgba(255, 69, 0, 0.68)', predefineColors: [ '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577' ] } } }; </script> ``` ::: ### 不同尺寸 :::demo ```html <el-color-picker v-model="color"></el-color-picker> <el-color-picker v-model="color" size="medium"></el-color-picker> <el-color-picker v-model="color" size="small"></el-color-picker> <el-color-picker v-model="color" size="mini"></el-color-picker> <script> export default { data() { return { color: '#409EFF' } } }; </script> ``` :::