前言

之前在使用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);