vue中单选框与多选框的实现与美化
我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的radio和checkbox前面的原型图标或方框样式不尽人意。于是,决定自己来实现单选框和复选框。我用的是vue,所以就用vue的方式实现单选和复选框。
下面来看一下单选框的实现:
template
<!-- 单选框 -->
<span class="selfRadio" @click="clickRadio(1)">
<span class="selfRadioImgBox">
<img v-show="radioVal==1" src="../assets/img/checked.png" alt="选中图标">
<img v-show="radioVal!=1" src="../assets/img/noCheck.png" alt="未选中图标">
</span>
单选框
</span>
<span class="selfRadio" @click="clickRadio(2)">
<span class="selfRadioImgBox">
<img v-show="radioVal==2" src="../assets/img/checked.png" alt="选中图标">
<img v-show="radioVal!=2" src="../assets/img/noCheck.png" alt="未选中图标">
</span>
单选框
</span>
style
.selfRadio{
cursor: pointer;
.selfRadioImgBox img{
width:18px;
height:18px;
}
.selfRadioText{
margin-left:10px;
}
}
data
radioVal:0,
methods
clickRadio(val){
if(this.radioVal==val){
this.radioVal=0;
}else{
this.radioVal=val;
}
}
单选框的实现,主体思想是,我们自己选两张图片,用v-show来控制其显示或隐藏,这样达到与单选框一样的效果,而且选择框可以根据自己的意愿来换。
下面来看一下多选框的实现:
data:
checkBoxArr:[
{
text:'多选框1',
selectStatus:0
},
{
text:'多选框2',
selectStatus:0
}
]
template
<!-- 多选框 -->
<span class="selfCheckBox" @click="clickCheckBox(index)" v-for="( item,index) in checkBoxArr" :key="index">
<span class="selfCkeckImgBox">
<img v-show="item.selectStatus==1" src="../assets/img/checked.png" alt="选中图标">
<img v-show="item.selectStatus==0" src="../assets/img/noCheck.png" alt="未选中图标">
</span>
<span class="checkBoxText">
{{ item.text }}
</span>
</span>
style
.selfCheckBox{
cursor: pointer;
.selfCkeckImgBox img{
width:30px;
height:30px;
}
.checkBoxText{
margin-left:10px;
}
}
methods
clickCheckBox(index){
if(this.checkBoxArr[index].selectStatus==){
this.checkBoxArr[index].selectStatus=;
}else{
this.checkBoxArr[index].selectStatus=
}
}
多选框,控制选择框的样式切换,和单选框是一样的原理,但是单选框只能选一个,而多选框可以选多个,所以在实现多选框时,我们将每个多选框里面都加了个selectStatus属性,用来表示,每个多选框的选中状态。
补充一条:选中样式图片与未选中样式图片,可以自己找,可以去ali图库里下载,想用啥用啥。
下面是将bootstrap与单复选框结合起来的使用方式,响应式,美化选择框
<template>
<div>
<!-- 单选框 -->
<div class="row">
<div v-for="(item,index) in radioList" :key="index" class="col col-xs-12 col-sm-6 col-md-4">
<input v-show="false" type="radio" name="gender" :value="item.value" :id="item.value" :checked="sex==item.value" @click="clickRadio(item.value)" />
<label :for="item.value">
<div class="imgBox">
<img v-show="sex==item.value" src="../../assets/checked.png" alt="选中">
<img v-show="sex!=item.value" src="../../assets/noCheck.png" alt="未选中">
</div>
{{item.label}}
</label>
</div>
</div>
<input type="text" v-model="sex"> <hr> <!-- 复选框 -->
<div class="row">
<div v-for="item in checkBoxList" :key="item.value" class="col col-xs-12 col-sm-6 col-md-4">
<label>
<div class="imgBox">
<img v-show="fruit.includes(item.value)" src="../../assets/checked.png" alt="选中">
<img v-show="!fruit.includes(item.value)" src="../../assets/noCheck.png" alt="未选中">
</div>
<input v-show="false" @click="clickCheckBox(item.value)" name="Fruit" type="checkbox" :value="item.value" :checked="fruit.includes(item.value)" />
{{item.label}}
</label>
</div>
</div> <input type="text" :value="fruit.join()">
</div>
</template> <script>
export default {
data(){
return {
radioList:[
{value:"男",label:"男"},
{value:"女",label:"女"},
{value:"人妖",label:"人妖"}
],
sex:"男",
checkBoxList:[
{value:"苹果",label:"苹果"},
{value:"香蕉",label:"香蕉"},
{value:"梨",label:"梨"},
{value:"西瓜",label:"西瓜"}
],
fruit:["苹果","香蕉"]
}
},
methods:{
clickRadio(val){
this.sex=val;
},
clickCheckBox(val){
if(this.fruit.includes(val)){
this.fruit.splice(this.fruit.indexOf(val),1);
}else{
this.fruit.push(val);
}
console.log(this.fruit.join())
}
}
}
</script> <style lang="scss" scoped>
.imgBox{
width:16px;
height:16px;
display:inline-block;
}
.imgBox img{
width:100%;
height:100%;
} </style>
上图
vue中单选框与多选框的实现与美化的更多相关文章
- vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTM ...
- Android笔记(十五) Android中的基本组件——单选框和复选框
单选框和多选框通常用来在设置用户个人资料时候,选择性别.爱好等,不需要用户直接输入,直接在备选选项中选择,简单方便. 直接看代码: <?xml version="1.0" e ...
- Android开发之使用AlertDialog创建对话框,单选框和多选框
对话框: 对话框的icon,title,message等都可以不设置. 单选框和多选框与对话框勾选步骤基本上一致. 对话框的构建步骤: 1.使用AlertDialog类的内部类Builder类new ...
- AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定
AngularJS与单选框及多选框的双向动态绑定 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...
- CSS学习笔记三:自定义单选框,复选框,开关
一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...
- 使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 微信小程序-修改单选框和复选框大小的方法
方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保 ...
- HTML--使用单选框、复选框,让用户选择
在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看 ...
- jQuery获取单选框(复选框)选中的状态
jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...
随机推荐
- springboot自动配置国际化失效分析
最近在整理springBoot国际化时,发现国际化没有生效,通过报错提示在 MessageTag -> doEndTag处打断点 最后发现messageSource并不是ResourceBund ...
- Java实现的基础数据结构
Java实现的基础数据结构 0,常用的基础数据结构 图1 基础数据结构&相关特性 图2 Java自带的类集框架&继承关系图 1,数组[Array] 特点:长度固定.查找方便[直接使用i ...
- GET方法和POST方法的区别,Get方法到底可传递的字符串的最大长度是多少?
GET方法和POST方法的区别,Get方法到底可传递的字符串的最大长度是多少?曾经人介绍,如果使用GET方式传输参数,URL的最大长度是256个字节,对此深信不疑. 但是最近看到一些超长的url,能够 ...
- 清除vs2005、vs2008起始页最近打开项目
有时候vs2005起始最近打开项目过多很想清除掉,但打遍了也没找到清除选项在哪里,今天找到了方法,发上来和大家共享. 方法一手工操作方法:1)删除最近打开的文件运行regedit,打开HKEY_CUR ...
- Leaflet个人封装笔记
<!DOCTYPE html> <html> <head> <link href="style/leaflet.css" type=&qu ...
- 【原创】大叔经验分享(70)marathon重启app后一直处于waiting状态
marathon重启app后一直处于waiting状态,查看marathon日志 # journalctl -u marathon -f 有如下日志: Jun 14 12:58:38 DataOne- ...
- mysql java jdbc 如何 update select
2019年8月6日17:28:07 sql 不知道怎么写,也没去查,因为需求可能中途需要修改值,有点麻烦 直接用jdbc实现. 查询出来的值,直接根据update条件更新,写在一个方法里 public ...
- 使用spring的test时,当配置文件不在classpath下,而在WEB-INF下
@ContextConfiguration(locations = {"file:src/main/webapp/WEB-INF/applicationContext.xml"})
- redis cluster突然少了一个node的问题
今天进入redis执行cluster info发现 cluster_state:fail 并且 cluster_known_nodes:5 少了一个7006的node 然后我重启了7006的 ...
- 《python解释器源码剖析》第4章--python中的list对象
4.0 序 python中的list对象,底层对应的则是PyListObject.如果你熟悉C++,那么会很容易和C++中的list联系起来.但实际上,这个C++中的list大相径庭,反而和STL中的 ...