科技感网站模板,旅游 网站建设目标,查看百度关键词价格,计算机网站开发的目的vue2.x
事件修饰符
button click.stop.selfhandleDelete(item)/button在使用 $confirm 时#xff0c;使用 await 方式时#xff0c;需要添加 catch 回调#xff0c;否则无法获取 $confirm 关闭和取消时的标识值#xff0c;并且后续代码停止执…vue2.x
事件修饰符
button click.stop.selfhandleDelete(item)/button在使用 $confirm 时使用 await 方式时需要添加 catch 回调否则无法获取 $confirm 关闭和取消时的标识值并且后续代码停止执行。如下
const action await this.$confirm(文件删除后无法恢复是否删除, 删除提示).catch(s s)// action confirm 确认删除
// action cancel 取消删除
// action close 关闭提示框JSVue-router
在当前路由界面调用 this.$router.push 访问当前页面报错问题解决方法如下
const originPush Vue.prototype.push
Vue.prototype.push function(data) {return originPush.call(data).catch(err err)
}TSVue 参考博客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/onecomponent({ // 相当于 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)}
}TSVue-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) }
}TSvuex
// /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 ../indextype 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)
