文章目录
Nginx
配置Vue等单页面程序刷新404
try_files $uri $uri/ /index.html;
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