宅 UI

# 弹出提示

# 预览

# 使用方法

想要使用 Toast 组件，首先需要引入该组件,然后使用 Vue 官方文档中插件的使用方法使用该插件。
代码

<template>
  <div>
    <zh-button @click="noAutoClose">不会自动关闭</zh-button>&nbsp;&nbsp;
    <zh-button @click="enableHTML">支持 HTML 语法</zh-button>&nbsp;&nbsp;
    <zh-button @click="withCallback">关闭按钮添加回调函数</zh-button
    >&nbsp;&nbsp;
    <br />
    <zh-button @click="top">上方弹出</zh-button>
    <zh-button @click="middle">中间弹出</zh-button>
    <zh-button @click="bottom">下方弹出</zh-button>
  </div>
</template>

<script>
import Vue from "vue";
import Toast from "../../../src/Toast";
import Button from "../../../src/Button";
import plugin from "../../../src/plugin";
Vue.use(plugin);
export default {
  components: { "zh-toast": Toast, "zh-button": Button },
  methods: {
    noAutoClose() {
      this.$toast("我是 toast 内容", {
        autoClose: false,
        closeButton: {
          text: "确定",
        },
      });
    },
    enableHTML() {
      this.$toast("我是<strong>加粗内容</strong>", {
        closeButton: {
          text: "确定",
          callback: () => {
            console.log("回调的输出");
          },
        },
        enableHtml: true,
      });
    },
    withCallback() {
      this.$toast("关闭后弹出alert", {
        closeButton: {
          text: "确定",
          callback: () => {
            window.alert("回调函数执行了");
          },
        },
      });
    },
    top() {
      this.$toast("我是 toast 内容", { position: "top" });
    },
    middle() {
      this.$toast("我是 toast 内容", { position: "middle" });
    },
    bottom() {
      this.$toast("我是 toast 内容", { position: "bottom" });
    },
  },
};
</script>

# 选项

  1. zIndex
    此选项用于设定 Toast 组件在当前堆叠上下文中的堆叠层级。默认为20。(这是因为在使用 vuepress 编写文档时发现值为 20 才有效。)
    若你的项目不可见 Toast 组件，尝试传入一个 zIndex 试试。

  2. autoClose 此选项可以设定 Toast 自动关闭的延时时间。单位为“ 秒 ”，默认值为 3，设置为false时不会自动关闭。
    代码

    <template>
  <div>
    <zh-button @click="noAutoClose">不会自动关闭</zh-button>
  </div>
</template>
<script>
  import Vue from 'vue'
  import Toast from '../../../src/Toast'
  import Button from '../../../src/Button'
  import plugin from '../../../src/plugin'
  Vue.use(plugin)
  export default {
    components: { 'zh-toast': Toast, 'zh-button': Button },
    methods: {
        noAutoClose() {
            this.$toast("我是 toast 内容", {
                autoClose: false,
                closeButton: {
                text: "确定",
                },
            });
        },
    }
  }
</script>

  3. closeButton
    Toast 组件的右侧按钮文本可编辑，并且支持传入一个回调。 closeButton 选项接收一个对象。对象包括 text 与 callback 。默认值为{ text: "关闭", callback: undefined }
    代码

    <template>
  <div>
    <zh-button @click="auto">点我</zh-button>
  </div>
</template>
<script>
  import Vue from 'vue'
  import Toast from '../../../src/Toast'
  import Button from '../../../src/Button'
  import plugin from '../../../src/plugin'

  Vue.use(plugin)
  export default {
    components: {'zh-toast': Toast, 'zh-button': Button},
    methods: {
      auto() {
        this.$toast('我是 toast 内容', {
            autoClose: 5, 
            closeButton: { text:'确定', callback:()=>{ window.alert("回调函数执行了") }}
        })
      }
    }
  }
</script>

  4. enableHtml
    Toast 组件还支持 HTML 语法，该功能默认关闭，你需要传递一个 enableHTML 参数来开启它, enableHtml:true 。 开启后就可以在 Toast 内容区域写 HTML 语法。 代码

    enableHTML() {
    this.$toast("我是<strong>加粗内容</strong>", {
        closeButton: { text: "确定", callback: () => { console.log("回调的输出"); }},
        enableHtml: true,
    });
},

  5. position
    可以设定 Toast 弹出的位置 ，支持 top, middle, bottom 三个值。

    this.$toast('我是 toast 内容', { position: 'top' })

← Popover - 弹出层 →