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

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

import Popup from '../popup/popup.jsx';
import { Namespace } from '../../utils/namespace';

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

export default {
  name: namespace.name,
  components: {
    Popup
  },
  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: () => {}
    },
    closeOnClickOveraly: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'confirm'
    },
    buttons: {
      type: Array,
      default: () => []
    },
    primary: {
      type: String,
      default: ''
    }
  },
  computed: {
    cls() {
      return namespace.derive();
    },
    headerCls() {
      return namespace.derive('header');
    },
    titleCls() {
        return namespace.derive('header-title');
      },
    bodyCls() {
      return namespace.derive('body');
    },
    contentCls() {
      return namespace.derive('body-content');
    },
    footerCls() {
      return namespace.derive('footer', [this.type]);
    },
    buttonTexts() {
      const res = [];
      if (this.buttons.length === 0) {
        switch (this.type) {
          case 'confirm':
            res.push('确定');
            break;
          case 'alter':
            res.push(...['取消', '确定']);
            break;
          case 'more':
            res.push(...['确定', '更多', '取消']);
            break;
        }
      } else {
        res.push(...this.buttons);
      }
      return res;
    }
  },
  methods: {
    emitButtonClick(text, index) {
      this.$emit('button-click', { text, index }, this);
    },
    resolvePrimary(text, index) {
      if (this.primary && text === this.primary) {
        return true;
      }
      if (!this.primary) {
        switch (this.type) {
          case 'confirm':
          case 'more':
            if (index === 0) {
              return true;
            }
            break;
          case 'alter':
            if (index === 1) {
              return true;
            }
            break;
        }
      }
      return false;
    },
    btnCls(text, index) {
      return namespace.derive('footer-btn', {
        primary: this.resolvePrimary(text, index),
        [this.type]: this.type
      });
    },
    onClose() {
      this.$emit('close');
    }
  },
  render(){
    const renderHeader = ()=>(
        <div class={this.headerCls}>
            {
                this.$slots.header ||
                <div class={this.titleCls}>{this.title}</div> 
            }
        </div>
    )
    const renderBody = ()=>{
        const content = [
            this.content && <div class={this.contentCls}>{this.content}</div>,
            this.$slots.default
        ]
        if(this.content || this.$slots.default || this.$slots.body){
            return <div class={this.bodyCls}>
                {
                    this.$slots.body ||
                    content
                }
            </div>
        }
    }
    const renderFooter = ()=>{
        const btns = this.buttonTexts.map((v,i)=>
            <div key={i} class={this.btnCls(v,i)} vOn:click_stop={()=>this.emitButtonClick(v,i)}>{v}</div>
        )
        return (
            <div class={this.footerCls}>
                {
                    this.$slots.footer ||
                    btns
                }
            </div>
        )
    }
    return (
        <Popup
            show= {this.show}
            overlay={this.overlay}
            zIndex={this.zIndex}
            lockScroll={this.lockScroll}
            duration={this.duration}
            overlay-style={this.overlayStyle}
            close-on-click-overlay={this.closeOnClickOveraly}
            position="center"
            onclose={this.onClose}
        >
            <div class={this.cls}>
                {renderHeader()}
                {renderBody()}
                {renderFooter()}
            </div>
        </Popup>
    )
  }
};