@minix-iot/ui/dist/packages/actionsheet/actionsheet.jsx

基于Vue的移动端轻量级UI组件库

import Popup from '../popup/popup.jsx';
import Icon from '../icon/icon.jsx';

import { Namespace } from '../../utils/namespace';
const namespace = Namespace.Create('action-sheet');

export default {
    name: namespace.name,
    components: {
        Popup,
        Icon
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        overlay: {
            type: Boolean,
            default: true
        },
        zIndex: {
            type: Number,
            default: 1030
        },
        lockScroll: {
            type: Boolean,
            default: false
        },
        duration: {
            type: Number,
            default: 0.36
        },
        overlayStyle: {
            type: Object,
            default: () => { }
        },
        round: {
            type: Boolean,
            default: true
        },
        closeOnClickOveraly: {
            type: Boolean,
            default: true
        },
        safeAreaInsetBottom: {
            type: Boolean,
            default: true
        },
        actions: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: ''
        },
        description: {
            type: String,
            default: ''
        },
        cancelText: {
            type: String,
            default: ''
        },
        closeOnClickAction: {
            type: Boolean,
            default: true
        },
        background:{
            type: String
        }
    },
    model: {
        prop: 'show',
        event: 'close'
    },
    computed: {
        cls() {
            return namespace.derive();
        },
        headerCls() {
            return namespace.derive('header');
        },
        titleCls() {
            return namespace.derive('header-title');
        },
        descCls() {
            return namespace.derive('header-desc');
        },
        bodyCls() {
            return namespace.derive('body');
        },
        footerCls() {
            return namespace.derive('footer');
        },
        btnCls() {
            return namespace.derive('footer-btn');
        },
    },
    methods: {
        getActionItemCls(item) {
            return namespace.derive('body-action-item', {
                disabled: item.disabled
            });
        },
        getActionItemStyle(item) {
            const res = {};
            if (item.color) {
                res.color = item.color;
            }
            return res;
        },
        close() {
            this.$emit('close', false);
        },
        onSelectItem(item, e) {
            if (this.closeOnClickAction) {
                this.close();
            }
            this.$emit('select', item, e);
        },
        onClickCancel() {
            this.close()
        },
        onClose() {
            this.close();
        }
    },
    render() {
        const renderHeader = () => {
            if(this.title){
                return (
                    <div class={this.headerCls}>
                        {this.$slots.header || <div class={this.titleCls}>{this.title}</div>}
                    </div>
                )
            }
        }
        const renderBody = () => {
            const acts = this.actions.map((x,i)=>(
                <div key={i} class={this.getActionItemCls(x)} style={this.getActionItemStyle(x)} vOn:click_stop={e=>this.onSelectItem(x,e)}>
                    {x.name}
                </div>
            ))
            return (
                <div class={this.bodyCls}>
                    {this.$scopedSlots.body?.({actions:this.actions}) || acts}
                </div>
            )
        }
        const renderFooter = () => {
            if(this.cancelText){
                return (
                    <div class={this.footerCls} vOn:click_stop={this.onClickCancel}>
                        {
                            this.$scopedSlots.footer?.({cancelText:this.cancelText}) ||
                            <div class={this.btnCls}>{this.cancelText}</div>
                        }
                    </div>
                )
            }
        }
        return (
            <Popup
                show={this.show}
                overlay={this.overlay}
                z-index={this.zIndex}
                lock-scroll={this.lockScroll}
                duration={this.duration}
                overlay-style={this.overlayStyle}
                round={this.round}
                vOn:close-on-click-overlay={this.closeOnClickOveraly}
                safe-area-inset-bottom={this.safeAreaInsetBottom}
                vOn:close={this.onClose}
                position="bottom"
                background={this.background}
            >
                <div class={this.cls}>
                    {renderHeader()}
                    {renderBody()}
                    {renderFooter()}
                </div>
            </Popup>  
        )
    }
};