来!抛开input的radio!在Vue里面写个单选器!
程序员文章站
2022-05-31 13:18:14
...
一、首先来个图
二、再来盘代码
HTML
<template>
<div class="selectCate">
//循环!想几个有几个o(* ̄︶ ̄*)o
<div class="add-item-num" v-for="(cate, index) in cateInfos">
<div class="item-num-left">
//这个是文字
<p class="add-item-title">{{cate.productTypeName}}</p>
</div>
<div class="item-num-right" @click="select(index,cate.productTypeID)">
//这个是灰色的图标
<icon v-if="!cate.isON" :icon="'btn_choice'" :ftSize="'18px'"></icon>
//这个是点亮的图标
<icon v-else :icon="'btn_choice_pro'" :ftSize="'18px'"></icon>
</div>
</div>
//这个是按钮,inputIsOk 控制样式转换
<div :class="[inputIsOk ? 'preview-btn2' : 'preview-btn1']"
@click="cateOK">确定</div>
</div>
</template>
css
为了好看的效果,还是贴出来好了,万一自己用呢( ̄︶ ̄)↗
<style lang="scss" scoped>
@import "../../../../common/mixin";
@import "../../../../common/color";
.selectCate {
width: 100%;
height:100vh;
background:$body-grey;
.add-item-num:not(:last-child){
@include margin-border-1px(12px);
}
.add-item-num {
width: 100%;
height: 44px;
font-size: 14px;
background: white;
display: flex;
justify-content: space-between;
align-items: center;
.item-num-left {
display: flex;
align-items: center;
.add-item-title {
margin-left: 12px;
color: #666666;
}
}
.item-num-right {
padding: 12px;
color: #333333;
}
}
/*预览按钮*/
.preview-btn1 {
width: 327px;
height: 38px;
line-height: 38px;
text-align: center;
background: #CECECE;
color: #FFFFFF;
border-color: #CECECE;
border-radius: 19px;
margin: 24px;
font-size:14px;
position: absolute;
bottom: 0;
left: 0;
}
.preview-btn2 {
@extend .preview-btn1;
background: #23CDC8;
border: 0.5px solid #0FAFAA;
color: #FFFFFF;
}
}
好了,大菜来了!script
<script type="text/ecmascript-6">
import icon from "#/common/icon/icon"
export default {
components: {icon},
data() {
return {
//自己随便捏造几项吧!
cateInfos:[
{productTypeName: "测试1", productTypeID: 1, isON: false},
{productTypeName: "测试2", productTypeID: 2, isON: false}
],
//控制按钮的变量
inputIsOk: false,
//选择的ID
selectId:0,
}
},
methods: {
select(index, id) {
//按钮改变
this.inputIsOk = true;
//记录选中的值
this.selectId = id;
//单选效果
//cates是引用,改变cates就是改变cateInfos
let cates = this.cateInfos;
for (let i in cates) {
//注意i是个字符串
if (parseInt(i) === index) {
//点亮
cates[i].isON = true;
} else {
//变灰
cates[i].isON = false;
}
}
console.log(JSON.stringify(cates));
},
cateOK(){
if(this.inputIsOk){
//点击事件
console.log('ok');
}
//否则就是点不动,相当于disabled
}
}
}
</script>