[toc] ### 1. 鼠标移入移出显示或者隐藏分享、下载、更多等图标效果 ``` <template> <div class="border-bottom px-3 py-2 file-list"> <Row> <Col span="12" class="d-flex align-items-center"> <Checkbox size="small" class="mb-0 mr-3" :value="item.checked"></Checkbox> <i class="iconfont mr-3" :class="icon" style="font-size:28px"></i> <small>{{item.name}}</small> <div class="ml-auto text-primary hide"> <Tooltip content="分享" placement="bottom"> <Icon type="md-share" size="18" class="mx-2 icon" /> </Tooltip> <Tooltip content="下载" placement="bottom"> <Icon type="md-cloud-download" size="18" class="mx-2 icon" /> </Tooltip> <Dropdown> <Icon type="ios-more" size="18" class="mx-2 icon" /> <DropdownMenu slot="list"> <DropdownItem>重命名</DropdownItem> <DropdownItem>删除</DropdownItem> </DropdownMenu> </Dropdown> </div> </Col> <Col span="6" class="d-flex align-items-center">-</Col> <Col span="6" class="d-flex align-items-center"><small class="text-secondary">{{item.create_time}}</small></Col> </Row> </div> </template> <script> const icons = { dir:{ icon:"icon-file-b-2", color:"text-warning" }, image:{ icon:"icon-file-b-6", color:"text-success" }, video:{ icon:"icon-file-b-9", color:"text-primary" }, text:{ icon:"icon-file-s-7", color:"text-info" }, none:{ icon:"icon-file-b-8", color:"text-muted" }, }; export default { props : { item : Object, index: [Number,String] }, computed : { icon(){ let o = icons[this.item.type] return `${o.icon} ${o.color}` } } } </script> <style scoped="scoped"> .file-list:hover{ background-color: rgba(45,140,240,0.1) !important; } .file-list .hide{ display: none; } .file-list:hover .hide{ display: flex; } </style> ``` ### 2. 实现点击删除弹出对话框效果 ``` <DropdownItem @click.native="deleteItem">删除</DropdownItem> methods: { deleteItem() { this.$Modal.warning({ title: "提示", content: "是否要删除当前选中?", onOk: () => { this.$Message.info('Clicked ok'); } }); } } ``` ### 3. 实现点击删除功能效果 ``` //media-list.vue methods: { deleteItem() { this.$Modal.confirm({ title: "提示", content: "是否要删除当前选中?", onOk: () => { console.log(this.item, this.index) this.$emit("on-event",{ type : "delete", item : this.item, index : this.index }) } }); } } ``` ``` //index.vue <media-list @on-event="handleEvent" v-for="(item,index) in list" :item="item" :index="index" :key="index"></media-list> methods : { handleEvent(e){ switch(e.type){ case "delete" : this.list.splice(e.index,1); this.$Message.success("删除成功") break; default : break; } } } ```