Vue教程使用Div标签实现单选框和多选框按钮以便我们随意调整样式
前言:
在写Vue项目时,我们经常会用到单选框以及复选框,以往我们常用的是Element里面的单选框以及复选框,但是呢这里面的选框都不容易调整,假如我们需要不同的样式以及大小,就很难去实现想要的结果,本章教程就为大家讲解,如何使用div标签去实现单选,多选的这样一个功能,以便我们可以任意的调整自己想要的样式
首先:
第一步,我们先画一个草图
vue:
<div class="product_button"><span>单选1</span></div>
<div class="product_button"><span>单选2</span></div>
<div class="product_no_button"><span>多选1</span></div>
<div class="product_no_button"><span>多选2</span></div>
css:
.product_button {
width: 150px;
height: 70px;
margin-right: 15px;
margin-bottom: 15px;
padding-top: 20px;
border: 1px solid lightgray;
background-color: transparent;
color: gray;
cursor: pointer;
display: inline-block;
text-align: center;
border-radius: 5px;
user-select: none;
}
.product_no_button {
width: 150px;
height: 40px;
margin-right: 15px;
margin-bottom: 15px;
padding-top: 5px;
border: 1px solid lightgray;
background-color: transparent;
color: gray;
cursor: pointer;
display: inline-block;
text-align: center;
border-radius: 5px;
user-select: none;
}
效果图:
第二步,我们需要将单选与多选按钮单击事件存上值,使用事件绑定v-on标签
vue:
<div class="product_button" @click="productSelect('单选1')"><span>单选1</span></div>
<div class="product_button" @click="productSelect('单选2')"><span>单选2</span></div>
<div class="product_no_button" @click="productNoSelect('多选1')"><span>多选1</span></div>
<div class="product_no_button" @click="productNoSelect('多选2')"><span>多选2</span></div>
js:
productSelect(val) {
if (this.productRadio == val) {
this.productRadio = "";
} else {
this.productRadio = val;
}
console.info(this.productRadio);
},
productNoSelect(val) {
if (this.productNoSelects.indexOf(val) != -1) {
this.productNoSelects.splice(this.productNoSelects.indexOf(val), 1);
} else {
this.productNoSelects.push(val);
}
console.info(this.productNoSelects);
},
this.productRadio与this.productNoSelects为data中的值,前者字符串与后者数组
到这里存值得问题就已经解决了,接下来就是选中与未选中样式问题,我们准备4种样式:
css:
.product_button {
width: 150px;
height: 70px;
margin-right: 15px;
margin-bottom: 15px;
padding-top: 20px;
border: 1px solid lightgray;
background-color: transparent;
color: gray;
cursor: pointer;
display: inline-block;
text-align: center;
border-radius: 5px;
user-select: none;
}
.select_product_button {
width: 150px;
height: 70px;
margin-right: 15px;
margin-bottom: 15px;
padding-top: 20px;
border: 1px solid deepskyblue;
background-color: lightgray;
color: gray;
cursor: pointer;
display: inline-block;
text-align: center;
border-radius: 5px;
user-select: none;
}
.product_no_button {
width: 150px;
height: 40px;
margin-right: 15px;
margin-bottom: 15px;
padding-top: 5px;
border: 1px solid lightgray;
background-color: transparent;
color: gray;
cursor: pointer;
display: inline-block;
text-align: center;
border-radius: 5px;
user-select: none;
}
.select_product_no_button {
width: 150px;
height: 40px;
margin-right: 15px;
margin-bottom: 15px;
padding-top: 5px;
border: 1px solid deepskyblue;
background-color: lightgray;
color: gray;
cursor: pointer;
display: inline-block;
text-align: center;
border-radius: 5px;
user-select: none;
}
那么我们如何通过动态的改变样式呢,请看下一步
第三步、采用v-bind属性绑定方式动态改变
vue:
<div :class="productRadio == '单选1' ? 'select_product_button' : 'product_button'" @click="productSelect('单选1')"><span>单选1</span></div>
<div :class="productRadio == '单选2' ? 'select_product_button' : 'product_button'" @click="productSelect('单选2')"><span>单选2</span></div>
<div :class="productRadio == '单选3' ? 'select_product_button' : 'product_button'" @click="productSelect('单选3')"><span>单选3</span></div>
<div :class="productNoSelects.indexOf('多选1') != -1 ? 'select_product_no_button' : 'product_no_button'" @click="productNoSelect('多选1')"><span>多选1</span></div>
<div :class="productNoSelects.indexOf('多选2') != -1 ? 'select_product_no_button' : 'product_no_button'" @click="productNoSelect('多选2')"><span>多选2</span></div>
<div :class="productNoSelects.indexOf('多选3') != -1 ? 'select_product_no_button' : 'product_no_button'" @click="productNoSelect('多选3')"><span>多选3</span></div>
这样就完美的解决了根据我们选中变换样式的问题,实现我们想要的功能
效果图:
#好了,本次教程到这里就结束了,希望大家多多点赞关注支持(首席摸鱼师 微信同号),持续跟踪最新文章吧~
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfjakie
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01