Question

我有一个用户数组，并在循环中显示卡片组件中的每个用户，我想在点击卡片时将带有动画的卡片扩展为全宽，以显示用户详细信息并隐藏其他卡片，my code on codepen 我的问题是动画，如何平滑地隐藏其他卡片并将点击的卡片展开到整行（col-12）。

＆＃13;

Vue.component('card', {
  props: ['user','index'],
  template:`
<div class="col-6 col-lg-3 mb-3">
    <div class="card step">
        <div class="card-body p-3 clearfix" @click="view(index)">
            name: {{ user.name }}
        </div>
    </div>
</div>`,
  methods: {
    view(index) {
      this.$emit('on-view', index);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    users:[{name:'john',
           description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
           {name:'mike',
           description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
           {name:'kevin',
           description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
           {name:'david',
           description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
          {name:'sasha',
           description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'}],
    detailMode: false
  },
  methods: {
    onDetailMode(index) {
      console.log(index);
      this.detailMode = true;
    }
  }
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app" class="container-fluid mt-4">
  <div class="row">
    <card :user="user" :index="index"
          v-for="(user,index) in users"
          @on-view="onDetailMode"></card>
  </div>
</div>

＆＃13;

Answer 1

您可以使用主要组件中的数据：

data: {
    selectedUser: null,
    user: [...]
}
methods: {
   select (id) {
       this.selectedUser = id;
   }
}

在你的组件中添加一个属性：

Vue.component('card', {
   props: ['user','index', 'details'],
   template:`
   <div class="col-6 col-lg-3 mb-3">
    <div class="card step">
      <div class="card-body p-3 clearfix" @click="view(index)">
          name: {{ user.name }}
       </div>
      <div v-show="details"> ... </div>
    </div> 
  </div>`,
 }
});

然后在循环中，您可以添加适当的行为。

<div v-for="item in users" @click="selectedUser = item.id">
    <card :details="item.id === selectedUser"></card>
</div>

vuejs bootstrap卡组件动画

1 个答案: