欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-31 13:18:14
...

一、首先来个图

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

二、再来盘代码

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>

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