GALA UI

# toast组件

# 说明

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

# 1.支持zIndex

此选项用于设定 Toast 组件在当前堆叠上下文中的堆叠层级。默认为20。若你的项目不可见 Toast 组件，尝试传入一个 zIndex 试试。

# 2.支持autoClose

设置Toast是否自动关闭，默认5秒自动关闭，可以传递数字或布尔值false

<template>
    <button @click="autoClose">3S后自动关闭</button>
</template>    

<script>
    export default {
        methods:{
            autoClose(){
                  this.$toast('我是 toast 内容', {
                    zIndex:30,
                    autoClose: 3,
                })
            }
        }         
    }
</script>
Expand Copy

# 3.支持closeButton

设置closeButton,编辑气泡框右边的文本，并且执行传入的回调函数。

<template>
    <button @click="clickClose">点击关闭</button>
</template>    

<script>
    export default {
        methods:{
            clickClose(){
                  this.$toast('我是 toast 内容', {
                    zIndex:30,
                    autoClose: 5,
                    closeButton:{
                        text:"点击关闭",
                        callback:()=>{console.log('关闭成功')}
                    }
                })
            }
        }         
    }
</script>
Expand Copy

# 4.支持enableHTMl

默认为false,开启后toast可以识别Html标签

<template>
    <button @click="autoClose">支持HTML写法</button>
</template>    

<script>
    export default {
        methods:{
            autoClose(){
                  this.$toast('<em>我是 toast 内容</em>', {
                    zIndex:30,
                    enableHTML:true
                })
            }
        }         
    }
</script>
Expand Copy

# 5.支持position

设置toast弹出位置，默认上方

<template>
    <button @click="top">上方弹出</button>
    <button @click="center">中间弹出</button>
    <button @click="bottom">下方弹出</button>
</template>    

<script>
    export default {
        methods:{
            top(){
                  this.$toast('上方弹出', {
                    zIndex:30
                })
            },
            center(){
                  this.$toast('中间弹出', {
                    zIndex:30,
                    position:"middle"
                })
            },
            bottom(){
                  this.$toast('下方弹出', {
                    zIndex:30,
                    enableHTML:true,
                    position:"bottom"
                })
            }
        }         
    }
</script>
Expand Copy

# Attributes

参数 说明 类型 可选值 默认值
zIndex 层叠等级 Number 20
autoClose 自动关闭 Boolean/Number 5
closeButton 关闭并执行传入的回调 Object
enableHTML 识别HTML标签 Boolean true/false false
position 弹出的位置 String top/middle/bottom top

← tabs - 标签 →