Lotus的博客

建议删除整个node_modules然后重试。

只有手动修改样式呢。官方文档direction只有up和down

阻止向上冒泡

<div class="item" @click.stop="function">

就用媒体查询，在不同尺寸下做适配。写在一个css里面OK

<template>
  <div class="about">
    <div v-for="(item,i) in list" class="btn" :class="item.status?'active':''" @click="changeBtn(i)">{{i}}</div>
  </div>
</template>
<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  @Component
  export default class ButtonChange extends Vue {
    private list:any = [{
      name: '1',
      status: false,
    },{
      name: '2',
      status: false,
    },{
      name: '3',
      status: false,
    },{
      name: '4',
      status: false,
    },{
      name: '5',
      status: false,
    },{
      name: '6',
      status: false,
    }];
    private changeBtn ( i :number ) {
      this.list[i].status = !this.list[i].status;
    }
  }
</script>
<style scoped lang="scss">
  .btn {
    cursor: pointer;
    width: 50px;
    height: 20px;
    line-height: 20px;
    border-radius: 4px;
    background: #ccc;
    margin: 0 8px 8px;
    float: left;
  }
  .btn.active{
    background: #42b983;
  }
</style>

参考一下，这是你想要的结果吗？
就是用双向绑定改变item的状态，切换class。