dpzvc-ui 1.0.0

package/src/components/swipe/swipe.vue

@@ -0,0 +1,399 @@
+<template>
+    <div :class="classes" :style="{height:height}">
+
+        <div :class="wrapperClasses" :style="styles" ref="wrapper" >
+            <div :class="itemClasses" v-for="(item,index) in arrayList" v-if="arrayList.length">
+                <template v-if="isMultiple">
+                    <a  :class="multipleClass" v-for="(_item,$index) in item" @click="choose(_item,$index,$event)">
+                        <slot  :item="_item" :index="$index">
+                            <img :src="_item.image"/>
+                            <span>{{_item.spec}}</span>
+                        </slot>
+                    </a>
+                </template>
+                <template v-else>
+                    <a  :class="singleClass" @click="choose(item,index,$event)">
+                        <slot :item="item" :index="index">
+                            <img :src="item.image">
+                            <span>{{item.spec}}</span>
+                        </slot>
+                    </a>
+                </template>
+            </div>
+
+        </div>
+        <div :class="dotsClasses">
+            <span :class="['dpzvc-swipe-dots-item',(loop?(index+1):index)==slideIndex?'active':'']"
+                  v-for="(item,index) in dotLength"></span>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    const prefixCls = 'dpzvc-swipe';
+    export default {
+        props: {
+            auto: {
+                type: Boolean,
+                default: true
+            },
+            list: {
+                type: Array,
+                default: () => []
+            },
+            startIndex: {
+                type: Number,
+                default: 0
+            },
+            height: {
+                type: [Number, String],
+                default: 'auto'
+            },
+            dots: {
+                type: String,
+                default: 'bottom'
+            },
+            multiple: {
+                type: Boolean,
+                default: false
+            },
+            distanceIndex: {
+                type: Number,
+                default: 1.5
+            },
+            loop: {
+                type: Boolean,
+                default: true
+            },
+            speed: {
+                type: Number,
+                default: 2
+            },
+            perpage: {
+                type: Number,
+                default: 1
+            }
+
+        },
+        data(){
+            return {
+                translateX: 0,
+                currentTranslateX: 0,
+                dragging: false,
+                autoSwipe: true,
+                startX: 0,
+                currentX: 0,
+                clientWidth: 0,
+                slideIndex: this.loop ? this.startIndex + 1 : this.startIndex,
+                distance: 0,
+                timer: null,
+                clientHeight: 0,
+                localList: this.list
+            }
+        },
+        watch:{
+            list(val){
+                this.localList = val
+            },
+            startIndex(val){
+                this.slideIndex = val
+            }
+        },
+        computed: {
+            dotLength(){
+                return this.localList.length
+            },
+            minIndex(){
+                return this.loop ? 1 : 0
+            },
+            maxIndex(){
+                return this.loop ? this.length - 2 : this.length - 1
+            },
+            arrayList(){
+                if (!this.localList.length) return [];
+                if (this.loop) {
+                    return [].concat([this.localList[this.localList.length - 1]], this.localList, [this.localList[0]])
+                } else {
+                    return this.localList
+                }
+            },
+
+            classes(){
+                return [
+                    `${prefixCls}`,
+                ]
+            },
+            wrapperClasses(){
+                return [
+                    `${prefixCls}-wrapper`,
+                    {
+                        [`${prefixCls}-dragging`]: this.dragging,
+                        [`${prefixCls}-dragging`]: !this.autoSwipe,
+                    }
+                ]
+            },
+            multipleClass(){
+                return [
+                    `${prefixCls}-multiple`
+                ]
+            },
+            singleClass(){
+                return [
+                    `${prefixCls}-single`
+                ]
+            },
+            dotsClasses(){
+                return [
+                    `${prefixCls}-dots`,
+                    {
+                        [`${prefixCls}-dots-bottom`]: this.dots === 'bottom',
+                        [`${prefixCls}-dots-top`]: this.dots === 'top'
+                    }
+                ]
+            },
+
+            itemClasses(){
+                return [
+                    `${prefixCls}-item`,
+                    {
+                        [`multiple`]: this.isMultiple,
+                    }
+                ]
+            },
+            isMultiple(){
+
+                if (this.perpage <= 1) {
+                    return false;
+                } else {
+                    const page = this.perpage;
+                    let arr = [];
+                    let multipleArr = [];
+                    this.localList.forEach((item, index) => {
+                        if (arr.length < page) {
+                            arr.push(item);
+                            if (this.localList.length - 1 === index) {
+                                multipleArr.push(arr);
+                            }
+                        } else {
+                            multipleArr.push(arr);
+                            arr = [];
+                            arr.push(item)
+                        }
+                    });
+
+                    this.localList = multipleArr;
+                    return true;
+                }
+            },
+            styles(){
+
+                return {
+
+                    width: `${this.length * this.clientWidth}px`,
+                    height: Object.is(Number.parseInt(this.height), NaN) ? `${this.height}` : `${this.height}px`,
+                    transform: `translate3d(${this.translateX}px,0,0)`
+                }
+            },
+            length(){
+                return this.loop ? this.localList.length + 2 : this.localList.length
+            },
+            currentIndex(){
+
+                return Math.ceil(this.translateX / this.clientWidth)
+            }
+        },
+        methods: {
+
+            choose(item, index,e) {
+                if (item.onClick && typeof item.onClick == 'function') {
+
+                    item.onClick(item, index)
+                } else if(item.link){
+
+                    if (/(https|http)/i.test(item.link)){
+
+                        window.location.href = item.link
+                    } else if(this.$router){
+                        let matchLink = this.$router.match(item.link)
+
+                        if (!!matchLink.matched.length) {
+
+                            e.preventDefault();
+                            this.$router.push(item.link)
+                        }
+                    }
+
+
+                }
+            },
+
+            onLoopSlideLeft(){
+                this.translateX = this.currentTranslateX - this.clientWidth;
+                if (++this.slideIndex > this.maxIndex) {
+                    this.slideIndex--;
+                    this.$refs.wrapper.addEventListener('webkitTransitionEnd', this.resetSlide, false);
+                }
+            },
+            onLoopSlideRight(){
+                this.translateX = this.currentTranslateX + this.clientWidth
+                if (--this.slideIndex < this.minIndex) {
+                    this.slideIndex++;
+                    this.$refs.wrapper.addEventListener('webkitTransitionEnd', this.resetSlideMax, false);
+                }
+            },
+            onSlideLeft(){
+                if (++this.slideIndex > this.maxIndex) {
+                    this.slideIndex--;
+                    this.translateX = this.currentTranslateX
+                } else {
+
+                    this.translateX = this.currentTranslateX - this.clientWidth
+                }
+            },
+
+            onSlideRight(){
+                if (--this.slideIndex < this.minIndex) {
+                    this.slideIndex++;
+                    this.translateX = this.currentTranslateX
+                } else {
+
+                    this.translateX = this.currentTranslateX + this.clientWidth
+                }
+            },
+
+            onTouchStart(e){
+//                e.preventDefault();
+                this.dragging = true;
+                this.autoSwipe = false;
+                this.startX = e.touches[0].clientX;
+                this.currentTranslateX = this.translateX;
+                this.distance = 0;
+
+                if (this.timer && this.auto) {
+                    this.clearTimer();
+                }
+            },
+
+            onTouchMove(e){
+                e.preventDefault();
+                this.currentX = e.touches[0].clientX;
+
+
+                if (this.distanceIndex) this.distance = (this.currentX - this.startX) / this.distanceIndex;
+                else  this.distance = this.currentX - this.startX;
+
+                this.translateX = this.currentTranslateX + this.distance
+
+            },
+
+
+            onTouchEnd(e){
+//                e.preventDefault();
+                if (this.distance < 0 && Math.abs(this.distance) > this.clientWidth / 5) {
+
+                    this.loop && this.auto ? this.onLoopSlideLeft() : this.onSlideLeft()
+
+                } else if (this.distance > 0 && Math.abs(this.distance) > this.clientWidth / 5) {
+
+                    this.loop && this.auto ? this.onLoopSlideRight() : this.onSlideRight()
+
+                } else {
+
+                    this.translateX = this.currentTranslateX
+                }
+                this.dragging = false;
+                this.autoSwipe = true;
+                if (this.auto) {
+                    this.autoSlide()
+                }
+
+            },
+
+            onResize(){
+                this.clientWidth = this.$el.clientWidth;
+                this.clientHeight = getComputedStyle(this.$el.querySelector('.dpzvc-swipe-wrapper')).height;
+            },
+            resetSlide(){
+
+                this.$refs.wrapper.removeEventListener('webkitTransitionEnd', this.resetSlide, false);
+
+                this.slideIndex = this.minIndex;
+                this.autoSwipe = false;
+                this.translateX = -this.slideIndex * this.clientWidth;
+                setTimeout(() => {
+                    this.autoSwipe = true;
+                }, 0)
+
+            },
+
+            resetSlideMax(){
+
+                this.$refs.wrapper.removeEventListener('webkitTransitionEnd', this.resetSlideMax, false);
+                this.slideIndex = this.maxIndex;
+                this.autoSwipe = false;
+                this.translateX = -this.slideIndex * this.clientWidth;
+                setTimeout(() => {
+                    this.autoSwipe = true;
+                }, 0)
+            },
+            autoSlide(){
+
+                this.timer = setTimeout(() => {
+
+
+                        if (!this.dragging && this.autoSwipe) {
+                            this.translateX -= this.clientWidth;
+                            if (++this.slideIndex > this.maxIndex) {
+
+                                this.slideIndex--;
+                                this.$refs.wrapper.addEventListener('webkitTransitionEnd', this.resetSlide, false);
+                            }
+
+                            this.autoSlide();
+                        }
+                    }, this.speed < 1 ? 1000 : this.speed * 1000
+                )
+
+            },
+            clearTimer(){
+
+                if (this.timer) clearTimeout(this.timer);
+                this.timer = null;
+            },
+
+            bindEvent()
+            {
+                this.$refs.wrapper.addEventListener('touchstart', this.onTouchStart, false);
+                this.$refs.wrapper.addEventListener('touchmove', this.onTouchMove, false);
+                this.$refs.wrapper.addEventListener('touchend', this.onTouchEnd, false)
+                window.addEventListener('resize',this.onResize)
+            }
+            ,
+            unbindEvent()
+            {
+                this.$refs.wrapper.removeEventListener('touchstart', this.onTouchStart, false);
+                this.$refs.wrapper.removeEventListener('touchmove', this.onTouchMove, false);
+                this.$refs.wrapper.removeEventListener('touchend', this.onTouchEnd, false)
+                window.removeEventListener('resize',this.onResize)
+            }
+        },
+        mounted()
+        {
+
+            this.clientWidth = this.$el.clientWidth;
+            this.clientHeight = getComputedStyle(this.$el.querySelector('.dpzvc-swipe-wrapper')).height;
+            if (this.auto) this.autoSlide();
+
+            this.bindEvent()
+        }
+        ,
+        beforeDestroy()
+        {
+            this.unbindEvent();
+            this.clearTimer();
+        }
+
+    }
+</script>
+

package/src/components/switchbar/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/5/26.
+ */
+import SwitchBar from './switchbar'
+export default SwitchBar

package/src/components/switchbar/switchbar.vue

@@ -0,0 +1,83 @@
+<template>
+    <div :class="classes">
+        <input type="checkbox" v-model="currentValue" :id="name" :class="inputCheckClasses">
+        <label :for="name" :class="sizeClasses"></label>
+    </div>
+</template>
+
+<script>
+    import {random_str} from '../../utils/util'
+    const prefixCls = 'dpzvc-switch';
+    export default {
+        name:'SwitchBar',
+        props: {
+            id:{
+                type:String,
+            },
+            value:{
+                type:Boolean,
+                default:false
+            },
+            size:{
+                type:String,
+                default:'small',
+                validator(val){
+                    return ['small','large'].indexOf(val) > -1
+                }
+            }
+        },
+        data(){
+            return {
+                name:this.id,
+                currentValue:this.value
+            }
+        },
+        computed:{
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            inputCheckClasses(){
+                return [
+                    `${prefixCls}-checkbox`,
+                    'hidden'
+
+                ]
+            },
+            sizeClasses(){
+                return [
+                    `${prefixCls}-ui`,
+                    {
+                        ['small']:this.size === 'small'
+                    }
+                ]
+            }
+        },
+        mounted(){
+
+            if (!this.id) {
+                this.name = Date.now()+"_"+random_str();
+            }
+
+        },
+        watch:{
+            value(val){
+
+                this.currentValue = val
+
+            },
+
+            id(val){
+               this.name=val
+            },
+
+            currentValue(val){
+
+                this.$emit('input',val)
+
+            }
+
+        }
+    }
+</script>

package/src/components/tab/index.js

@@ -0,0 +1,6 @@
+/**
+ * Created by admin on 2017/5/15.
+ */
+import Tab from './tab.vue'
+
+export default  Tab

package/src/components/tab/tab.vue

@@ -0,0 +1,95 @@
+<template>
+
+        <div :class="classes" v-show="show" :style="getStyles">
+            <ul>
+                <li v-for="(item, index) in items" :key="index">
+                    <template v-if="/(http|https)/i.test(item.path)">
+                        <a :href="item.path" :class="itemClass(item, index)">
+                            <span v-html="getIconHtml(item, index)"></span>
+                            <p>{{item.name}}</p>
+                        </a>
+                    </template>
+
+                    <template v-else>
+                        <router-link tag="a" :to="item.path" :class="itemClass(item, index)">
+                            <slot name="item">
+                                <span v-html="getIconHtml(item, index)"></span>
+                                <p>{{item.name}}</p>
+                            </slot>
+                        </router-link>
+                    </template>
+                </li>
+
+            </ul>
+
+        </div>
+
+
+
+</template>
+
+<script>
+    const prefixCls = 'dpzvc-tab';
+    export default {
+        props: {
+            items: Array,
+            value: {
+                type: Boolean,
+                default: true
+            },
+            index: {
+                type: [Number, String],
+                default: 0
+            },
+            border: {
+                type: Boolean,
+                default: true
+            },
+            styles: {
+                type: Object,
+                default(){
+                    return {}
+                }
+            }
+        },
+        data(){
+            return {
+                show: this.value
+            }
+        },
+        computed: {
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            getStyles() {
+                return Object.assign({}, this.styles)
+            }
+        },
+        watch: {
+            value(val){
+                this.show = val
+            }
+        },
+        methods: {
+            itemClass(item, index) {
+                var _class = [
+                    'tab-item-' + index
+                ];
+
+                if (this.index == index) _class.push('cur');
+
+                return _class;
+            },
+            getIconHtml(item, index) {
+                if (this.index == index) {
+                    return item.iconCur || item.icon;
+                } else {
+                    return item.icon;
+                }
+            }
+        }
+    }
+
+</script>

package/src/components/toTop/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/6/29.
+ */
+import ToTop from './topTop'
+export  default  ToTop

package/src/components/toTop/topTop.vue

@@ -0,0 +1,76 @@
+<template>
+    <div :class="classes" :style="positionStyles" v-show="back" @click="toTop">
+        <slot>
+            <div :class="wrapperClasses"></div>
+        </slot>
+    </div>
+</template>
+
+<script>
+
+    import {scrollTop} from '../../utils/util'
+    const prefixCls = 'dpzvc-toTop';
+    export default {
+        name:'toTop',
+        props:{
+            distance:{
+                type:Number,
+                default:200
+            },
+            bottom:{
+                type:[Number,String],
+                default:30
+            },
+            right:{
+                type:[Number,String],
+                default:30
+            },
+            duration:{
+                type:Number,
+                default:1000
+            }
+        },
+        data(){
+            return {
+                back:false
+            }
+        },
+        methods:{
+            toTop(){
+
+                scrollTop(window,window.pageYOffset,0,this.duration)
+            },
+            scroll(){
+                this.back = window.pageYOffset > this.distance
+            }
+        },
+        mounted(){
+            window.addEventListener('scroll',this.scroll,false);
+            window.addEventListener('resize',this.scroll,false);
+        },
+        beforeDestroy(){
+            window.removeEventListener('scroll',this.scroll,false);
+            window.removeEventListener('resize',this.scroll,false);
+        },
+        computed:{
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+
+            },
+            wrapperClasses(){
+                return [
+                    `${prefixCls}-wrapper`
+                ]
+
+            },
+            positionStyles(){
+                return {
+                    'bottom':this.bottom+'px',
+                    'right':this.right+'px'
+                }
+            }
+        }
+    }
+</script>

package/src/components/upload/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/5/26.
+ */
+import Upload from './upload'
+export default Upload