Vue+elementUI下拉框自定义颜色选择器
Vue+elementUI下拉框自定义颜色选择器
- 一、组件的定义
- 1.定义颜色选择器组件
- 二、父组件使用步骤
- 1.引入子组件
- 2.声明组件
- 3.子组件使用
一、组件的定义
1.定义颜色选择器组件
话不多说,直接上代码
<template><el-select ref="colorSelect" placeholder="" v-model="myColor" style="width: 100%" @change="handleChange"><el-optionv-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",//允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。model: {prop: 'color',event: 'update'},props: {//颜色数组colorList: {type: Array,default: () => {return ["#FFC0CB", "#DB7093", "#FF1493", "#DC143C"];}},//父组件绑定的值color: {type: String,default: undefined}},data() {return {myColor: undefined}},methods: {//设置颜色选择框中颜色setSelectColor(color) {//通过操作dom节点改变样式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);//触发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,不明白的可以查看官网https://cn.vuejs.org/v2/api/#model
二、父组件使用步骤
1.引入子组件
具体进入路径要看你的子组件位置
import colorSelect from "../../../elements/colorSelect";
2.声明组件
在components中声明组件
components: {colorSelect}
3.子组件使用
在data中定义自己的颜色数组与绑定属性
data(){//颜色初始数据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"],//可设置默认值color:'#FFC0CB'
}
使用
<color-select :color-list="colorList" v-model="color"></color-select>
完(最后贴图一张)
Vue+elementUI下拉框自定义颜色选择器相关推荐
- ElementUI下拉框选择后不显示值
文章目录 方法一 方法二 问题:vue(ElementUI)下拉框选择后赋值了,但是框上不显示 <!--下拉框--> <el-form-item label="用户角色&q ...
- Vue封装下拉框组件时,为document绑定原生事件addEventlistener(click“),切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
- vue省市区 下拉框实现
vue省市区 下拉框实现 1.效果如图 选中省之后,再选择对应的市,再选择对应的区 数据源js文件: 码云:https://gitee.com/wyjpositive/mybatis-plus-dem ...
- vue项目下拉框内容过长做一个滚动条的效果
vue项目下拉框内容过长做一个滚动条的效果 如下图: 关键代码如下:
- 关于elementUI下拉框value和label问题
关于elementUI下拉框回显value而不是label问题 今天使用elementUI中的下拉模板时发现了一个很大的坑,根据文档所介绍的是: key唯一标识 label选择之后显示到选 ...
- element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...
- elementui下拉框 清空_巧妙解决element-ui下拉框选项过多的问题
1. 场景描述 不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好 用人会说element-ui的select有一 ...
- 巧妙解决element-ui下拉框选项过多的问题
1. 场景描述 不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好 用人会说element-ui的select有一 ...
- Vue element 下拉框 可输入可选择(无bug)
背景: 需要一个可填可选的下拉框 当用户自定义输入时,自动添加"(其他)"后缀 效果如下: <el-select v-model="value"place ...
- elementui下拉框默认选中第一个的方法
1.用elementui画下拉框. <el-form-item label="活动区域"><el-select v-model="form.region ...
最新文章
- JAVA常见的排序算法
- 怎么用git将本地代码上传到远程服务器_git命令 将本地代码上传到远程服务器...
- c#编译时提高兼容性_幻像类型提高了编译时的安全性
- 清除无用工具栏:CommandbarCleaner下载
- RegularExpressions(2) RegularExpressions 支持的正则表达式语法
- Intel® Performance Counter Monitor - A Better Way to Measure CPU Utilization
- Centos7挂载iso镜像文件配置本地yum源
- dev万能头文件_CSP-J/S考试中是否可以使用万能头文件
- Linux系统ftp服务器搭建
- 程序教程基础_电脑是个啥玩意
- C语言练习实例——费氏数列
- c语言 一维薛定谔方程,基于MATLAB快速傅里叶非线性薛定谔方程.ppt
- 华硕服务器 u盘安装系统,华硕电脑u盘安装系统教程
- qt实现涂鸦板_Qt之旅--- 10 涂鸦板
- 用java制作扑克牌_java实现简单扑克牌游戏
- vue网页打印针式打印机内容显示不全
- 干货 | 使用京东云搭建视频直播网站
- Qualcomm平台下基于QSEE的指纹识别方案移植之五多厂商兼容方案
- bjca数字认证那个垃圾公司,做的垃圾客户端
- 变电站3D仿真实训系统的特色及优势
热门文章
- flash cs6 初试
- 奥特曼系列服务器,奥特曼系列ol无限光元
- SIM900A模块与PC如何连接?
- PHP之AJAX、POST传值【顶、踩】
- 量子计算机采用量子力学原理,量子力学原理及其应用.docx
- Objective-C基础之闭包
- The Book of Qt4 : The Art of Building Qt Application 阅读笔记
- html右下角固定广告,jQuery右下角悬浮广告
- solidworks图纸模板添加_solidworks工程图模板制作(大全).doc
- SolidWorks二次开发-工程图-预定义视图