<template>
  <div>
    <bxs-cell-group>
      <bxs-cell
        title="轻提示"
        is-link
        @click="showToast('最长文案不超过28字符')"
        />
      <bxs-cell
        title="成功提示"
        is-link
        @click="showToast('成功提示','success')"
        />
      <bxs-cell
        title="失败提示"
        is-link
        @click="showToast('失败提示','fail')"
        />
      <bxs-cell
        title="警示提示"
        is-link
        @click="showToast('警示提示','warning')"
        />
      <bxs-cell
        title="自定义提示"
        is-link
        @click="customToast()"
        />
    </bxs-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    showToast(message, type) {
      if (type) {
        this.$toast[type](message)
      } else {
        this.$toast(message)
      }
    },
    customToast() {
      this.$toast({
        message: '自定义提示',
        icon: 'bx-icon bx-icon-notify',
        duration: 5000,
      })
    },
  },
}
</script>
