vue 中修饰符的使用方法、JS与TS路由配置、vuex在 ts 中如何配置模块和分发器

1. vue 中常用的修饰符

1.1 表单修饰符

• .lazy¹
• .number¹
• .trim¹

在使用 .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²

<!-- .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 系统修饰符

• .ctrl³
• .alt³
• .shift³
• .meta³

<button @click.ctrl="handleEvent"></button>
<button @click.alt="handleEvent"></button>
<button @click.shift="handleEvent"></button>
<button @click.meta="handleEvent"></button>

1.6 鼠标修饰符

• .left⁴
• .right⁴
• .middle⁴

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 组件传参的基本用法

• vue-property-decorator⁵
• vue-router⁶

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⁷ 时，json文件引入失败。解决方法是在 tsconfig.json⁸ 中添加 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)

---

1. https://v2.cn.vuejs.org/v2/guide/forms.html#修饰符 ↩︎ ↩︎ ↩︎

2. https://v2.cn.vuejs.org/v2/guide/events.html#事件修饰符 ↩︎

3. https://v2.cn.vuejs.org/v2/guide/events.html#系统修饰键 ↩︎ ↩︎ ↩︎ ↩︎

4. https://v2.cn.vuejs.org/v2/guide/events.html#鼠标按钮修饰符 ↩︎ ↩︎ ↩︎

5. https://www.npmjs.com/package/vue-property-decorator ↩︎

6. https://www.npmjs.com/package/vue-router ↩︎

7. https://www.npmjs.com/package/echarts ↩︎

8. https://www.tslang.cn/docs/handbook/tsconfig-json.html ↩︎