vue中单选框与多选框的实现与美化
Vue 实现 美化 单选框 选框
2023-09-11 14:19:39 时间
我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的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==1){ this.checkBoxArr[index].selectStatus=0; }else{ this.checkBoxArr[index].selectStatus=1 } }
多选框,控制选择框的样式切换,和单选框是一样的原理,但是单选框只能选一个,而多选框可以选多个,所以在实现多选框时,我们将每个多选框里面都加了个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_(Router路由)-vue-router路由的基本用法
- Vue- 绑定的图片不显示
- Vue - 定义使用组件
- vue之计算属性和侦听器
- vue中v-for数组和对象的循环
- vue.js 3.2.22:用@vueuse/core实现图片懒加载(@vueuse/core@7.0.3)
- 使用vue搭建应用六实现登录页
- vue框架-基础2-vue生命周期
- [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Get up and running with vue-router
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- SAP UI5和Vue的数据双向绑定实现原理比较
- vue+elementui 项目el-menu导航栏实现路由跳转及当前项的设置
- Vue项目中使用继承extends实现复用代码
- Vue:从单页面到工程化项目
- 计算机毕设 SSM Vue的家教应聘招聘管理系统(含源码+论文)
- 计算机毕设 SSM Vue的公寓宿舍后勤管理系统(含源码+论文)
- 计算机毕设 SSM Vue 大学生兼职发布管理系统(含源码+论文)
- Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现(2022/7/13)
- vue实现文章内容过长点击阅读全文功能
- 225:vue+openlayers: zoom大于5弹窗,点击关闭放大不再弹出;zoom小于5后再大于5,继续弹窗
- 219:vue+openlayers 加载gif文件,采用CSS设置gif背景的方式
- 043:vue+openlayers利用canvas clip 实现探照灯效果(代码示例)
- Vue(二)vue 指令及用法举例
- 基于Java+SpringBoot+Vue+Uniapp前后端分离商城系统设计与实现
- Vue 通过 axios 发起网络请求