cube-ui按钮配合toast单例模式应用

Posted 2020-11-30 lhl66

<template>
  <div>
    <cube-button icon="cubeic-right" @click="goNext">Button With Icon</cube-button>
  </div>
</template>

<script>
export default {
  methods:{
    goNext(){
      const toast = this.$createToast({
        txt: ‘Loading...‘, // 提示信息
        type: ‘correct‘, // type 字段决定了 Toast 的显示图标类型 txt纯文本常用
        time: 3000, // 显示时间长短
        maskClosable: true, // 点击蒙层是否隐藏
        mask: true // mask 设置为 true 时会显示遮罩
      })
      toast.show() // 实例方法(显示)
      setTimeout(() => {
        toast.hide() // 实例方法(隐藏)加setTimeout原有 + 1s
        console.log(11111) // 11111
      }, 2000)
    }
  }
}
</script>

<style>

</style>