hae
Version:
Mobile web UI based on Vux
161 lines (151 loc) • 4.4 kB
YAML
category:
en: Feedback
zh-CN: 弹窗提示
icon: ''
tags:
en:
- toast
- tip
- dialog
zh-CN:
- 弹窗
- 提示
extra: |
该组件支持以`plugin`形式调用:
::: warning
以插件形式调用时,和`template`中使用不同,属性名请使用`小驼峰式`,比如`isShowMask`而不是`is-show-mask`。
:::
``` js
import { ToastPlugin } from 'vux'
Vue.use(ToastPlugin)
// 或者umd方式
// 引入构建的js文件
Vue.use(vuxToastPlugin)
// 默认参数
Vue.use(ToastPlugin, {position: 'top'})
```
``` js
// 显示
this.$vux.toast.show({
text: 'Loading'
})
// 显示文字
this.$vux.toast.text('hello', 'top')
// 隐藏
this.$vux.toast.hide()
// 获取显示状态
this.$vux.toast.isVisible() // v2.9.1 开始支持
```
props:
value:
type: Boolean
default: false
en: if showing toast, use v-model for binding
zh-CN: 是否显示, 使用 v-model 绑定
time:
type: Number
default: 2000
en: show time
zh-CN: 显示时间
type:
type: String
default: success
en: toast type, success, warn, cancel, text
zh-CN: 类型,可选值 success, warn, cancel, text
width:
type: String
default: 7.6em
en: toast's width
zh-CN: 宽度
is-show-mask:
type: Boolean
default: false
en: if showing mask, users cannot operate other elements on the page
zh-CN: 是否显示遮罩,如果显示,用户将不能点击页面上其他元素
text:
type: String
default: ''
en: content of the toast, text or html, the same function as default slot
zh-CN: 提示内容,支持 html,和默认slot同样功能
position:
version: v2.1.1-rc.4
type: String
default: 'default'
en: 'toast position, available values: default, top, middle, bottom'
zh-CN: 显示位置,可选值 default, top, middle, bottom
slots:
default:
en: default slot, the content of the toast
zh-CN: 默认slot, 提示内容
events:
on-show:
en: emits when toast shows
zh-CN: 提示弹出时触发
on-hide:
en: emits when toast hides
zh-CN: 提示隐藏时触发
changes:
v2.9.1:
en:
- '[feature] add isVisible function for ToastPlugin #2704'
zh-CN:
- '[feature] 添加 isVisible 获取当前显示状态 #2704'
v2.7.7:
en:
- '[fix] plugin options is used as toast default options'
zh-CN:
- '[fix] 插件 options 参数作为toast的默认参数'
v2.6.3:
en:
- '[fix] fix no padding when using slot and type === text'
zh-CN:
- '[fix] 修复 type 为 text 时使用 slot 缺失 padding 样式的问题'
v2.5.8:
en:
- "[fix] Toast's zIndex should be higher than XDialog's #1820"
zh-CN:
- '[fix] zIndex 值应该比 XDialog 大 #1820'
v2.3.1:
en:
- '[feature] Add text method for plugin'
zh-CN:
- '[feature] 为插件添加 text 方法方便调用'
v2.1.1-rc.13:
en:
- '[fix] fix After the call is not set webkitOverflowScrolling for touch'
zh-CN:
- '[fix] 修复 调用后没有设置webkitOverflowScrolling为touch'
v2.1.1-rc.10:
en:
- '[fix] Fix warn icon style'
zh-CN:
- '[fix] 修复警告图标样式'
v2.1.1-rc.9:
en:
- '[enhance] Reset props every time plugin.show is called #870 @jsonviewer'
zh-CN:
- '[enhance] 插件调用时每次都重置为默认参数 #870 @jsonviewer'
v2.1.1-rc.6:
en:
- '[fix] fix forbidden style being overwritten #1016 @LaiXuechao'
zh-CN:
- '[fix] 修复禁止样式被覆盖 #1016 @LaiXuechao'
v2.1.1-rc.4:
en:
- '[feature] Support position setting. #973 @ LaiXuechao'
zh-CN:
- '[feature] 支持显示位置设置 #973 @LaiXuechao'
v2.1.1-rc.2:
en:
- '[feature] Add more less variables'
zh-CN:
- '[feature] 支持更多 less 变量'
v2.0.0:
en:
- '[change] use `v-model` instead of `:show.sync`'
- '[change] do not show mask by default'
- '[feature] add prop:isShowMask'
zh-CN:
- '[change] 使用 `v-model` 而不是`:show.sync`进行显示属性绑定'
- '[change] 默认不显示遮罩'
- '[feature] 添加 isShowMask 属性'