DeeBtnTools.vue 2.88 KB
Newer Older
wangdanlei's avatar
wangdanlei committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
<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>