文章目录
1. vue 中常用的修饰符
1.1 表单修饰符
在使用 .number
时 输入字符 e
则字符 e
转化转化为数字类型失败,原因时 e
被识别为科学计数法中的符号 e
,如 9.99999999e+21
<input v-model.lazy="msg" type="text">
<input v-model.number="age" type="number">
<input v-model.trim="msg" type="text">
1.2 组件修饰符
.trim
2
<!-- .sync 修饰符 -->
<text-document v-bind:title.sync="doc.title"></text-document>
1.3 事件修饰符
.stop
:阻止单击事件继续传播.prevent
:提交事件不再重载页面.capture
:内部元素触发的事件先在此处理,然后才交由内部元素进行处理.self
:当前元素自身时触发处理函数.once
:点击事件将只会触发一次.passive
:滚动事件的默认行为 (即滚动行为) 将会立即触发
<button @click.stop="handleEvent"></button>
<button @click.prevent="handleEvent"></button>
<button @click.capture="handleEvent"></button>
<button @click.self="handleEvent"></button>
<button @click.once="handleEvent"></button>
<button @click.passive="handleEvent"></button>
1.4 按键修饰符
.keyup.enter
.keyup.page-down
.keyup.tab
.keyup.delete
.keyup.esc
.keyup.space
.keyup.up
.keyup.down
.keyup.left
.keyup.right
.keyup.13
<button @keyup.enter="handleEvent"></button>
<button @keyup.page-down="handleEvent"></button>
<button @keyup.tab="handleEvent"></button>
<button @keyup.delete="handleEvent"></button>
<button @keyup.esc="handleEvent"></button>
<button @keyup.space="handleEvent"></button>
<button @keyup.up="handleEvent"></button>
<button @keyup.down="handleEvent"></button>
<button @keyup.left="handleEvent"></button>
<button @keyup.right="handleEvent"></button>
<button @keyup.13="handleEvent"></button>
1.5 系统修饰符
<button @click.ctrl="handleEvent"></button>
<button @click.alt="handleEvent"></button>
<button @click.shift="handleEvent"></button>
<button @click.meta="handleEvent"></button>
1.6 鼠标修饰符
1.7 自定义按键修饰符
Vue.config.keyCodes.f1 = 112
<button @keyup.keyCodes.f1="handleEvent"></button>
在使用 $confirm
时,使用 await
方式时,需要添加 catch 回调,否则无法获取 $confirm 关闭和取消时的标识值,并且后续代码停止执行。如下:
const action = await this.$confirm('文件删除后无法恢复,是否删除?', '删除提示').catch(s => s)
// action === 'confirm' 确认删除
// action === 'cancel' 取消删除
// action === 'close' 关闭提示框
2. vue-router 在 js 中 访问当前页面报错问题
在当前路由界面调用 this.$router.push
访问当前页面报错问题解决方法如下:
const originPush = Vue.prototype.push
Vue.prototype.push = function(data) {
return originPush.call(data).catch(err => err)
}
3. 在 vue 中使用 ts 组件传参的基本用法
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { Route, NavigationGuardNext } from 'vue-fouter'
import Header from '@/components/Header'
import User from '@/types/one'
@component({ // 相当于 components: { Header }
components: {
Header
}
})
export default class Home extends Vue {
// 相当于 props: { msg: '' }
@Prop private msg!: string;
// 相当于 { props: { title: { type: string, default: '标题' }, required: false } }
@Prop({ type: string, default: '标题' }) readonly title?:string
// 相当于 { props: { author: { type: Object, default: { name: '-', age: '-' }, required: true } } }
@Prop({ type: Object, default: () => ({ name: '-', age: '-' }) }) readonly author!: User
// 相当于 data() { message: 'hello world!' }
message: string = 'hello world!';
// 相当于 computed: { messageInfo() { return this.msg + this.message } }
get messageInfo() {
return this.msg + this.message
}
// 相当于 watch: { '$route': { handler: (val, oldVal) { console.log('$router watch', val, oldVal) }, immediate: true } }
@Watch('$route', { immediate: true }) changeRouter(val: Route, oldVal: Route) {
console.log('$router watch', val, oldVal)
}
// 相当于 computed: { headerRef: { cache: false, get() { return this.$refs.header as Header } } }
@Ref('header') readonly headerRef!: Header
created() {}
// 相当于 methods: { handleSubmit() { console.log('handleSubmit') } }
handleSubmit() {
console.log('handleSubmit')
}
}
4. vue-router 在 ts 中访问当前页面报错问题
在当前路由界面调用 this.$router.push
访问当前页面报错问题解决方法如下:
const originPush = Vue.prototype.push
Vue.prototype.push = function (data: any) {
try {
return originPush.call(data)?.catch(err: any => err)
} catch (error: any) {
return Promise.reject(error)
}
}
5. 在 vuex 中使用 ts 模块和分发器的基本配置
// @/store/index.ts
import { Vuex } from 'vuex'
const store = new Vuex.Store<{}>({})
export default store
// @/store/modules/user.ts
import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators'
import store from '../index'
type MenuItem = {
menuName: string,
menuId: number,
parentId: number,
url: string,
sysUrl: string
}
type UserState = {
menu: MenuItem[]
}
const menu: MenuItem[] = [
{ menuId: 1, parentId: 0, url: '/home', sysUrl: '/home', menuName: '首页' }
]
@Module({ dynamic: true, store, name: 'user', namespaced: true })
class UserModule extends VuexModule implements UserState {
menu: MenuItem[] = []
@Mutation
private _setMenu(data: MenuItem[]) {
this.menu = data
}
@Action
async login() {
return new Promise((resolve, reject) => {
resolve({ obj: { data: { menu: [] } } })
})
}
}
export default getModule(UserModule)
6. 在 vue 中 使用 ts 配置 echarts 图形化插件
在 vue2.x + ts 中引入 echarts
7 时,json
文件引入失败。解决方法是在 tsconfig.json
8 中添加 resolveJsonModule: true
, 注意:这个属性要放在paths
属性之前,否则无效。
import jiangsu from '@/assets/map/jiangsu.json'
{ "resolveJsonModule": true }
在 vue2.x + ts 中引入 echarts
时, 引入的 .json
文件无法识别类型,解决方法是使用 jiangsu as any
可以解决问题。
import jiangsu from '@/assets/map/jiangsu.json'
import * as echarts from 'echarts'
echarts.registerMap('jiangsu', jiangsu as any)
https://v2.cn.vuejs.org/v2/guide/events.html#事件修饰符 ↩︎
https://v2.cn.vuejs.org/v2/guide/events.html#系统修饰键 ↩︎ ↩︎ ↩︎ ↩︎
https://v2.cn.vuejs.org/v2/guide/events.html#鼠标按钮修饰符 ↩︎ ↩︎ ↩︎
https://www.npmjs.com/package/vue-property-decorator ↩︎
https://www.npmjs.com/package/vue-router ↩︎
https://www.npmjs.com/package/echarts ↩︎
https://www.tslang.cn/docs/handbook/tsconfig-json.html ↩︎