vue基础学习笔记及应用
1. 基础知识
1.1 传参
参考代码:vue组件之间传值方式
1.1.1 父组件传到子组件
- 父组件:
<template>
<div class="parent">
<h2>{{ msg }}</h2>
<son psMsg="父传子的内容:叫爸爸"></son> <!-- 子组件绑定psMsg变量-->
</div>
</template>
<script>
import son from './Son' //引入子组件
export default {
name: 'HelloWorld',
data () {
return {
msg: '父组件',
}
},
components:{son},
}
</script>
- 子组件
<template>
<div class="son">
<p>{{ sonMsg }}</p>
<p>子组件接收到内容:{{ psMsg }}</p>
</div>
</template>
<script>
export default {
name: "son",
data(){
return {
sonMsg:'子组件',
}
},
props:['psMsg'],//接手psMsg值
}
</script>
1.1.2 router传参
vue路由传参的三种基本方式
主要使用了这种:(不会在url中显示具体参数)
this.$router.push(
{
path: '/file',
params: {
path: ...
}
}
)
在/file页面中获取参数:
this.$route.params.path
1.2 去掉网页路由的#井号
在router/index.js
中加入mode:'history'
const router = new Router({
mode: 'history', // 去掉#,需要路由模式改为history
routes: routes
})
1.3 axios同步请求
vue 中使用 async/await 将 axios 异步请求同步化处理
需求:
- 函数A:调用接口获得值
- 函数B:调用函数A获得值赋给echarts
涉及到两个部分的aysnc和await:
函数A:
async setChart () {
// echart初始化
var myChart = echarts.init(...)
myChart.showLoading()
var obj = Object
// 等待获得值完成后再将值传递给obj
await this.getJsonData().then(function (result) {
obj = result
})
...
}
函数B:
async getJsonData () {
let obj = {}
let response = await request({
method: 'post',
url: '/key/getKeyMap'
})
obj = response.data.data
...
return obj
}
2. 应用
2.1 网页权限控制
详见我的另一篇博文:【前端学习】Vue中的登录查看权限控制(token)
2.2 vue网页截图:Kscreenshot插件
参考代码:kscreenshot截图插件
可以很简单的应用:
安装kscreenshot:
npm install kscreenshot --save
具体代码:
import kscreenshot from 'kscreenshot'
export default {
data () {
return {
ocr_result: 'OCR识别结果',
// eslint-disable-next-line new-cap
KscreenShot: new kscreenshot(
{
key: 65,
toolShow: {
complete: true,
quit: true,
back: false,
arrow: false,
drawLine: false,
rect: false,
ellipse: false,
text: false,
color: false
},
endCB: this.endShot
}
)
}
},
methods: {
// 回调函数执行的是OCR识别的功能
endShot (e) {
let formData = new FormData()
// e里面是base64编码的图片
// 上传的话,要把开头的base64...去掉
formData.append('img', e.split(',')[1])
let result = ''
let _this = this
_this.loading = true
axios.post(
'/readPic',
formData,
{'Content-Type': 'application/x-www-form-urlencoded'}
).then(function (response) {
// 获得回传数据
})
}
}
}
3. ant-design-vue相关应用
3.1 select选择器mode=tag的校验
<a-form-item label="作者">
<a-select
mode="tags"
placeholder="输入作者,回车键添加下一个"
v-decorator="[
'author',
{
rules: [{
required: true,
message: '请添加作者',
}, {
validator: confirmAuthor
}],
},
]">
</a-select>
</a-form-item>
接下来在methods中添加confirmAuthor函数:
// 验证作者输入框的验证器
confirmAuthor (rule, value, callback) {
if (value.length > 10) {
// eslint-disable-next-line standard/no-callback-literal
callback('输入的作者数量不得超过10个')
return
}
for (var i = 0; i < value.length; i++) {
if (value[i].length < 2 || value[i].length > 20) {
// eslint-disable-next-line standard/no-callback-literal
callback('输入的作者姓名必须大于2个字符且小于20个字符')
return
}
}
callback()
},
不添加重复性验证的原因:tag模式的select自带对输入字符串重复性的检验
4. 插件踩坑
4.1 vue-pdf
4.1.1 TypeError: cannot read properties of undefined (reading ‘catch’)
参考链接:github上对于这个问题的解答
具体解决方法就是降低版本。
cnpm uninstall vue-pdf
然后再安装低版本的vue-pdf
cnpm install vue-pdf@4.0.7 --save