vuejs 引导卡片组件动画

Posted 2023-02-23

【中文标题】vuejs 引导卡片组件动画

【英文标题】：vuejs bootstrap card component animation

【发布时间】：2018-07-01 01:47:04

【问题描述】：

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

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;
    
  
);

<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>

【参考方案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>