Gvui

Toast

Toast

预览

上方弹出 中间弹出 下方弹出

代码

<style>
  .gulu-toast {
    z-index: 30;
  }
</style>
<g-button @click="$toast('点击弹出提示')">上方弹出</g-button>
<g-button @click="$toast('点击弹出提示', {position:'middle'})">中间弹出</g-button>
<g-button @click="$toast('点击弹出提示', {position:'bottom'})">下方弹出</g-button>

设置关闭按钮

预览

上方弹出

代码

<style>
  .gulu-toast {
    z-index: 30;
  }
</style>
 <div>
  <g-button @click="onClickButton">上方弹出</g-button>
</div>
 methods: {
  onClickButton () {
    this.$toast('你知道我在等你吗？', {
      closeButton: {
        text: '知道了',
        callback: () => {
          console.log('他说知道了')
        }
      }
    })
  }
},

支持 HTML

预览

中间弹出

代码

<style>
  .gulu-toast {
    z-index: 30;
  }
</style>
 <div>
  <g-button @click="onClickButton">中间弹出</g-button>
</div>
 methods: {
  onClickButton () {
    this.$toast('<strong style="color:red;">加粗的提示</strong>', {
      enableHtml: true
    })
  }
},

← Tabs →