vue常用技巧-动态btn的封装

　　@1.要求:

　　1.点击某个按钮后激活active样式,其余按钮则为normal样式

　　2.要满足任意个数btn(btn个数不确定)

　　@2.思路:

　　1.首先,btn个数不确定则意味着必须使用v-for循环复用btn

　　2.btn需要有两个对应样式,一个是普通未激活btn,一个是active(btn active)

　　3.需要注意的是如果把active等激活状态样式写到最外层(scss),可能权重和btn一样而无法层叠样式,需要加上!important 给active加权// 当然如果写到里面就无需这样处理,只是之后维护可能会繁琐一点,根据实际情况处理

　　4.因为涉及状态的改变,所以必须有一个状态两标志用户选择了btn,而且btn必须有标识用来区分到底选中的是那个btn

　　　btn的排序一般交给v-for循环出来的index

     <view

          class="btn"

          v-for="(item, index) in list"

          :key="index"

          @click="toggle(index)"

          :class="[isActive == index ? 'active' : '']"

        >
　　　　// 注意在循环中可以直接将index当成参数传递给事件方法

　　5.隐藏可选的btn是一组index值,例如[0,1,2,3],当我们选中某个按钮时,就选中了某个对应值,我们把对应值用状态变量isActive

存储起来,就知道选中了哪个btn

　　6.那么只要@click 某个btn,就把当前btn的index赋给isActive,之后和各个btn的index值进行比较,和isActive相等的那个就是激活的btn

  data() {

    return {

      isActive: 0,

      list: [

        {

          name: '同比分析',

        },

        {

          name: '同比分析',

        },

        {

          name: '分类型对比',

        },

        {

          name: '分类型',

        },

      ],

    }

  },

  methods: {

    toggle(index) {

      this.isActive = index

    },

  },

巴特西

vue常用技巧-动态btn的封装

最新文章

热门文章