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

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

import { Namespace } from '../../utils/namespace.js';
import PickerColumn from '../pickercolumn/pickercolumn.jsx';

const namespace = Namespace.Create('picker');

export default {
    name: namespace.name,
    components: {
        PickerColumn,
    },
    props: {
        columns: {
            type: Array,
            default: () => [],
        },
        itemHeight: {
            type: Number,
            default: 50,
        },
        visibleItemCount: {
            type: Number,
            default: 5,
        },
        swipeDuration: {
            type: Number,
            default: 800,
        },
        title: {
            type: String,
            default: '',
        },
        readonly: {
            type: Boolean,
            default: false,
        },
        windowPattern: {
            type: String,
            default: 'fill',
        },
    },
    computed: {
        cls() {
            return namespace.derive()
        },
        headerCls(){
            return namespace.derive('header')
        },
        titleCls(){
            return namespace.derive('header-title')
        },
        bodyCls(){
            return namespace.derive('body')
        },
        bodyStyle() {
            return {
                height: `${this.itemHeight * this.visibleItemCount}px`,
            };
        },
        columnContainerCls(){
            return namespace.derive('body-column-container')
        },
        maskCls(){
            return namespace.derive('body-mask')
        },
        maskStyle() {
            return {
                backgroundSize: `100% ${(this.itemHeight * (this.visibleItemCount - 1)) / 2}px`,
            };
        },
        windowCls() {
            return namespace.derive('body-window',[this.windowPattern])
        },
        windowStyle() {
            return {
                height: `${this.itemHeight}px`,
            };
        },
        windowColumnCls(){
            return namespace.derive('body-window-column')
        },
        windowColumnSuffixCls(){
            return namespace.derive('body-window-column-suffix')
        },
        footerCls(){
            return namespace.derive('footer')
        },
        footerBtnCls(){
            return namespace.derive('footer-btn')
        }
    },
    methods: {
        onChange(columnIndex, selectedItemIndex){
            const values = this.columns.map((_,i)=>this.$refs[`picker-column-${i}`].getValue());
            this.$emit('change', values, { columnIndex, selectedItemIndex });
        },
        onCancel() {
            this.$emit('cancel');
        },
        onConfirm() {
            this.$emit('confirm');
        },
    },
    render(){
        const renderHeader = ()=>(
            <div class={this.headerCls}>
                {
                    this.$slots.header ||
                    (this.title && <div class={this.titleCls}>{this.title}</div>)
                }
            </div>
        )

        const renderBody = ()=> {
            const cols = this.columns.map((v,i)=>(
                <PickerColumn
                    key={i}
                    ref={`picker-column-${i}`}
                    readonly={this.readonly}
                    items={v.items}
                    default-index={v.defaultIndex}
                    item-height={this.itemHeight}
                    swipeDuration={this.swipeDuration}
                    visible-item-count={this.visibleItemCount}
                    suffix={v.suffix}
                    formatter={v.formatter}
                    vOn:change={selectedIndex => this.onChange(i, selectedIndex)}
                />
            ))

            return (
                <div class={this.bodyCls} style={this.bodyStyle}>
                    <div class={this.columnContainerCls}>
                        {cols}
                    </div>
                    <div class={this.maskCls} style={this.maskStyle}></div>
                    <div class={this.windowCls} style={this.windowStyle}></div>
                </div>
            )
        }

        const renderFooter = ()=> {
            const btns = [
                <div class={this.footerBtnCls} onClick={this.onCancel}>取消</div>,
                <div class={this.footerBtnCls} onClick={this.onConfirm}>确定</div>
            ]
    
            return (
                <div class={this.footerCls}>
                    {this.$slots.footer || btns}
                </div>
            )
        }

        return (
            <div class={this.cls}>
                {renderHeader()}
                {renderBody()}
                {renderFooter()}
            </div>
        )
    }
}