zhgkpt-datav/components/ButtonGroup/ButtonGroupItem.vue

<script>
export default {
  name: "ButtonGroupItem",
  data() {
    return {
      checked: true,
      height: 0,
      width: 0,
    };
  },
  emits: ["ClickItem"],
  computed: {
    buttonGroupItem() {
      return {
        "--height": `${this.height}px`,
        "--width": `${this.width}px`,
      };
    },
  },
  methods: {
    check() {
      this.checked = true;
    },
    uncheck() {
      this.checked = false;
    },
  },
  mounted() {
    const dom = this.$refs.buttonGroupItem;
    this.height = dom.clientHeight;
    this.width = dom.clientWidth;
  },
};
</script>

<template>
  <div
    @click="(e) => $emit('click', e)"
    :class="{
      'button-group_item': true,
      checked: checked,
    }"
    ref="buttonGroupItem"
    :style="buttonGroupItem"
  >
    <slot />
  </div>
</template>

<style scoped lang="less">
.button-group_item {
  position: relative;
  padding: 8px 20px 2px 20px;
  font-size: 14px;
  box-sizing: border-box;
  cursor: pointer;
  margin-right: 5px;
  &.checked,
  &:hover {
    background: linear-gradient(360deg, #0094ff10 0%, #0094ff60 100%);
    border-radius: 5px;
    &::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>