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 [email protected] --save