记录一些容易遗忘的东西

Vue2.x

native、sync 修饰符

• native ：在对子组件使用 @click 的时候若不使用该修饰符，那么就不能执行点击事件，会被判断为子向父组件传的值
• sync ： 类似于 v-model 的响应式修饰符，在 父向子、子向父 传值的时候，若父更改，子能接收，子用 props 接收，从理论上来说，不能直接更改 props 的值，但是添加了 sync 之后，可以这样操作

this.$nextTick

• 在进行图表渲染的时候，使用了v-if或者父元素原本的CSS中带有 display: none 的渲染出来的图表是由 100px 这个原因可以使用 this.$nextTick 解决

自定义指令

v-draggable（可拖动指令）

• 调用的时候，导入并且注册然后放在要使用的标签即可
• 注意：使用的时候

export default {
  /**
   * 为元素绑定拖拽功能
   * @param {HTMLElement} el - 需要绑定拖拽功能的元素
   * @param {Object} binding - 绑定的对象，包含vnode等信息
   * @param {Object} vnode - 虚拟DOM节点
   * @usage
   * 在Vue组件模板中使用该指令：
   * ```html
   * <div v-draggable></div>
   * ```
   * 需要有一个父元素包裹需要拖拽的元素（元素类名需包含 Header或header），并给父元素添加`v-draggable`指令。
   * ```html
   * <div v-draggable>
   *  <div class='header'></div>
   * </div>
   * ```
   *
   * 注意：此示例中的`v-draggable`为指令名称，具体名称需与你的指令注册名称一致。
   */
  bind(el, binding, vnode) {
    /**
     * 在给定元素及其子元素中查找具有特定类名的元素
     * @param {HTMLElement} element - 开始查找的元素
     * @returns {string|null} - 找到的第一个匹配的类名，如果没有找到则返回null
     */
    function findHeaderClass(element) {
      const regex = /header/i;

      // 检查当前元素的类名是否匹配
      if (element.classList && Array.from(element.classList).some(className => regex.test(className))) {
        return Array.from(element.classList).find(className => regex.test(className));
      }

      // 递归检查子元素
      for (let i = 0; i < element.children.length; i++) {
        const foundClass = findHeaderClass(element.children[i]);
        if (foundClass) {
          return foundClass;
        }
      }

      return null;
    }

    // 查找对话框头部元素，并为其添加可拖拽样式
    const dialogHeaderEl = el.querySelector(`.${findHeaderClass(el)}`);
    dialogHeaderEl.style.cssText += ";cursor:move;";
    const dragDom = el.querySelector("." + dialogHeaderEl.parentNode.className);
    dragDom.style.cssText += ";top:0px;";

    /**
     * 兼容性处理，获取元素的样式属性
     * @returns {Function} - 返回一个函数，该函数接受DOM元素和属性名，并返回属性值
     */
    const getStyle = (function () {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr];
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr];
      }
    })();

    // 鼠标按下时的处理逻辑，用于开启拖拽
    dialogHeaderEl.onmousedown = (e) => {
      console.log(dialogHeaderEl.parentNode.className, binding, vnode);
      // 计算鼠标按下时元素相对于屏幕的位置
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;

      // 获取拖拽元素的尺寸和屏幕尺寸
      const dragDomWidth = dragDom.offsetWidth;
      const dragDomheight = dragDom.offsetHeight;
      const screenWidth = document.body.clientWidth;
      const screenHeight = document.body.clientHeight;

      // 计算拖拽元素的边界
      const minDragDomLeft = dragDom.offsetLeft;
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
      const minDragDomTop = dragDom.offsetTop;
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;

      // 处理元素位置为百分比的情况
      let styL = getStyle(dragDom, "left");
      let styT = getStyle(dragDom, "top");
      if (styL.includes("%")) {
        styL = +document.body.clientWidth * (+styL.replace(/%/g, "") / 100);
        styT = +document.body.clientHeight * (+styT.replace(/%/g, "") / 100);
      } else {
        styL = +styL.replace(/\px/g, "");
        styT = +styT.replace(/\px/g, "");
      }

      // 鼠标移动时的处理逻辑，用于更新元素位置
      document.onmousemove = function (e) {
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        // 应用边界限制
        // if (-left > minDragDomLeft) {
        //   left = -minDragDomLeft;
        // } else if (left > maxDragDomLeft) {
        //   left = maxDragDomLeft;
        // }

        // if (-top > minDragDomTop) {
        //   top = -minDragDomTop;
        // } else if (top > maxDragDomTop) {
        //   top = maxDragDomTop;
        // }

        // 更新元素位置
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;

        // 触发拖拽事件
        vnode.child.$emit("draggable");
      };

      // 鼠标抬起时的处理逻辑，用于清理事件监听
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },


};

Echarts

echarts.clear()

在进行数据更新或筛选的时候，利用 select 选择器来进行筛选之类的，可使用 this.$Echarts.clear() 来让 echarts 重新渲染

boundaryGap

x轴与图像两边的距离防止图像遮罩y轴 boundaryGap: ['2%', '2%'],

AntDesign1.x

国际化配置

Vue2使用 AntDesign 的时候进行国际化配置时的方法：
控制台报错是因为 a-locale-provider 已经被舍弃 从 AntDesign2.x 开始使用另一套

<template>
  <div id="app">
    <a-locale-provider :locale="zhCN">
      <router-view/>
    </a-locale-provider>
  </div>
</template>
<script>
  import zhCN from 'ant-design-vue/es/locale-provider/zh_CN';
  export default {
    data(){
      return {
        zhCN,
      }
    }
  }
</script>

AntDesign日期控件

借用moment.js来操控可选时间周期

<template>
	<div>
		<a-date-picker class="ant-calendar-picker" v-model="daterangeUDate[0]" :disabled-date="disabledStartUDate" show-time format="YYYY-MM-DD" placeholder="开始日期" @openChange="handleStartOpenChange" />
		<a-date-picker class="ant-calendar-picker" v-model="daterangeUDate[1]" :disabled-date="disabledEndUDate" show-time format="YYYY-MM-DD" placeholder="结束日期" :open="uDaterangeEndOpen" @openChange="handleEndOpenChange" />
	</div>
</template>

<script>
export default{
	data(){
		return{
	      // 分级时间范围
	      daterangeUDate: [moment('2024-04-10').subtract(1, 'day'), moment('2024-04-10').subtract(1, 'day')],
	      // daterangeUDate: ['2024-04-10', '2024-04-10'],
	      // 第二个日期选择器的开关
	      uDaterangeEndOpen: false,
	      // 详情页时间范围
	      daterangeDetail: [],
	      // 第二个日期选择器的开关
	      detailDaterangeEndOpen: false,
		}
	},
	methods:{
	    // uDate的开始框的不允许选择时间
	    disabledStartUDate(startValue) {
	      return startValue.valueOf() < this.moment('2023-11-01').valueOf() || startValue.valueOf() > this.moment().valueOf()
	    },
	    // uDate的结束框的不允许选择时间
	    disabledEndUDate(endValue) {
	      let startValue
	      if (this.open) {
	        startValue = this.daterangeDetail[0]
	      } else {
	        startValue = this.daterangeUDate[0]
	      }
	      if (!endValue || !startValue) {
	        return false
	      }
	      return startValue.valueOf() > endValue.valueOf() || endValue.valueOf() > this.moment().valueOf()
	    },
	}
}
</script>

GoView

@type/node 安装报错

因为 pnpm-lock 文件锁了下载路径

# 全局替换
registry. npm.taobao.org
# 替换为
registry.npmmirror.com

VIte

图片路径

图片记载不成功使用：

const localCover = new URL('@/assets/global_cover.jpg', import.meta.url).href