咕噜UI

Toast

TIP

若点击按钮无显示，需要设置

.gulu-toast {z-index: 30;}

设置弹出位置

预览

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

代码

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

设置关闭按钮

预览

上方弹出

代码

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

    methods: {
            onClickButton () {
              this.$toast('你知道我在等你吗？', {
                closeButton: {
                  text: '知道了',
                  callback: () => {
                    console.log('他说知道了')
                  }
                }
              })
            }
          }

自动或手动关闭

预览

上方弹出

代码

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

 methods: {
      onClickButton () {
        this.$toast('我不会自动关闭', {
          autoClose: false
        })
      }
    },

TIP

autoClsoe 取值为 false（手动关闭）或数字（几秒后自动关闭，默认为5)

支持HTML

预览

上方弹出

代码

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

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

←