<template> <div class="dee-btn-tools" :class="layout"> <template v-for="(item, i) in toolsData"> <div v-if="item.show" :key="i" class="tool-item" @click="click(item, index, toolList)" > <img v-if="item.httpFlag" :src="item.src" class="icon"> <img v-else :src="item.src" class="icon"> <span class="btn-name">{{ item.name }}</span> </div> </template> </div> </template> <script> export default { name: 'DeeBtnTools', props: { toolList: { type: Array, default: () => { return [] } }, index: { type: Number, default: 0 }, layout: { type: String, default: 'end' }, dataLength: { type: Number, default: 0 } }, computed: { toolsData() { const index = this.index return this.toolList.map((item) => { let httpFlag, src, method let show = false if (item === 'add' || item.method === 'add') { src = require('@/icons/components/tools/add.png') method = 'add' show = true } else if (item === 'delete' || item.method === 'delete') { src = require('@/icons/components/tools/delete.png') // if (index !== 0 || item.show === true) { show = true // } method = 'delete' } else if (item === 'moveUp' || item.method === 'moveUp') { src = require('@/icons/components/tools/moveUp.png') if (index !== 0) { show = true } method = 'moveUp' } else if (item === 'moveDown' || item.method === 'moveDown') { src = require('@/icons/components/tools/moveDown.png') // 当前展示数据不是最后一个时进行展示 if (this.dataLength > 1 && this.dataLength - 1 !== index) { show = true } method = 'moveDown' } else { method = item.method httpFlag = item.httpFlag show = item.show } const name = item.name if (item.src && item.src.startsWith('http')) { httpFlag = true } else if (item.src) { src = require(`@/icons/components/tools/${item.src}`) } return { method, httpFlag, src, show, name } }) } }, mounted() { }, methods: { click(item, index, toolList) { this.$emit('toolsClick', item.method || item, index, toolList) } } } </script> <style scoped lang="scss"> .dee-btn-tools { display: flex; flex-direction: row; .tool-item { display: flex; margin: 0 5px 10px 5px; .btn-name { margin-left: 5px; } } .icon { width: 20px; height: 20px; cursor: pointer; } } .end { justify-content: flex-end; } .start { justify-content: flex-start; } .center { justify-content: center; } </style>