vue2.x
事件修飾符
<button @click.stop.self="handleDelete(item)"></button>
在使用 $confirm 時，使用 await 方式時，需要添加 catch 回調，否則無法獲取 $confirm 關閉和取消時的標識值，并且后續代碼停止執行。如下：
const action = await this.$confirm('文件刪除后無法恢復，是否刪除？', '刪除提示').catch(s => s)// action === 'confirm' 確認刪除
// action === 'cancel' 取消刪除
// action === 'close' 關閉提示框
JS+Vue-router
在當前路由界面調用 this.$router.push 訪問當前頁面報錯問題解決方法如下：
const originPush = Vue.prototype.push
Vue.prototype.push = function(data) {return originPush.call(data).catch(err => err)
}
TS+Vue
參考博客：https://juejin.cn/post/6876020863683002382
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!: Headercreated() {}// 相當于 methods: { handleSubmit() { console.log('handleSubmit') } }handleSubmit() {console.log('handleSubmit')}
}
TS+Vue-router
在當前路由界面調用 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) }
}
TS+vuex
// @/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[] = []@Mutationprivate _setMenu(data: MenuItem[]) {this.menu = data}@Actionasync login() {return new Promise((resolve, reject) => {resolve({ obj: { data: { menu: [] } } })})}
}export default getModule(UserModule)
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)
