根据焦点获取自适应大小位置的漂移边框-vue组件

164374652457820222243241.gif

<template>
  <div class="moving-border-container" ref="moving-border-container" @click="getFocus(null)">
    <div ref="border" class="border" :style="{
        borderRadius,
        '--spread-width': spreadWidth,
    }"></div>
    <slot />
  </div>
</template>

<script>
/**
 * 页面不要滚动,不然位置边框位置不更新
 */
export default {
  props: {
    color: {
      type: String,
      default: "#337ab7"
    },
    borderRadius: {
      type: String,
      default: "2px"
    },
    spreadWidth: {
      type: String,
      default: "2px"
    },
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    getFocus(focusDom) {
      let container = this.$refs['moving-border-container'];
      if (!focusDom) {
        focusDom = container.querySelector("*:focus")
      } else {
        focusDom = container
      }
      if (focusDom) {
        this.$refs['border'].style['box-shadow'] = `0 0 0 ${this.spreadWidth} ${this.color}`;
        this.$refs['border'].style.width = focusDom.clientWidth + 8 + "px";
        this.$refs['border'].style.height = focusDom.clientHeight + 8 + "px";
        this.$refs['border'].style.left = focusDom.getBoundingClientRect().left - 3 + "px";
        this.$refs['border'].style.top = focusDom.getBoundingClientRect().top - 3 + "px";
      }
      focusDom && (focusDom.onblur = () => {
        this.$refs['border'].style['box-shadow'] = `0 0 0 ${this.spreadWidth} transparent`;
      })
    }
  },
}
</script>

<style scoped lang="scss">
.moving-border-container {
  position: relative;
  display: inline-block;
  .border {
    pointer-events: none;
    position: fixed;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 var(--spread-width) transparent;
    transition: 0.3s ease-out;
    border-radius: 2px;
    padding: 2px;
  }
}
</style>