VUE项目中CSS获取变量动态设置伪元素的高度

image.png

右边是列表，左边是一个按钮（点击“或”会变成“且”， 反之）
圆圈上下是伪元素。伪元素的高度动态配置，根据左边列表的高度来

image.png

 watch: {
    'list': {
      handler(newV, oldV) {
        if (newV && newV.length > 0) {
          this.$nextTick(()=> {
            let el = this.$refs.allTagRef
            if (el) {
              if (this.offsetHeight !== el.offsetHeight) this.offsetHeight = el.offsetHeight //动态取右边列表的高度
            }
          })

        }
      },
      deep: true
    }
  },
  props: {},
  computed: {
    textBefore() {
      return (this.offsetHeight / 2 - 11) + 'px' //前伪元素高度是列表高度/2 - 圆圈一半的高度
    },
    textTopBefore() {
      return '-' + (this.offsetHeight / 2 - 11) + 'px' //前伪元素定位top高度是 - (列表高度/2 - 圆圈一半的高度)
    },
    textAfter() {
      return (this.offsetHeight / 2 - 11) + 'px' //后伪元素高度是列表高度/2 - 圆圈一半的高度
    },
  },

css部分

  .text {
          width: 20px;
          height: 20px;
          border: 1px solid var(--seer-primary);
          color: var(--seer-primary);
          font-size: 14px;
          border-radius: 50%;
          text-align: center;
          line-height: 20px;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;

          &:after {
            width: 1px;
            height: var(--title-after);
            background-color: var(--seer-primary);
            content: '';
            display: block;
            left: 0;
            right: 0;
            margin: auto;
            position: absolute;
          }

          &:before {
            width: 1px;
            height: var(--title-before);
            background-color: var(--seer-primary);
            content: '';
            display: block;
            left: 0;
            right: 0;
            top: var(--title-top-before);
            margin: auto;
            position: absolute;
          }
        }
      }