目录
1、绑定多个class
单个类名绑定,如下,变量为c,如果变量c的值为class_c,那么渲染后类名为 class_c
如下:
:class='c'
变量为bool_,表示 设置类 aaa, bbb, ccc是否设置取决于变量bool_
如下:
:class=['aaa bbb',{ccc:bool_}]
另外一种方式
ccc为变量,例如ccc的值为’class_c’,那么渲染之后此处有三个类名,分别为aaa,bbb,class_c
如下:
:class=['aaa bbb',ccc]
2、html中的img引用assets下面的图片
这种情况下不能直接引用到资源的url
一种方法是在vue的data中定义一个变量,比如 img_src,给他赋值为如下,然后再img标签中绑定src属性
如下:
变量赋值
img_src:require('@/assets/a.png')
绑定src属性
<img :src='img_src'>
另一种方法是把图片放在与index.html同级的目录中,比如/static/img下面,那么引用就可以正常引用了,
如下:
<img src='/static/img/a.png'>
3.绑定事件@click
4.绑定style
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
其他的没有再data中定义的值,设置在js对象中也不起作用,所以无关的其他样式尽量不要再这里操作,直接定义再css文件中
例如下面方式,后面添加的fontSize属性是不会被渲染出来的,直接报错
<div v-bind:style="{ color: activeColor, fontSize: '30px' }"></div>
data: {
activeColor: 'red',
}
//会报错
4. Loading chunk 0 failed 报错
大部分情况下是缓存问题,项目关闭,重新启动运行一班就好了,
还有一种情况如下:
懒加载导致的问题,解决方法:
在根目录下面新建配置文件vue.config.js,内容输入为:
module.exports = {
publicPath: '/',
}
然后保存,运行 npm run build,不管是否成功,重新启动就可以了
5.build报错:Error: CSS minification error: postcss-svgo: Error in parsing SVG: Unquoted attribute value, 原因:mui.css中svg不能识别
svg标签不能识别导致的,整个项目中搜索svg关键词,发现除了引入svg图片外还有一个地方,是mui.css中的一个style如下:
svg:not(:root)
{
overflow: hidden;
}
看起来这个样式没有任何毛病,但编辑就是通不过,直接注释掉,然后通过了,而且这个样式是禁止svg溢出显示的,无所谓了
过了一段时间发现又不行了
发现里面用到svg的图片
style如下:
.mui-spinner:after {
display: block;
width: 100%;
height: 100%;
content: '';
background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%236c6c6c\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>');
background-repeat: no-repeat;
background-position: 50%;
background-size: 100%;
}
.mui-spinner-white:after {
background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%23fff\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>');
}
这段代码是用来做带进度的按钮的,就是按钮上有一个小圈圈的,反正项目中不用,也一并删除掉,
总算解决了
6.vue跳转页面后到页面底部,而不是到顶部
解决方法:
1.再app.vue中,给app标签添加ref属性
<div id="app" ref="app">
2.在watch中监听router改变完成之后,让页面滚动到最上方
watch:{
$route(){
this.$refs.app.scrollTo(0,0);
}
}
也用了其他办法,各种强制滚动到顶部的方法都试过了,就这个管用,引用自下方链接,非原创
https://blog.csdn.net/yuanqi3131/article/details/106856117?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai
7.vue主页面禁止回退按钮
在App.vue中,监听$route的变化,当到达我们指定的’/home/home’ 页面时,写禁止回退的代码,而到达其他页面时移除这个监听事件
watch: {
$route() {
if (this.$route.path == '/home/home') {
chage_sta();//需要调用一下这个方法,否则有时候不管用哦
//指定页面监听popstate事件(回退事件)
window.addEventListener('popstate', this.chage_sta);
} else {//其他页面时记得移除监听事件,否则其他页面也不能回退
window.removeEventListener('popstate', this.chage_sta);
}
}
},
methods: {
chage_sta() {
//监听到回退事件时,显示当前页面,并且不刷新
history.pushState(null, null, document.URL);
}
}
8.touch-action属性
如果设置成none,页面将不能响应触摸事件
9.mui主页返回键退出问题
比较好的实现方式为主页监听返回键,退出应用,代码如下
mui.back = function() {
var btn = ["确定", "取消"];
mui.confirm('确认关闭当前应用?', '提示', btn, function(e) {
if (e.index == 0) {
plus.runtime.quit();
}
});
}
其他页面监听返回键,正常后退一步(如其他页面不重写mui.back,那么所有页面都会提示关闭应用),代码如下:
mui.back = function() {
window.history.go(-1);
}