Bue UI

Toast

设置弹出位置

预览

代码

<b-popover>
  <b-button>上方弹出</b-button>
  <template slot="content">弹出内容</template>
</b-popover>
<b-popover position="bottom">
  <b-button>下方弹出</b-button>
  <template slot="content">弹出内容</template>
</b-popover>
<b-popover position="left">
  <b-button>左边弹出</b-button>
  <template slot="content">弹出内容</template>
</b-popover>
<b-popover position="right">
  <b-button>右边弹出</b-button>
  <template slot="content">弹出内容</template>
</b-popover>

设置回调函数

预览

代码

<b-button @click="onClickButton">上方弹出</b-button>

methods:{
  onClickButton(){
    this.$toast('这里设置 bue-toast 内容',{
      closeButton:{
        text:'关闭 toast',
        callback:()=>{
          alert('关闭后执行回调函数');
        }
      }
    })
  }
}

支持 HTML

预览

代码

<b-button @click="onClickButton">上方弹出</b-button>

methods: {
  onClickButton() {
    this.$toast('<strong style="color:red;">加粗的提示</strong>', {
      enableHtml: true
    });
  }
}

← Collapse →