import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
myCollect: [
{ "name": "杨志", "level": "主治医师", "department": "(门)消化儿科","url":"/static/images/personal-center/start.jpg" },
{ "name": "胡夷光", "level": "副主治医师", "department": "(门)内科","url":"/static/images/personal-center/start.jpg" },
{ "name": "李特点", "level": "专家", "department": "(门)皮肤科","url":"/static/images/personal-center/start.jpg" },
],
},
mutations: {
changeCollect: function (state,oIndex) {
state.myCollect.splice(oIndex,1)
}
},
getters: {},
actions: {}
});
export default store
<template>
<div class="wraper">
<div class="container">
<div class="section">
<block v-if="collect"></block>
<block v-else>
<a class="row" v-for="(item,index) in myCollect" :key="index" href="javascript:;" hover-class="none">
<div class="col-l"><img style="width: 96rpx;height: 96rpx;" :src="item.url"></div>
<div class="col-r">
<div class="info">
<p class="info-top"><span class="info-name">{{item.name}}</span> <span class="info-level">{{item.level}}</span></p>
<p class="info-depart">{{item.department}}</p>
</div>
<div :data-index="index" class="btn-cancel" @click="unFollow(‘取消关注‘,$event)">取消关注</div>
</div>
</a>
</block>
</div>
</div>
</div>
</template>
<script>
import store from ‘../../../utils/store‘;
export default {
components: {},
data () {
return {
collect: false,
}
},
computed: {
myCollect: function () {
return store.state.myCollect;
},
},
methods: {
unFollow: function (prompt,res) {
// console.log(prompt,res);
let oIndex = res.currentTarget.dataset.index;
store.commit("changeCollect",oIndex);
}
},
}
</script>
<style scoped>
.container {
flex: 1;
overflow-y: auto;
background-color: #fff;
}
.section {
width: 100%;
height: 100%;
}
.row {
width: 100%;
height: 160rpx;
line-height: 160rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
overflow: hidden;
}
.row .col-l {
width: 96rpx;
height: 96rpx;
/*box-sizing: border-box;*/
padding-left: 24rpx;
}
.row .col-r {
flex: 1;
height: 100%;
box-sizing: border-box;
border-bottom: 1rpx solid #ebebeb;
padding-right: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.col-r .info {
box-sizing: border-box;
padding-left: 24rpx;
}
.col-r .info p {
height: 30rpx;
line-height: 30rpx;
}
.btn-cancel {
height: 55rpx;
line-height: 55rpx;
padding: 0 22rpx;
border: 1rpx solid #999;
color: #999;
font-size: 30rpx;
border-radius: 5rpx;
}
.info {
font-size: 26rpx;
}
.col-r .info .info-top {
height: 60rpx;
line-height: 60rpx;
}
.info .info-name {
font-size: 36rpx;
color: #404040;
font-weight: 600;
}
.info .info-level {
color: #404040;
margin-left: 21rpx;
}
.info .info-depart {
color: #999;
}
</style>
原文：https://www.cnblogs.com/bgwhite/p/9472344.html