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,
      height: 0,
      width: 0,
    };
  },
  emits: ["select-item"],
  created() {
    this.currentItemIndex = this.defaultIndex;
  },
  computed: {
    buttonBlockStyle() {
      return {
        "--height": `${this.height}px`,
        "--width": `${this.width}px`,
      };
    },
  },
  mounted() {
    const dom = this.$refs.buttonBlock;
    this.height = dom.clientHeight;
    this.width = dom.clientWidth;
  },
  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" ref="buttonBlock" :style="buttonBlockStyle">
    <div class="button-block_item" v-for="(item, index) in items" 
        @click="onClickBlockItemHandler(index)" :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')}`,
        }"
      />
    </div>
  </div>
</template>

<style scoped lang="less">
.button-block {
  display: flex;
  position: relative;
  border-radius: 5px;
  box-sizing: border-box;
  background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
  .button-block_item {
    padding: 0px 8.5px 0px 8.5px;
    cursor: pointer;
  }
  &::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 1px;
    box-sizing: border-box;
    border-radius: 5px;
    width: var(--width);
    height: var(--height);
    background: linear-gradient(360deg, rgba(0, 163, 255, 0) 0%, #0c5a87 100%);
    /* 随便定义颜色 */
    --mask-bg: linear-gradient(red, red);
    --m-o: content-box, padding-box;
    /* mask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域 */
    /* 设置了用作元素蒙版层的图像，默认值为none，值为透明图片，或透明渐变 */
    -webkit-mask-image: var(--mask-bg), var(--mask-bg);
    /* 默认值为border-box，可选值与background-origin相同 */
    -webkit-mask-origin: var(--m-o);
    /* 默认值为border-box，可选值与background-clip相同 */
    -webkit-mask-clip: var(--m-o);
    /* exclude排除，只显示不重合的地方,Firefox支持4个属性 */
    mask-composite: exclude;
    /*只显示下方遮罩，重合的地方不显示*/
    -webkit-mask-composite: destination-out;
    pointer-events: none;
  }
}
</style>