其他自定义代码片段
1. 滚动条自动滚到最底部
如何让滚动条自动滚到最底部-php教程-PHP中文网
2. vue3使用i18n国际化
https://www.cnblogs.com/huihuihero/p/16717484.html
Vue3 如何使用多语言 vue-i18n - 简书
vue3中如何使用vue-i18n实现多语言切换 - 芦苇派
vue3中使用vue-i18n(ts中使用$t, vue3不用this)_vue3使用i18n_一只爱吃糖的小羊的博客-CSDN博客
3. ant design vue 再次确认密码
validatePassTwo(rule, value, callback) {
const that = this;
if (
that.newForm.getFieldValue("password") ===
that.newForm.getFieldValue("oldPassword")
) {
this.newForm.setFields({
'password':{
'errors':null,
'value':that.newForm.getFieldValue("password")
},
'oldPassword':{
'errors':null,
'value':that.newForm.getFieldValue("oldPassword")
}
})
callback();
} else {
if (rule.field === "oldPassword") {
if (value !== that.newForm.getFieldValue("password"))
callback(new Error("原密码与新密码不一致"));
} else if (rule.field === "password") {
if (value !== that.newForm.getFieldValue("oldPassword"))
callback(new Error("原密码与新密码不一致"));
}
}
},
其中
this.newForm.setFields({
'password':{
'errors':null,
'value':that.newForm.getFieldValue("password")
},
'oldPassword':{
'errors':null,
'value':that.newForm.getFieldValue("oldPassword")
}
})
可以设置field的值 ，把errors改为null就可以手动清除验证报错的信息
4. vite项目获取静态资源的公共方法
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题_vue3引入图片_Young丶的博客-CSDN博客
// 获取静态资源
export const getAssets = (url:String) => {
return new URL(`../assets/${url}`,import.meta.url).href
// 必须是相对路径 否则无法显示
}
5. 监听页面是否发生修改
可以用 beforeRouteLeave 和 updated 来判断。export default {
name: 'supplier',
components:{cmtWrap,cmtContent},
props: [],
beforeRouteLeave (to, from, next) {//离开当前页if(this.updateCount > 1){ //更新次数大于1 说明用户修改过当前页数据 因为获取详情时会更新一次if(from.path.includes('nowPath')){
this.$confirm('即将离开当前页，请确定是否保存当前数据？', '离开当前页', {
confirmButtonText: '保存',
cancelButtonText: '不保存',
type: 'warning'
}).then(() => {
//...todo 这里调接口 保存数据
next()
}).catch(() => {next()});
}else{next()}
}else{
next()
}
},
updated:function () {
this.updateCount = this.updateCount + 1
},
data() {
return {
updateCount:0,//判断用户是否更新当前数据 }
},
computed:{},
watch:{},
mounted:function () {
this.getInitData()
},
methods: {
getInitData:function(){
//...todo 页面进来，先获取默认数据
}
},
}
6. 动态缓存组件切换时不能更新的解决办法
1. 第一种方法
在keep-alive中，有两个生命周期钩子函数，分别是activated()和deactivated()。我们可以使用activated()，在组件激活的时候会被调用，每次进入页面的时候，都会执行，在这个里面进行数据的请求，用来替代mounted。所以，只要将mounted替换为activated就可以解决问题了。
2. 第二种方法
我们可以在keep-alive中，加上一个属性exclude，属性的值就是组件的name，因为exclude是可以取消被keep-alive缓存的组件。代码示例如下：
<keep-alive exclude="detail">
<router-view/>
</keep-alive>
7. 父盒子旋转子盒子不旋转的实现方法
中心思想：双重旋转互相抵消（即父盒子如果香油旋转，那么子盒子只需要向左旋转，这样子盒子就不会随着父盒子一起旋转）
旋转动画：
@keyframes rotateRight {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
@keyframes rotateLeft {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(-360deg);
}
}
.basic-left-pepole-count {
animation: rotateRight 3s linear infinite;
div {
animation: rotateLeft 3s linear infinite;
}
}
参考内容：css实现只旋转边框，内含文字不转动_css旋转内容不旋转_白抹灰的博客-CSDN博客
8. 后端返回文件流前端展示
前端实现在线预览pdf、word、xls、ppt等文件_PrinciplesMan的博客-CSDN博客_前端在线预览pdf
https://blog.csdn.net/weixin_48400717/article/details/126382218
前端处理blob文件流_wzp6010625的博客-CSDN博客
URL.createObjectURL()的使用方法_RawMarin的博客-CSDN博客
前端预览pdf文件流_这个柚子有点酸~的博客-CSDN博客
核心是转成blob对象，生成url去访问
9. base64转blob对象
base64ToBlob (code) { code = code.replace(/[\n\r]/g, ''); var raw = window.atob(code); var rawLength = raw.length; var uint8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; i++) { uint8Array[i] = raw.charCodeAt(i); } return new Blob([uint8Array], {type: 'application/pdf;charset-UTF-8'}) }, viewPdf (content) { if (!content) { this.$message.error('暂无内容') return } const blob = this.base64ToBlob(content) this.fileURL = URL.createObjectURL(blob); }