vue实现标签多选及手风琴效果

引导页.jpg

多标签选中实现核心原理：选中标签添加到同一数组，通过数组中是否有该元素添加active类；

手风琴效果实现原理：数组中默认添加状态属性类为true/false，开关改动相应index的状态值；

代码如下：

<div class="clssify_box mt_20" v-for="(classify,i) in categories" :key="i">

        <div class="hd">

          <span>{{classify.name}}（{{classify.children.length}}）</span>    

          <span style="float:right;" v-show="classify.status" @click="changePanel(i)"><img src="../../assets/switch0.png" width="20" alt=""></span>

          <span style="float:right;" v-show="!classify.status" @click="changePanel(i)"><img src="../../assets/switch1.png" alt=""></span>

        </div>

        <div class="clssify_list" v-show="classify.status">

           <div class="btn_info mt_15" :class="{active:choosedValue.indexOf(item.id)!=-1}"

            v-for="(item,index) in classify.children" :key="index"

            @click="chooseClassify(index,item.id)">

            {{item.name}}</div>

            <div class="other"></div>

            <div class="other"></div>

            <div class="other"></div>

        </div>

      </div>

js部分

data() {

      return {

        isActive:false,

        showPanel:true,

        choosedValue:[],

        categories:[]

      }

    },

getCategory(){

        var that = this;

        httputil.request("category/tree", {}, function (successresult) {

            that.categories = successresult.categories;

            that.categories.map(i=>{

              that.$set(i,'status',true)

            })

          }, function (errorresult) {

            if (type == "down") {

              done();

            }

          }, "GET", false, "")

      },

      chooseClassify(i,value){

        let arrIndex = this.choosedValue.indexOf(value);

        if(arrIndex>-1){

            this.choosedValue.splice(arrIndex,1);

        }else{

            this.choosedValue.push(value);

        }

      },

      changePanel(i){

        this.categories[i].status = !this.categories[i].status;

      }