dpzvc-ui 1.0.0

package/src/components/checkBox/checkbox.vue

@@ -0,0 +1,107 @@
+
+<template>
+    <label :class="classes">
+        <span :class="wrapperClasses">
+            <span :class="innerClasses"></span>
+              <input type="checkbox" v-if="!isGroup" :disabled="disable" :checked="currentValue" @change="change"
+                     class="dpzvc-checkbox-input noselect "/>
+              <input type="checkbox" v-else :disabled="disable" :value="label" v-model="model" @change="change"
+                     class="dpzvc-checkbox-input noselect "/>
+        </span>
+        <slot v-if="show"><span ref="slot">{{label}}</span></slot>
+    </label>
+
+</template>
+
+
+<script>
+    import {findComponentUpward} from '../../utils/util'
+    import Emitter from '../../mixin/emitter'
+    const prefixCls = 'dpzvc-checkbox';
+    export default {
+        name: 'checkBox',
+        data(){
+            return {
+                model: [],
+                isGroup: false,
+                show: true,
+                currentValue: this.value,
+                parent: findComponentUpward(this, 'checkBoxGroup'),
+
+            }
+        },
+        mixins: [Emitter],
+        mounted(){
+            this.parent = findComponentUpward(this, 'checkBoxGroup');
+            if (this.parent) {
+                this.isGroup = true;
+            }
+
+            if (!this.isGroup) {
+                this.currentValue = this.value;
+                if (this.$refs.slot && this.$refs.slot.innerHtml == '') {
+                    this.show = false
+                }
+            }
+        },
+        computed: {
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            wrapperClasses(){
+                return [
+                    `${prefixCls}-wrapper`,
+                    {
+                        [`${prefixCls}-checked`]: this.currentValue,
+                        [`${prefixCls}-disable`]: this.disable
+                    }
+                ]
+            },
+            innerClasses(){
+                return [
+                    `${prefixCls}-inner`
+                ]
+            }
+        },
+        props: {
+
+            disable: {
+                type: Boolean,
+                default: false
+            },
+            value: {
+                type: Boolean,
+                default: false
+            },
+            label: {
+                type: [String, Number, Boolean],
+
+            },
+
+        },
+        methods: {
+            change(e){
+                if (this.disable)  return;
+                const checked = e.target.checked;
+                this.currentValue = checked;
+                this.$emit('input', checked);
+                if (this.isGroup) {
+
+                    this.parent.change(this.model)
+                } else {
+                    this.$emit('on-change', checked);
+                    this.dispatch('on-form-change', checked)
+                }
+            }
+        },
+
+        watch: {
+
+            value(val){
+                this.currentValue = val
+            }
+        }
+    }
+</script>

package/src/components/checkBox/index.js

@@ -0,0 +1,8 @@
+/**
+ * Created by admin on 2017/4/19.
+ */
+import CheckBox from './checkbox.vue'
+import CheckGroup from './checkbox-group.vue'
+
+CheckBox.group = CheckGroup;
+export default CheckBox

package/src/components/header/header.vue

@@ -0,0 +1,82 @@
+<template>
+    <div :class="classes" v-if="visible">
+        <header>
+            <div class="left" @click="back">
+                <slot name="left"><span class="arrow"></span><span class="text">返回</span></slot>
+            </div>
+            <div class="title dpzvc-nowrap">{{title}}</div>
+            <div class="right">
+                <slot name="right"><div></div></slot>
+            </div>
+        </header>
+        <div class="header-place" v-if="fixed"></div>
+    </div>
+</template>
+
+<script>
+    const prefixCls = 'dpzvc-header';
+
+    export default {
+        name: 'header',
+        props: {
+            value:{
+                type:Boolean,
+                default:true
+            },
+            fixed: {
+                type: Boolean,
+                default: true
+            },
+            title: String,
+            wechat:{
+                type:Boolean,
+                default:false
+            }
+        },
+        data(){
+            return {
+                visible:this.value,
+                isWechat:this.wechat
+            }
+        },
+        computed: {
+            classes() {
+                return [
+                    `${prefixCls}`,
+                    {
+                      [`${prefixCls}-fixed`]: !!this.fixed
+                    }
+                ]
+            },
+            isWeixin(){
+
+                return "micromessenger" == window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i)
+            },
+            isPcWeixin(){
+                return "windowswechat" == window.navigator.userAgent.toLowerCase().match(/WindowsWechat/i)
+            }
+        },
+        mounted(){
+            if ((this.isWeixin || this.isPcWeixin) && !this.isWechat) this.visible = false
+        },
+        methods: {
+            back() {
+                this.$router ? this.$router.back() : window.history.back();
+            }
+        },
+        watch:{
+            value(val){
+                this.visible = val
+            },
+            visible(val){
+                this.$emit('input',val)
+            },
+            wechat(val){
+                this.isWechat = val
+            },
+            isWechat(val){
+                this.$emit('input',val);
+            }
+        }
+    }
+</script>

package/src/components/header/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/5/4.
+ */
+import dpzvcHeader from './header';
+export default dpzvcHeader;

package/src/components/loadMore/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/6/19.
+ */
+import LoadMore from './loadmore'
+export default  LoadMore

package/src/components/loadMore/loadmore.vue

@@ -0,0 +1,293 @@
+<template>
+    <div :class="containerClasses" @scroll="onScroll" :style="{height:height}">
+        <div :class="topClasses" v-if="refresh" :style="{height:translateY+'px'}">
+            <div :class="statusClass">
+                <slot name="top">
+                    <span class="spinner"><spinner v-if="upStatus == 'loading'" size="15" type="snake"></spinner></span><span
+                        class="dpzvc-loadmore-text">{{upText}}</span>
+                </slot>
+            </div>
+        </div>
+        <div :class="contentClasses">
+            <slot></slot>
+        </div>
+
+        <div :class="bottomClasses" v-if="loadMore">
+            <div :class="statusClass">
+                <slot name="bottom">
+                    <span class="spinner"><spinner v-if="downStatus == 'loading'" size="15"
+                                                   type="snake"></spinner></span><span class="dpzvc-loadmore-text">{{downText}}</span>
+                </slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Spinner from '../spinner'
+    const prefixCls = 'dpzvc-loadmore';
+    export default {
+        name: 'loadmore',
+        components: {
+            Spinner
+        },
+        props: {
+            height: {
+                type: [Number, String],
+                default: '100%'
+            },
+            refresh: Function,
+            upLoadingText: {
+                type: String,
+                default: '加载中...'
+            },
+            upDistance: {
+                type: Number,
+                default: 70
+            },
+            upPullText: {
+                type: String,
+                default: '↓ 下拉刷新'
+            },
+            upDropText: {
+                type: String,
+                default: '↑ 释放更新'
+            },
+            maxDistance: {
+                type: Number,
+                default: 0
+            },
+            speed: {
+                type: Number,
+                default: 3
+            },
+            downEndText: {
+                type: String,
+                default: '没有更多了'
+            },
+            downDropText: {
+                type: String,
+                default: '↑ 上拉加载数据'
+            },
+            downLoadingText: {
+                type: String,
+                default: '加载中...'
+            },
+            downDistance: {
+                type: Number,
+                default: 50
+            },
+            loadMore: Function,
+            hasMore: {
+                type: Boolean,
+                default: true
+            },
+            styles: {
+                type: Object,
+                default(){
+                    return {}
+                }
+            },
+            auto: {
+                type: Boolean,
+                default: true
+            },
+            autoFill: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data(){
+            return {
+                translateY: 0,
+                startTranslateY: 0,
+                currentY: 0,
+                startY: 0,
+                upStatus: '',
+                downStatus: '',
+                direction: '',
+                upText: '',
+                downText: '',
+                down: false,
+                drag: false,
+                more: this.hasMore,
+            }
+        },
+        computed: {
+            containerClasses(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            topClasses(){
+                return [
+                    `${prefixCls}-top`,
+                    {
+                        [`${prefixCls}-drag`]: !this.drag
+                    }
+                ]
+            },
+            bottomClasses(){
+                return [
+                    `${prefixCls}-bottom`
+                ]
+            },
+            contentClasses(){
+                return [
+                    `${prefixCls}-content`,
+                ]
+            },
+            statusClass(){
+                return [
+                    `${prefixCls}-status`
+                ]
+            }
+        },
+        mounted(){
+            if (this.auto && this.refresh && typeof this.refresh == 'function') {
+                this.translateY = 40;
+                this.drag = false;
+                this.direction = 'down';
+                this.upStatus = 'loading';
+                this.refresh()
+            }
+            this.bindEvents();
+        },
+        methods: {
+            onLoadOff(){
+                this.translateY = 0;
+                this.upStatus = '';
+                this.downStatus = '';
+                if (!this.more) this.downStatus = 'end';
+                setTimeout(() => {
+                    if (this.more && this.isBottom()) {
+                        this.direction = 'up';
+                        this.downStatus = 'loading';
+                        this.loadMore();
+                    }
+                }, 1000)
+            },
+            isBottom(){
+                if (this.$el.scrollHeight > this.$el.offsetHeight) return false;
+                return true;
+            },
+            onScroll(e){
+                e.preventDefault()
+                if (this.downStatus == 'loading') return;
+                let scrollTop = this.$el.scrollTop;
+                if (this.loadMore && typeof this.loadMore == 'function') {
+                    let absY = this.$el.scrollHeight - (this.$el.offsetHeight + scrollTop);
+                    if (absY > this.downDistance && this.downStatus === 'drop') {
+                        this.downStatus = '';
+                    } else if (absY <= this.downDistance && absY > this.downDistance && this.more) {
+                        this.downStatus = 'drop';
+                    } else if (absY <= this.downDistance) {
+                        this.downStatus = 'loading';
+                        if (this.more) {
+                            this.downStatus = 'loading';
+                            this.loadMore();
+                        } else {
+                            this.downStatus = 'end';
+                            let that = this;
+                            setTimeout(() => {
+                                that.onLoadOff();
+                            }, 1000);
+                        }
+                    }
+                }
+            },
+            onTouchStart(e){
+                if (this.upStatus === 'loading') return;
+                this.startY = e.touches[0].clientY;
+                this.startTranslateY = this.translateY;
+                this.down = false;
+            },
+            onTouchMove(e){
+                let pos = this.$el.getBoundingClientRect();
+                if (this.upStatus === 'loading' || this.startY < pos.top && this.startY > pos.down) return;
+                this.currentY = e.touches[0].clientY;
+                let distance = (this.currentY - this.startY) / this.speed;
+                let scrollTop = this.$el.scrollTop;
+                this.direction = distance > 0 ? 'down' : 'up';
+                if (this.currentY >= this.startY && typeof this.refresh === 'function' && scrollTop === 0 && this.direction === 'down') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (this.maxDistance > 0) {
+                        this.translateY = distance <= this.maxDistance ? distance - scrollTop : this.translateY;
+                    } else {
+                        this.translateY = distance - scrollTop;
+                    }
+                    if (this.translateY < 0) {
+                        this.translateY = 0;
+                    }
+                    this.upStatus = this.translateY >= this.upDistance ? 'drop' : 'pull';
+                    this.drag = true;
+                    this.down = this.down || this.isBottom();
+                }
+            },
+            onTouchEnd(e){
+                if (this.upStatus === 'loading') return;
+                if (this.direction === 'down' && this.$el.scrollTop <= 0 && this.translateY >= 0) {
+                    if (this.upStatus == 'drop') {
+                        this.translateY = 40;
+                        this.upStatus = 'loading';
+                        this.refresh();
+                    } else {
+                        this.translateY = 0;
+                    }
+                }
+                this.direction = '';
+                this.drag = false;
+            },
+            bindEvents(){
+                this.$el.addEventListener('touchstart', this.onTouchStart, false);
+                this.$el.addEventListener('touchmove', this.onTouchMove, false);
+                this.$el.addEventListener('touchend', this.onTouchEnd, false);
+            },
+            unbindEvents(){
+                this.$el.removeEventListener('touchstart', this.onTouchStart, false);
+                this.$el.removeEventListener('touchmove', this.onTouchMove, false);
+                this.$el.removeEventListener('touchend', this.onTouchEnd, false);
+            }
+        },
+        watch: {
+            upStatus(val){
+                switch (val) {
+                    case 'pull':
+                        this.upText = this.upPullText;
+                        break;
+                    case 'drop':
+                        this.upText = this.upDropText;
+                        break;
+                    case 'loading':
+                        this.upText = this.upLoadingText;
+                }
+                this.$emit('on-change-up-status', val)
+            },
+            downStatus(val){
+                switch (val) {
+                    case 'end':
+                        this.downText = this.downEndText;
+                        break;
+                    case 'drop':
+                        this.downText = this.downDropText;
+                        break;
+                    case 'loading':
+                        this.downText = this.downLoadingText;
+                        break;
+                    default:
+                        this.downText = '';
+                        break;
+                }
+                this.$emit('on-change-down-status', val)
+            },
+            hasMore(val){
+                this.more = val
+                if (!val) this.downStatus = 'end'
+            }
+        },
+        beforeDestroy(){
+            this.unbindEvents();
+        }
+    }
+</script>

package/src/components/message/confirm.js

@@ -0,0 +1,52 @@
+/**
+ * Created by admin on 2017/5/8.
+ */
+
+import MessageGroup from './messageGroup.vue'
+import Vue from 'vue';
+import {camelcaseToHyphen} from '../../utils/util'
+
+MessageGroup.newInstance = function (props) {
+
+    let _props = props || {};
+
+    let _prop = '';
+    Object.keys(_props).forEach((prop) => {
+
+        _prop += ' :' + camelcaseToHyphen(prop) + '=' + prop
+    });
+
+    let div = document.createElement('div');
+
+    document.body.appendChild(div);
+
+    let message = new Vue({
+        el: div,
+        data: _props,
+        template:`<Message-group ${_prop} ></Message-group>`,
+        components: {MessageGroup},
+    }).$children[0];
+
+
+    return {
+
+        add(props){
+            message.add(props)
+        },
+        remove(props) {
+
+            message.remove(props)
+        },
+        component: message,
+        destroy(){
+            message.closeAll();
+
+            setTimeout(()=>{
+                document.body.removeChild(document.getElementsByClassName('dpzvc-message')[0].parentElement)
+            },500)
+
+        }
+    }
+}
+
+export default  MessageGroup;

package/src/components/message/index.js

@@ -0,0 +1,132 @@
+/**
+ * Created by admin on 2017/5/8.
+ */
+
+import MessageGroup from './confirm'
+import {random_str} from '../../utils/util'
+let defualtDuration = 1;
+let key = 1;
+let top = '0';
+
+let MG_instance;
+
+let seed = 1;
+
+let time = Date.now();
+
+function getName(){
+    return 'dpzvc-message-group_'+time+'_'+(seed++)+'_'+random_str();
+}
+
+let getNewInstance = function () {
+    MG_instance = MG_instance || MessageGroup.newInstance({
+
+            styles: {
+                top: top,
+                right: '0'
+            }
+
+        })
+
+    return MG_instance;
+};
+
+function message(props) {
+
+
+    let [
+        text,
+        name,
+        duration,
+        showLeft,
+        rightHide,
+        loading,
+        onClose,
+        styles,
+        type,
+        position]
+
+        =
+
+     [
+        props.text || '',
+        props.name || getName(),
+        (props.duration == 0) ? 0 : props.duration || defualtDuration,
+        props.showLeft || false,
+        props.rightHide || true,
+        props.loading || false,
+        props.onClose || function () {},
+        props.styles || {},
+        props.type || 'normal',
+        props.position || 'center'];
+
+    let instance = getNewInstance();
+
+
+
+    instance.add({
+        name: name,
+        text: text,
+        duration: duration,
+        showLeft: showLeft,
+        rightHide: rightHide,
+        loading: loading,
+        onClose: onClose,
+        styles: styles,
+        type: type,
+        position:position
+    });
+
+    return (function () {
+        let target = name;
+
+        return function () {
+            instance.remove(`${target}`);
+        };
+    })();
+}
+
+
+export default {
+
+    show(options){
+        return message(options)
+    },
+
+    error(options){
+        options.type = 'error';
+        return message(options)
+    },
+
+    success(options){
+
+        options.type = 'success';
+        return message(options)
+    },
+    loading(options){
+        options.type = 'loading';
+        options.duration = 0;
+        options.showLeft = true;
+        return message(options)
+    },
+    config(options){
+
+        if (options.top) {
+
+            top = options.top
+        }
+
+        if (options.duration) {
+
+            defualtDuration = options.duration
+        }
+    },
+    destroy(){
+        if (!MG_instance) return false;
+        MG_instance = getNewInstance();
+        MG_instance.destroy()
+    }
+}
+
+
+