pencil-vue

基本用法

顶部弹出
中间弹出
下面弹出
<Button @click="$toast('点击弹出提示',{ position:'top'})">顶部弹出</Button>
<Button @click="$toast('点击弹出提示',{ position:'middle'})">中间弹出</Button>
<Button @click="$toast('点击弹出提示',{ position:'bottom'})">下面弹出</Button>

使用 HTML 片段

使用HTML片段

<template>
  <Button @click="openHTML">使用HTML片段</Button>
</template>

<script>
export default {
  methods: {
    openHTML() {
      this.$toast("<strong>这是 <i>HTML</i> 片段</strong>", {
        enableHtml: true,
      });
    },
  },
};
</script>

设置关闭事件

打开弹出

<template>
  <Button @click="openHTML">使用HTML片段</Button>
</template>

<script>
export default {
  methods: {
    openHTML() {
      this.$toast("<strong>这是 <i>HTML</i> 片段</strong>", {
        enableHtml: true,
      });
    },
  },
};
</script>

Options

参数说明类型可选值默认值
position弹出位置Stringtop | middle | bottomtop
autoClose设置消息关闭时间，秒，设置为false则不关闭Boolean | Number—3
onClose关闭事件Function——
showClose是否显示关闭按钮boolean—false
enableHtml是否将 message 属性作为 HTML 片段处理Boolean—false