Vue2 dataV 使用initWH()解决因使用边框造成组件宽高异常的问题

Vue 2 中的 `data-v` 是自定义属性，通常用于 Vue.js 的模板中绑定数据和指令。当你遇到因为组件设置了边框 (`border`) 导致的实际宽高计算错误的问题，可以使用 `initWH()` 这样的方法来初始化组件的宽度和高度。这个函数可能会在组件的生命周期钩子 `mounted()` 或者 `created()` 中被调用，目的是在渲染完成之后动态获取去除边框后的实际尺寸，并将其设置为组件的样式。

例如：

export default {
  created() {
    this.initWH();
  },
  methods: {
    initWH() {
      const computedStyle = window.getComputedStyle(this.$el);
      const borderBoxWidth = parseInt(computedStyle.boxSizing) === 'border-box'
        ? parseFloat(computedStyle.width) - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight)
        : parseFloat(computedStyle.width);

      // 类似地，处理高度
      const borderWidth = parseFloat(computedStyle.borderTopWidth);
      this.realWidth = borderBoxWidth - borderWidth;
      this.realHeight = /* 同理处理高度 */;
    }
  },
};

这样，在组件渲染完成后，`this.realWidth` 和 `this.realHeight` 就会存储去除了边框后的准确大小。然后你可以直接将它们应用到组件的样式上，如 `style="width: {{ realWidth }}px; height: {{ realHeight }}px;"`。