Vue中使用select下拉列表以及修改默认样式

最新推荐文章于 2024-10-07 21:54:14 发布

sxs7970

最新推荐文章于 2024-10-07 21:54:14 发布

阅读量8.4k

点赞数

分类专栏：前端 Vue.js 文章标签： vue html5 css javascript

本文链接：https://blog.csdn.net/sxs7970/article/details/105046771

版权

前端同时被 2 个专栏收录

132 篇文章 2 订阅

订阅专栏

Vue.js

37 篇文章 0 订阅

订阅专栏

element-ui等前端组件库中，都有人家封装好的组件，可以直接拿来用。不想用的那就只能自己写了。

<select class="sel-choose" name="" v-model="selId" @change="choose" :class="{'default-color':selected}">
	<option value="" id="0" style="display: none;" disabled selected>请选择</option>
	<option v-for="item in chooseArr" :id="item.id" v-text="item.name"></option>
</select>

export default{
	data(){
		return{
			selId:'',
			chooseArr:[
				{id:1,name:'成员1'},
				{id:2,name:'成员2'}
			],
			selected:true,//默认的字体样式
		}
	}
}

比如想要改 请选择 这三个字的样式，

export default{
	mthoeds:{
		choose(){
			if(this.selId){
				this.selected=false;
			}
		}
	}
}

css样式，以及修改默认的下拉三角的图标

.sel-choose{
	-webkit-appearance: none; /*去除chrome浏览器的默认下拉图片*/
	-moz-appearance: none; /*去除Firefox浏览器的默认下拉图片*/
	background: url("替换的图片路径") no-repeat right center;
	background-size: 10px  10px;/*图片大小*/
	background-position: 98%;/*图片位置*/
	
}
.default-color {
	font-size: 14px;
	color: #9b9b9b;
}