来！抛开input的radio！在Vue里面写个单选器！

最新推荐文章于 2024-09-04 20:49:58 发布

一条大河全靠浪

最新推荐文章于 2024-09-04 20:49:58 发布

阅读量1.5k

点赞数

分类专栏： Vue实践文章标签： vue radio 单选器

本文链接：https://blog.csdn.net/hyeeee/article/details/82692226

版权

Vue实践专栏收录该内容

32 篇文章 1 订阅

订阅专栏

一、首先来个图

这里写图片描述

二、再来盘代码

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>

好了，大菜来了！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>

这里写图片描述

加上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;
        }


    }