zhgkpt-datav/components/ButtonBlock/index.vue

<script >
import LinearText from '../LinearText';
export default {
  name: 'ButtonBlock',
  components: {
    LinearText
  },
  props: {
    items: {
      type: Array,
      default: () => [
        "本日",
        "本周",
        "本月"
      ]
    },
    valueField: {
      type: String,
      default: ""
    },
    defaultIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentItemIndex: 0,
    }
  },
  emits: ["select-item"],
  created() {
    this.currentItemIndex = this.defaultIndex;
  },
  methods: {
    /**
     * 渲染当前节点的颜色
     * @param {*} index 当前选项索引
     * @param {*} color 选择时的颜色
     */
    renderCurrentItemColor(index, color) {
      return this.currentItemIndex === index ? color : `${color}88`
    },
    /**
     * 渲染文本内容
     * @param {*} item 节点数据
     */
    renderText(item) {
      if (this.valueField === '') {
        return item
      } else {
        return item[this.valueField]
      }
    },
    /**
     * 点击节点处理器
     * @param {*} index 当前点击的选项索引
     */
    onClickBlockItemHandler(index) {
      this.currentItemIndex = index
      this.$emit('select-item', index)
    }
  }
}
</script>

<template >
  <div class="button-block">
    <div class="button-block_item" v-for="(item,index) in items" :key="index">
      <linear-text :text="renderText(item)"
      :startColor="renderCurrentItemColor(index, '#95CCFF')"
      :endColor="renderCurrentItemColor(index, '#FFFFFF')"
      fontSize="16px"   :ext-class="{
        textShadow: `0 1px 1px ${renderCurrentItemColor(index, '#0057FF')}`
      }" @click="onClickBlockItemHandler(index)" />
    </div>
  </div>
</template>

<style scoped lang='less'>
.button-block {
  display: flex;
  border-radius: 5px;
  box-sizing: border-box;
  background: linear-gradient(
    0deg,
    #0094FF90 0%,
    #0094FF10 100%
  );
  .button-block_item {
    padding: 0px 8.5px 0px 8.5px;
    cursor: pointer;
  }
}
</style>