dpzvc-ui 1.0.0

package/src/components/message/message.vue

@@ -0,0 +1,135 @@
+<template>
+    <transition name="dpzvc-ani-scale">
+
+        <div :class="classes">
+            <div :class="leftClasses" v-if="showLeft">
+                <slot name="message-left">
+                    <Spinner size="65" type="blade" color="#ffffff"></Spinner>
+                </slot>
+            </div>
+            <p :class="wrapperClasses">{{text}}</p>
+            <div :class="rightClasses" v-if="!rightHide">
+                <slot name="message-right"></slot>
+            </div>
+        </div>
+
+    </transition>
+</template>
+
+<script>
+    import Spinner from '../spinner'
+    const prefixCls = 'dpzvc-message';
+    const defaultDuration = 1;
+    export default {
+
+        data (){
+            return {}
+        },
+        props: {
+            name: {
+                type: [String, Number],
+                required: true
+            },
+            text: {
+                type: [Number, String],
+                default: ''
+            },
+
+            duration: {
+                type: Number,
+                default: 1.5
+            },
+            showLeft: {
+                type: Boolean,
+                default: false
+            },
+            rightHide: {
+                type: Boolean,
+                default: true
+            },
+            //TODO
+            type: {
+                type: String,
+                default: 'normal',
+                validator: (val) => {
+                    return ['success', 'loading', 'error', 'normal', 'warning', 'danger'].indexOf(val) > -1
+                }
+            },
+            onClose: {
+                type: Function,
+                default:function(){
+
+                }
+            },
+            position: {
+                type: String,
+                default: 'top'
+            }
+        },
+        components: {
+            Spinner
+        },
+        computed: {
+            classes(){
+                return [
+
+                    `${prefixCls}`,
+                    `${prefixCls}-position-${this.position}`
+                ]
+            },
+            wrapperClasses(){
+                return [
+                    `${prefixCls}-text`
+                ]
+            },
+            leftClasses(){
+                return [
+                    `${prefixCls}-left`
+                ]
+            },
+            rightClasses(){
+                return [
+                    `${prefixCls}-right`
+                ]
+            }
+
+        },
+
+        methods: {
+
+            close(){
+
+                this.closeTimer();
+                this.$parent.remove(this.name);
+                this.onClose();
+
+            },
+            closeTimer(){
+
+                if (this.timer) {
+                    clearTimeout(this.timer);
+                    this.timer = null
+                }
+            },
+
+        },
+
+        mounted(){
+
+            this.closeTimer();
+
+            if (this.duration !== 0) {
+
+
+                this.timer = setTimeout(() => {
+                    this.close();
+                }, this.duration * 1000);
+
+            }
+        },
+        beforeDestroy(){
+            this.closeTimer()
+        }
+
+    }
+</script>

package/src/components/message/messageGroup.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="dpzvc-message-group" :style="styles">
+        <Message v-for="(message,key) in messages" :key="message.name"
+                 :duration="message.duration"
+                 :show-left="message.showLeft"
+                 :right-hide="message.rightHide"
+                 :name="message.name"
+                 :type="message.type"
+                 :text="message.text"
+                 :position="message.position">
+
+        </Message>
+    </div>
+</template>
+
+<script>
+
+    const prefixCls = 'dpzvc-message-group';
+
+    import Message from './message.vue'
+
+
+    export default {
+        name:'MessageGroup',
+        props:{
+            styles:{
+                type:Object,
+                default:()=>{
+                    return {
+
+                    }
+                }
+            }
+        },
+        data(){
+            return {
+                messages:[]
+            }
+        },
+        methods:{
+            add(props){
+
+                let _prop = Object.assign({},{
+                    text:'',
+                    showLeft:false,
+                    rightHide:true,
+                    duration:1.5,
+
+                },props);
+
+                this.messages.push(_prop);
+            },
+
+            remove(name){
+
+                const messages = this.messages;
+
+                messages.forEach((item,index)=>{
+                    if(item.name===name){
+                        this.messages.splice(index,1);
+
+                    }
+                })
+
+            },
+            closeAll(){
+                this.messages = [];
+            }
+        },
+        components:{
+            Message
+        }
+    }
+</script>

package/src/components/modal/confirm.js

@@ -0,0 +1,161 @@
+/**
+ * Created by admin on 2017/3/30.
+ */
+import Modal from './modal.vue'
+import VButton from '../button'
+import Vue from 'vue'
+
+import { camelcaseToHyphen } from '../../utils/util'
+
+const prefixCls = 'dpzvc-modal';
+
+Modal.newInstance = properties =>{
+
+    let _props = properties || {};
+
+    let props = '';
+
+    Object.keys(_props).forEach( prop =>{
+
+        props += ' :'+camelcaseToHyphen(prop) + '=' + prop
+    })
+
+    const div = document.createElement('div');
+
+    document.body.appendChild(div);
+
+    const modal = new Vue({
+        el:div,
+        template:`<Modal ${props} v-model="visible" :width="width" >
+                        <div class="${prefixCls}-header-inner  ellipse-fir"  v-html="title" slot="header"></div>
+                        <div class="${prefixCls}-body-inner" v-html="body" slot="body"></div>
+                        <template slot="footer">
+                            <v-button type="primary" :radius="false" @click="cancle"  v-if="showCancle">{{cancleText}}</v-button>
+                             <v-button type="normal" :radius="false" @click="ok" :loading="buttonLoading">{{okText}}</v-button>
+                        </template>
+                    </Modal>`,
+        components:{
+            Modal,
+            VButton
+        },
+        data:Object.assign(_props,{
+            visible:false,
+            width:'70%',
+            body:'',
+            title:'',
+            okText:'确定',
+            cancleText:'取消',
+            loading:false,
+            buttonLoading:false,
+            showCancle:true,
+            showHead:true,
+            onOk:function(){},
+            onCancle:function(){},
+            onRemove:function(){}
+        }),
+        methods:{
+            cancle(){
+                this.$children[0].visible = false;
+                this.onCancle();
+                this.remove()
+
+            },
+            ok(){
+                console.log('asd')
+                if (this.loading) {
+                    this.buttonLoading = true;
+                    this.$children[0].buttonLoading = true;
+                } else {
+                    this.visible = false;
+                    this.remove();
+                }
+
+                this.onOk()
+            },
+            remove(){
+                this.$children[0].visible = false;
+                setTimeout(()=>{
+                    this.destroy();
+                },300)
+            },
+            destroy(){
+
+                this.$destroy();
+                document.body.removeChild(this.$el);
+                this.onRemove()
+            },
+
+
+        },
+    }).$children[0];
+
+
+
+    return {
+
+        show(props){
+
+
+
+            // if ('width' in props) {
+            //     modal.$parent.width = props.width
+            // }
+            //
+            // if ('title' in props) {
+            //     modal.$parent.title = props.title
+            // }
+            //
+            // if ('showHead' in props) {
+            //     modal.$parent.showHead = props.showHead
+            // }
+            //
+            // if ('okText' in props) {
+            //     modal.$parent.okText = props.okText
+            // }
+            //
+            // if ('cancleText' in props) {
+            //     modal.$parent.cancleText = props.cancleText
+            // }
+            //
+            //
+            // if ('onCancle' in props) {
+            //     modal.$parent.onCancle = props.onCancle
+            // }
+            //
+            // if ('onOk' in props) {
+            //     modal.$parent.onOk = props.onOk
+            // }
+            //
+            // if ('loading' in props) {
+            //     modal.$parent.loading = props.loading
+            // }
+            //
+            // if ('body' in props) {
+            //     modal.$parent.body = props.body
+            // }
+
+            Object.keys(props).forEach((item)=>{
+                modal.$parent[item] = props[item]
+            })
+
+            modal.$parent.showCancle = props.showCancle;
+            modal.$parent.onRemove = props.onRemove;
+            modal.visible = true;
+
+
+        },
+        remove () {
+
+            modal.visible = false;
+            modal.$parent.buttonLoading = false;
+            modal.$parent.remove();
+
+        },
+        component:modal
+
+    }
+    };
+
+
+
+export default  Modal

package/src/components/modal/index.js

@@ -0,0 +1,63 @@
+/**
+ * Created by admin on 2017/3/30.
+ */
+import  Modal from './confirm'
+
+let modalInstance;
+
+function getModalInstance(){
+    console.warn(modalInstance)
+    modalInstance = modalInstance || Modal.newInstance({
+            showHead:true,
+            closable:true,
+            maskClosable:false,
+            footerHide:false
+        });
+
+
+    return modalInstance
+}
+
+
+function confirm (options) {
+
+    let instance = getModalInstance();
+
+    options.onRemove = function (){
+        modalInstance = null;
+
+    }
+
+
+    instance.show(options)
+}
+
+
+Modal.info = function (props={}){
+
+    props.showCancle = true;
+    props.showHead = false;
+    return confirm(props)
+}
+
+Modal.confirm = function (props={}) {
+
+    props.showCancle = false;
+    props.showHead = false;
+
+    return confirm(props)
+}
+
+Modal.remove = function(){
+
+    if(!modalInstance){
+        return false;
+    }
+
+    const instance = getModalInstance();
+
+    instance.remove();
+};
+
+
+export default  Modal;

package/src/components/modal/modal.vue

@@ -0,0 +1,144 @@
+<template>
+    <div>
+    <transition name="dpzvc-ani-fade">
+        <div class="dpzvc-modal-mask" v-show="visible"  @click="mask" @touchstart.prevent @touchmove.prevent @touchend.prevent></div>
+    </transition>
+
+
+
+    <transition name="dpzvc-ani-scale">
+        <div class="dpzvc-modal " :style="getWrapperStyle" v-show="visible" >
+            <div class="dpzvc-modal-header" v-if="isHead"><slot name="header"><div slot="header" class="dpzvc-modal-header-inner ellipse-fir">{{title}}</div></slot></div>
+            <div class="dpzvc-modal-body"><slot name="body">{{body}}</slot></div>
+            <div class="dpzvc-modal-footer" v-if="!footerHide">
+                <slot name="footer">
+                    <v-button type="primary" @click="close" v-if="cancleText">{{cancleText}}</v-button>
+                    <v-button type="normal" @click="ok" :loading="buttonLoading">{{okText}}</v-button>
+                </slot>
+            </div>
+        </div>
+    </transition>
+
+    </div>
+</template>
+
+<script>
+    import Emitter from '../../mixin/emitter'
+    import VButton from '../button'
+
+    export default {
+        name:'Modal',
+        mixins:[Emitter],
+
+        props:{
+            value: {
+                type: Boolean,
+                default: false
+            },
+            maskClosable: {
+                type: Boolean,
+                default: true
+            },
+            title: {
+                type: String
+            },
+            width: {
+                type: String,
+                default: '70%'
+            },
+            okText: {
+                type: String,
+                default () {
+                    return '确定';
+                }
+            },
+            cancleText: {
+                type: String,
+                default () {
+                    return '取消';
+                }
+            },
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            styles: {
+                type: Object
+            },
+            showHead:{
+                type:Boolean,
+                default:true
+            },
+            footerHide: {
+                type: Boolean,
+                default: false
+            },
+            body:String
+        },
+        data(){
+            return {
+                isHead:this.showHead,
+                visible:this.value,
+                buttonLoading:false
+            }
+        },
+
+        components:{
+            VButton
+        },
+        computed:{
+            getWrapperStyle(){
+
+                let style = {};
+
+                let styleWidth = {
+
+                    width: `${this.width}`
+                }
+
+                let customStyle = this.styles ? this.styles:{}
+
+                Object.assign(style, styleWidth, customStyle);
+
+                return style;
+
+            },
+
+        },
+        methods:{
+            close(){
+
+                this.visible = false;
+                this.$emit('on-cancle')
+            },
+            mask(){
+                if (!this.maskClosable && !this.buttonLoading) {
+                    this.close()
+                }
+
+            },
+            ok(){
+
+                if (this.loading) {
+
+                    this.buttonLoading = true;
+                } else {
+
+                    this.visible = false;
+                }
+
+                this.$emit('on-ok')
+
+            },
+        },
+        watch:{
+            value(val) {
+                this.visible = val
+            },
+            showHead(val){
+                this.isHead = val
+            },
+        },
+
+    }
+</script>