前言

之前在使用js在Vue中用了toast,感觉挺简单的,但是使用TypeScript的时候发生了一些问题,正好总结一下toast的使用,以及如何在vuex中应用toast

TypeScript中使用toast

  1. 建立一个文件夹 toast
  2. 封装一个Toast组件(css略)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div class="toast" v-show="isShow">
    <div>{{message}}</div>
  </div>
</template>

<script lang='ts'>
import Vue from "vue";
import { Component } from "vue-property-decorator";

@Component
export default class Toast extends Vue {
  message: string = "";
  isShow: boolean = false;

  show(message: string, duration = 1500) {
    this.isShow = true;
    this.message = message;
    setTimeout(() => {
      this.isShow = false;
      this.message = "";
    }, duration);
  }
}
</script>

3.在index.ts中使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import Toast from './Toast.vue'

const obj = {} as any

obj.install = (Vue: any) => {
  // 1.创建一个组件构造器
  const toastConstructor = Vue.extend(Toast)
  // 2.new的方式,根据组件构造器,可以创建出来一个组件对象
  const toast = new toastConstructor()
  // 3.将组件对象,手动挂载到某一个元素上
  toast.$mount(document.createElement('div'))
  // 4.tost.$el对应的就是div(这样才真正的加到了界面上面)
  document.body.appendChild(toast.$el)
  Vue.prototype.$toast = toast
}

export default obj
  1. 在main.ts中安装toast
1
2
import toast from '@/components/common/toast'
Vue.use(toast)
  1. 这时在任意Vue组件中使用toast即可
1
this.$toast.show('这是一句提示',1000)
  1. 但是很不巧这里在TypeScript中会报错($toast提示没定义问题)解决方法:

    • 在shims-vue.d.ts中
    1
    2
    3
    4
    5
    6
    
    declare module 'vue/types/vue' {
      // 3. 声明为 Vue 补充的东西
      interface Vue {
        $toast: any
      }
    }
    
    • 这样等于告诉编辑器,你这个属性是有的
  2. 记一个踩过的坑,如何在vuex的store中更据不同的结果返回不同的toast

  • 首先在state中声明一个属性
1
2
3
state:{
 toastMessage:''
}
  • mutations中声明一个updateToastMessage的方法
1
2
3
4
5
6
mutations:{
    // toastMessage方法
    updateToastMessage(state, message) {
      state.toastMessage = message
    }
}
  • 当其他方法改变toast时,如
1
2
3
4
5
6
7
8
9
mutations:{
 createTag{
     if(true){
         store.commit('updateToastMessage',1)
     }else{
         store.commit('updateToastMessage',1)
     }
 }
}
  • 此时我们在组件中想要使用toast,可以:
1
2
    this.$store.commit("createTag", this.selectedTag);
    this.$toast.show(this.$store.state.toastMessage);