Toast 消息提示
常用于主动操作后的反馈提示。
使用方法
API
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
autoClose | 是否自动关闭及时长 | Boolean/Number | — | 5 |
position | 位置 | String | top/middle/bottom | top |
enableHtml | 是否支持 html | boolean | — | — |
closeButton | 关闭按钮对象 | object (例如:{text: '关闭', callback () { alert('ddd') } | — | — |
笔记
- 提示信息, 希望实现这样的使用方式
this.$toast('提示内容')
- 一种方法是直接修改 Vue.prototype.$toast, 但是可能会覆盖用户的自定义的,侵入性太强
import Vue from 'vue' // 还有可能用户区分版本设置了别名,例如 vue2, 并不确定
Vue.prototype.$toast = function () {
console.log('提示信息')
}
- 第二种方法使用 Vue 提供的插件功能,做成一个插件, 用户自己使用 use 决定使用。
toast 是动态创建的,可以使用原生 dom api, 但是没有使用到 vue 的功能,所以使用 Vue 的动态创建组件功能, 可以参考 Vue.extend,更完整的 Vue 动态创建组件方式请看这篇文章 creating-vue-js-component-instances-programmatically