一、常用methods
1、三级联动
getPcd () {
getPcdApi({ id: 1 }).then(res => {
this.province = res.data.data // console.log(this.province)
})
},
getCity (id) {
let obj = {}
obj = this.province.find((item) => {
return item.id === id
})
this.provinceId = obj.id
getPcdApi({ id: this.provinceId }).then(res => {
this.city = res.data.data // console.log(this.city)
})
},
getDistrict (id) {
let obj2 = {}
obj2 = this.city.find((item) => { r
eturn item.id === id
})
this.cityId = obj2.id
getPcdApi({ id: this.cityId }).then(res => {
this.district = res.data.data // console.log(this.district)
})
}
需要设置watch 监听 ---实现重新选择省时候，清空市和区
watch: {
provinceId(oldVal, newVal) {
this.cityId = ''
},
cityId(oldVal, newVal) {
this.districtId = ''
} }
2、vue+axios 实现进度条
image.png
3、vue常用语法
（1）返回上一页
this.$router.go(-1)
（2） ref
<div class="error500" ref="error500"> // 组件中像类名一样使用
this.$refs.error500 // js中
this.$refs.驼峰命名.style.属性名 = "属性值"; // 更改属性值
（3）监听对象中的某一属性
image.png
（4）router-link标签不能换行
4、vue-router
（1）this.$route.params 刷新时值丢失
解决：路由路径中加上 /:参数名
image.png
5、vuex
（1）从vuex中取的数据，不能直接更改
需要浅拷贝对象之后更改，否则报错；
getTalkGroupInfo (id) {
this.talkGroupInfo = this.$store.state.talkGroup
let newObj = Object.assign({}, this.modifyId) this.modifyInfo = newObj
}
（2）vuex中的数据在页面刷新后数据消失
用sessionstorage 或者 localstorage 存储数据
存储： sessionStorage.setItem('名',值)
使用： sessionStorage.getItem('名') ---得到的值为字符串类型，强制类型转换不生效--用字符串截取方式去掉引号；
6、父子组件
（1）父组件调用子组件方法
1.给子组件起个ref="son";
2.父组件中: @方法名="方法名"
方法(){
this.$ref.son.子组件中方法名();
}
7、阻止苹果手机默认滚动行为
mounted () {
document.body.addEventListener('touchmove', function (e) {
e.preventDefault() // 阻止默认的下拉滑动的效果
}, { passive: false }) // 兼容ios和android
}
8、vue中获取屏幕高度
mounted () {
let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
this.$refs.error500.style.height = h + 'px'
}
9、按回车键搜索
keyCode (e) {
if (e.keyCode === 13) {
this.nameSearch()
}
}
10、图片占位图
1.引入图片：
import defaultHeader from '@/common/image/logo/bg_header.png'
2.data中定义图片：
defaultHeader: defaultHeader
3.html中：
<img :src="scope.row.card_logo || defaultHeader"
二、接口
1、常见状态码
404：路径错误
401：参数格式不正确
422：和后端参数对不上
postman按本地代码全部添加，测试是否是后台问题；
浏览器中查看控制台中network--response
三、疑难杂症
1、vue 中 @mouseenter不生效
改用 @mouseenter.native
2、el-radio-group 嵌套el-input中：不能按左右键移动光标
按左键报错，按右键变成切换radio：
解决：阻止事件冒泡；onkeyup不管用；只能用onkeydown；
image.png
image.png
3、vue 项目启动时报错：TypeError: Cannot destructure property compile of 'undefined' or 'null'.
原因： webpack-dev-server 版本过高 ；
解决：
npm install -D webpack-dev-server@3.0.0
4、vue中父组件prop传值给子组件，子组件接收不到
瑞斯后台 添加语法游戏 相同题型模板 选择题题干，prop传值给子组件，子组件接收不到,随便在子组件created中打印或者注释掉一行console.log就会接受到传来的值；
原因：未知……
解决：
image.png
5、yarn安装axios报错
用npm重装;(检查axios包是否安装成功,看package-json);
四、elementUI
1、修改默认样式
改变默认样式需要把scope去掉 最好给修改的模块加上类名，不然会影响其他页面的样式；
或者：
image.png
2、elmentui 表单验证
不生效时要使prop和v-model的值一致
image.png
image.png
3、elementui表格超出部分省略加悬浮提示
<el-table-column prop="content" label="话术内容" :show-overflow-tooltip="true"> </el-table-column>
4、elementui分页
<el-pagination background layout="prev, pager, next" :current-page.sync = "page" @current-change="currentchange"//该方法传参 打印参数为所点击的页数 :total="total" //共计有多少条信息 :page-size=per_page> //每页显示多少条信息 </el-pagination>
image.png
currentchange (val) {
getTalkContentApi({
group_id: this.groupidF, //所在分组的id
page: val,//当前页码
per_page: this.per_page //每页显示多少条数据
}).then(res => {
this.total = res.data.data.total
this.talkContentList = res.data.data.data //渲染返回的数据
})
}
分组一的内容在第三页的时候，点击分组二，分组二的内容直接从第三页开始：
1.给点击分组调用获取内容的函数 第一步加入 this.page = 1
2.给分页绑定:current-page.sync = "page"属性；
3.在current-change方法 第一步 加入 this.page = val
5、this.$message()
----返回的是后台接口给的数据；
6、tabel
渲染时prop会把数组的每一项直接拼接在一起渲染出来。给得到的数组添加分隔符渲染：把默认的prop删掉，改写成如下代码
<template slot-scope="scope"><span>{{scope.row.department_name.join('，')}}</span></template>
7、el-progress
默认上传较大文件时，百分比会显示很多位小数：添加过滤器
// 保留整数并返回number类型（否则报错prop类型错误）
Vue.filter('integer', value => Number(value).toFixed(0) - 0);
8、自动打开折叠面板
image.png
image.png
五、css、css3
1、C3新方法
width calc(100% - 350px)
2、C3动画
@-webkit-keyframes box{
0%{ transform:translateY(0px); }
50%{ transform:translateY(-10px); }
100%{ transform:translateY(0px);}
}
.xc_box:hover .box{
-webkit-animation:box 2s 1 ease-out;
}
3、css常用属性
（1）input 输入长度限制: maxlength="7"
（2）字母默认不会换行：给字母设置 word-wrap:break-word ;
（3）禁止文本域textarea可拖拽的方法：<textarea style="resize:none;"></textarea>
六、刷新页面的三种方法
1、location. reload() / this.$router.go(0)
相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好
2、先跳到空白页面，再跳回原页面
（1）新建一个空白页面 reload.vue：
image.png
（2）需要刷新的页面，先跳转到reload.vue，再跳转回原页面，从而实现刷新（路径上带param的不能用）：
image.png
3、provide/inject组合（最优）
（1）App.vue添加provide，和data一样，返回一个对象：
image.png
（2）需要刷新的页面内注入inject依赖：
image.png
七、视图层不更新
1、数组后随便增加一项再删除
this.showFileList.push(1);
this.showFileList.pop();
2、扩展运算符
this.showFileList = [...this.showFileList];
3、复制一个新数组/对象
（只更改了地址，值不变，所以不触发更新）
4、this.$set
vue2.0 给data对象新增属性，并触发视图更新
如下代码，给 student对象新增 age 属性
data () {
return {
student: {
name: '',
sex: ''
}
}
}
众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新
eg:
mounted () { this.student.age = 24 }
原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
解决：使用$set()方法，既可以新增属性,又可以触发视图更新。
错误写法：this.$set(key,value)（ps: 可能是vue1.0的写法）
mounted () { this.$set(this.student.age, 24) }
正确写法：this.$set(obj,'key','value')
mounted () { this.$set(this.student,'age', 24) }
八、git
1、gitlab git pull报错：fatal: refusing to merge unrelated histories
解决：因为他们是两个不同的项目，要把两个不同的项目合并，git需要添加一句代码，在git pull，
这句代码是在git 2.9.2版本发生的，最新的版本需要添加--allow-unrelated-histories
git pull origin dev --allow-unrelated-histories
(执行这行命令之后，所有文件都提示需要解决冲突，包括没有变更的文件……)
九、webpack
1、隐藏生产环境debugger和console.log
（false：输入；true：隐藏）
image.png
网友评论