123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- import baseComponent from '../helpers/baseComponent'
- import classNames from '../helpers/classNames'
- const defaults = {
- prefixCls: 'wux-toptips',
- classNames: 'wux-animate--slideInDown',
- icon: 'cancel',
- hidden: false,
- text: '',
- duration: 3000,
- success() {},
- }
- let _toptips = null
- baseComponent({
- useFunc: true,
- data: defaults,
- computed: {
- classes() {
- const { prefixCls } = this.data
- const ico = this.data.icon ? this.data.icon : 'cancel'
- const wrap = classNames(prefixCls)
- const content = classNames(`${prefixCls}__content`, {
- [`${prefixCls}__content--${ico}`]: ico,
- })
- const icon = `${prefixCls}__icon`
- return {
- wrap,
- content,
- icon,
- }
- },
- },
- methods: {
- /**
- * 隐藏
- */
- hide() {
- if (this.removed) return false
- this.removed = true
- if (_toptips) {
- clearTimeout(_toptips.timeout)
- _toptips = null
- }
- this.$$setData({ in: false })
- if (typeof this.fns.success === 'function') {
- this.fns.success()
- }
- },
- /**
- * 显示
- */
- show(opts = {}) {
- const closePromise = new Promise((resolve) => {
- const options = this.$$mergeOptionsAndBindMethods(Object.assign({}, defaults, opts))
- const callback = () => {
- this.hide()
- return resolve(true)
- }
- this.removed = false
- this.$$setData({ in: true, ...options })
- if (_toptips) {
- clearTimeout(_toptips.timeout)
- _toptips = null
- }
- _toptips = {
- hide: this.hide,
- }
- _toptips.timeout = setTimeout(callback, options.duration)
- })
- const result = () => {
- if (_toptips) {
- _toptips.hide.call(this)
- }
- }
- result.then = (resolve, reject) => closePromise.then(resolve, reject)
- result.promise = closePromise
- return result
- },
- success(opts = {}) {
- return this.show(Object.assign({
- icon: 'success',
- }, opts))
- },
- info(opts = {}) {
- return this.show(Object.assign({
- icon: 'info',
- }, opts))
- },
- warn(opts = {}) {
- return this.show(Object.assign({
- icon: 'warn',
- }, opts))
- },
- error(opts = {}) {
- return this.show(Object.assign({
- icon: 'cancel',
- }, opts))
- },
- },
- })
|