wux-weapp/packages/core/alert/index.js

一套组件化、可复用、易扩展的微信小程序 UI 组件库

import baseComponent from '../helpers/baseComponent'
import classNames from '../helpers/libs/classNames'

baseComponent({
    properties: {
        prefixCls: {
            type: String,
            value: 'wux-alert',
        },
        classNames: {
            type: null,
            value: 'wux-animate--fadeIn',
        },
        theme: {
            type: String,
            value: 'balanced',
        },
        thumb: {
            type: String,
            value: '',
        },
        title: {
            type: String,
            value: '',
        },
        label: {
            type: String,
            value: '',
        },
        closable: {
            type: Boolean,
            value: false,
        },
    },
    data: {
        visible: true,
    },
    computed: {
        classes: ['prefixCls, theme', function(prefixCls, theme) {
            const wrap = classNames(prefixCls, {
                [`${prefixCls}--${theme}`]: theme,
            })
            const hd = `${prefixCls}__hd`
            const thumb = `${prefixCls}__thumb`
            const bd = `${prefixCls}__bd`
            const text = `${prefixCls}__text`
            const desc = `${prefixCls}__desc`
            const ft = `${prefixCls}__ft`
            const closable = `${prefixCls}__closable`

            return {
                wrap,
                hd,
                thumb,
                bd,
                text,
                desc,
                ft,
                closable,
            }
        }],
    },
    methods: {
        /**
         * 关闭时触发的回调函数
         */
        onClose() {
            if (this.data.closable) {
                this.setData({
                    visible: false,
                })
            }
            this.triggerEvent('click')
        },
        /**
         * 点击事件
         */
        onClick() {
            this.triggerEvent('click')
        },
    },
})