dpzvc-ui 1.0.0

package/src/components/picker/picker-slot.vue

@@ -0,0 +1,206 @@
+<template>
+    <div :class="classes" :style="styles">
+        <ul :class="draggingClass" :style="{transform:`translate3d(0,${translateY}px,0)`}" @touchstart="_onTouchStart"
+            @touchmove="_onTouchMove" @touchend="_onTouchEnd">
+
+            <li :style="{height:height+'px'}"></li>
+            <li :style="{height:height+'px'}"></li>
+            <li v-for="(item,index) in list" :class="{'current':index == current.index,
+                                                'level_1_1':index - current.index == 1,
+                                                'level_2_1':index - current.index == 2,
+                                                'level_3_1':index - current.index >= 3,
+                                                'level_1':index - current.index == -1,
+                                                'level_2':index - current.index == -2,
+                                                'level_3':index - current.index <= -3}"
+                :style="{textAlign:align,height:height+'px'}">{{item.value}}
+
+
+
+            </li>
+            <li :style="{height:height+'px'}"></li>
+            <li :style="{height:height+'px'}"></li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    import {findComponentUpward} from '../../utils/util'
+    const prefixCls = 'dpzvc-picker-slot';
+
+    export default {
+        data(){
+            return {
+                count: 7, //默认显示行数
+                height: 35,
+                current: {},
+                translateY: 0,
+                currentTranslateY: 0,
+                dragging: false,
+                startX: 0,
+                startY: 0,
+                delta: {x: 0, y: 0},
+            }
+        },
+        watch: {
+            list(value){
+
+                if (value.length) {
+                    let index = this.getSelectedIndex();
+                    if (!value.length > index - 1) index = 0
+                    console.warn(value[index])
+                    this.current = Object.assign({}, this.current, value[index]);
+                    this.$emit('change', this.target, this.current)
+                } else {
+                    this.translateY = 0;
+                }
+
+            },
+            initItem(value){
+
+                if (!value) {
+                    this.current = Object.assign({}, this.current, {
+                        code: '',
+                        target: this.target,
+                        index: '',
+                        value: ''
+                    });
+                    this.$emit('change', this.target, this.current)
+                } else {
+                    this.scrollToItem(value)
+                }
+            }
+
+
+        },
+
+        mounted(){
+            if (!this.initItem && this.initItem !== 0) {
+
+                this.current = Object.assign({}, this.current, {code: '', target: this.target, index: '', value: ''});
+                this.$emit('change', this.target, this.current)
+            } else {
+
+                this.scrollToItem(this.initItem)
+            }
+
+
+        },
+        props: {
+            styles: Object,
+            list: {
+                type: Array,
+                default: () => []
+            },
+            align: {
+                type: String,
+                default: 'center'
+            },
+            target: {
+                type: String,
+                required: true
+            },
+            initItem: {
+                type: [String, Number],
+                default: ''
+            }
+        },
+        computed: {
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            draggingClass(){
+                return [
+                    {
+                        [`${prefixCls}-dragging`]: this.dragging
+                    }
+                ]
+            },
+            wrapperHeight: {
+                get(){
+                    return this.count * this.height;
+                }
+            },
+            getStyles(){
+                let styles = this.styles;
+
+                if (styles.height) {
+
+                    this.height = styles.height / this.count
+                }
+
+                return Object.assign({}, styles, {height: this.wrapperHeight})
+            }
+        },
+        methods: {
+            _onTouchStart(e){
+                e.preventDefault();
+                e.stopPropagation();
+                this.currentTranslateY = this.translateY;
+                this.startX = e.touches[0].pageX;
+                this.startY = e.touches[0].pageY;
+                this.dragging = true;
+            },
+
+            _onTouchMove(e){
+                e.preventDefault();
+                e.stopPropagation();
+                this.delta.x = e.touches[0].pageX - this.startX;
+                this.delta.y = e.touches[0].pageY - this.startY;
+                this.translateY = this.delta.y + this.currentTranslateY;
+            },
+            _onTouchEnd(e){
+                e.preventDefault();
+                e.stopPropagation();
+                this.dragging = false;
+                this.currentTranslateY = this.translateY;
+                let index = this.getSelectedIndex();
+                this.setSelectedItem(index);
+            },
+            getSelectedIndex(){
+                let height = this.height;
+                let maxIndex = this.list.length - 1;
+                let index = -Math.round(this.currentTranslateY / height);
+                index = Math.max(index, 0);
+                index = Math.min(index, maxIndex);
+                return index;
+            },
+            setSelectedItem(index){
+
+                this.translateY = this.currentTranslateY = -index * this.height;
+                try {
+                    if (this.current.code ===  this.list[index].code && this.current.value === this.list[index].value) {
+                        return
+                    }
+                    this.current = Object.assign({}, this.current, {
+                        code: this.list[index].code,
+                        value: this.list[index].value,
+                        target: this.target,
+                        index: index
+                    });
+
+                } catch (e) {
+
+                    this.current = Object.assign({}, this.current, {
+                        code: '',
+                        value: '',
+                        target: this.target,
+                        index: ''
+                    });
+                }
+                this.$emit('change', this.target, this.current);
+
+            },
+            scrollToItem (code){
+                this.list.forEach((item, i) => {
+                    let currentCode = item.code;
+                    if (currentCode == code) {
+                        this.currentTranslateY = this.translateY;
+                        this.setSelectedItem(i)
+                    }
+                })
+            }
+        }
+    }
+</script>

package/src/components/picker/picker.vue

@@ -0,0 +1,111 @@
+<template>
+    <Popup height="284px" position="bottom" v-model="visible">
+        <div :class="wrapperClass">
+            <div :class="contentClass">
+                <Area-picker v-if="type==='AreaPicker'"
+                             :styles="styles"
+                             :value-separator="valueSeparator"
+                             :address-value="addressValue"
+                >
+
+                </Area-picker>
+
+                <Date-picker v-if="type==='DatePicker'"
+                             :year="year" :month="month" :day="day"
+                             :value-separator="valueSeparator"
+                             :date-value="dateValue"
+                >
+
+                </Date-picker>
+
+                <Normal-picker v-if="type==='NormalPicker'"
+                               :list="list"
+                               :init-arr="initArr">
+                </Normal-picker>
+            </div>
+        </div>
+    </Popup>
+</template>
+
+<script>
+
+    import  areaProps  from './area-picker/props'
+    import  dateProps  from './date-picker/props'
+    import normalProps from './normal-picker/props'
+    import Popup from '../popup'
+    import AreaPicker from './area-picker/area-picker.vue';
+    import DatePicker from './date-picker/date-picker.vue';
+    import NormalPicker from './normal-picker/normal-picker.vue';
+    const LIST = ['DatePicker', 'AreaPicker', 'NormalPicker'];
+    const prefixCls = 'dpzvc-picker';
+    export default {
+        name: 'Picker',
+        props: {
+            type: {
+                type: String,
+                default: 'DatePicker',
+                validator(val){
+                    return LIST.indexOf(val) > -1
+                }
+            },
+            value: {
+                type: Boolean,
+                default: false
+            }
+        },
+        mixins: [areaProps, dateProps, normalProps],
+        data(){
+            return {
+                visible: this.value,
+            }
+
+        },
+        created(){
+            this.$on('ok', (val) => {
+
+                this.visible = false;
+                this.$emit('sure', val)
+            });
+
+
+            this.$on('fail', () => {
+                this.visible = false;
+                this.$emit('cancle')
+            })
+
+            this.$on('scroll', (val) => {
+                this.$emit('normal-change',val)
+            })
+        },
+        mounted(){
+//            console.log(DatePicker)
+        },
+
+        components: {
+            AreaPicker,
+            DatePicker,
+            NormalPicker,
+            Popup
+        },
+        watch: {
+            value(val){
+                this.visible = val
+            },
+            visible(val){
+                this.$emit('input', val)
+            }
+        },
+        computed: {
+            wrapperClass(){
+                return [
+                    `${prefixCls}-wrapper`
+                ]
+            },
+            contentClass(){
+                return [
+                    `${prefixCls}-content`
+                ]
+            }
+        }
+    }
+</script>

package/src/components/popup/index.js

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

package/src/components/popup/popup.vue

@@ -0,0 +1,117 @@
+<template>
+    <div :class="classes" >
+        <transition name="dpzvc-ani-fade">
+            <div class="dpzvc-popup-mask"   v-show="visible" @click="close" v-if="mask"  @touchmove.prevent ></div>
+        </transition>
+        <transition :name="'dpzvc-ani-'+position" >
+            <div  v-show="visible" :class="popupClasses" :style="contentStyle">
+                <slot></slot>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+
+    const prefixCls = 'dpzvc-popup';
+    export default {
+        props:{
+            value:{
+                type:Boolean,
+                default:false
+            },
+            position:{
+                type:String,
+                default:'bottom'
+            },
+            showMask:{
+                type:Boolean,
+                default:true
+            },
+            maskClosable:{
+                type:Boolean,
+                default:true
+            },
+            width:{
+                type:[Number,String],
+                default:'100%'
+            },
+            height:{
+                type:[Number,String]
+            },
+            styles:{
+                type:Object,
+                default(){
+                    return {}
+                }
+            }
+
+        },
+        computed:{
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            popupClasses(){
+                return [
+                    `${prefixCls}-${this.position}`,
+                    `${prefixCls}-content`
+                ]
+            },
+            contentStyle(){
+
+                let height = '';
+
+                if (this.height != null) {
+                    height = this.height
+                } else {
+                    switch(this.position) {
+                        case 'top':
+                            height = 'auto';
+                            break;
+                        default:
+                            height = '100%'
+                    }
+                }
+
+
+                return Object.assign({},this.styles,{
+                    width:this.width,
+                    height:height,
+
+                })
+            }
+        },
+        methods:{
+            close(){
+                if (this.maskClosable && this.showMask) this.visible = false
+            }
+        },
+        data(){
+            return {
+                visible:this.value,
+                mask:this.showMask
+            }
+        },
+        watch:{
+            value(val){
+                this.visible = val
+            },
+            visible(val){
+                this.$emit('input',val)
+            },
+            showMask(val){
+                this.mask = val
+            },
+            mask(val){
+                switch (this.position) {
+                    case 'top':
+                        return false;
+                    default:
+                        return val
+                }
+            }
+        }
+    }
+</script>

package/src/components/progress/index.js

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

package/src/components/progress/progress.vue

@@ -0,0 +1,77 @@
+<template>
+    <div :class="classes" :style="styles">
+        <slot name="left"></slot>
+        <div :class="outerClass">
+            <div :class="runawayClass" :style="runawayStyle"></div>
+            <div :class="progressClass" :style="progressStyle"></div>
+        </div>
+        <slot name="right"></slot>
+    </div>
+</template>
+
+<script>
+
+    const prefixCls = 'dpzvc-progress'
+    export default {
+        name:'progress',
+
+        props:{
+            styles:{
+                type:Object,
+                default(){
+                    return {}
+                }
+            },
+            value:{
+                type:[Number,String],
+                default:'0',
+            },
+            barHeight:{
+                type:[String,Number],
+                default:'3'
+            },
+
+        },
+        data(){
+            return {
+                width:this.value
+            }
+
+        },
+        computed:{
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            outerClass(){
+                return [
+                    `${prefixCls}-outer`
+                ]
+            },
+            runawayClass(){
+                return [
+                    `${prefixCls}-runaway`
+                ]
+            },
+            progressClass(){
+                return [
+                    `${prefixCls}-progress`
+                ]
+            },
+            runawayStyle(){
+                return {height:this.barHeight+'px'}
+            },
+            progressStyle(){
+                return {height:this.barHeight+'px',width:this.width+'%'}
+            }
+        },
+        watch:{
+            value(val){
+               this.width =  val >= 100 ?  100 : val
+            }
+        }
+
+
+    }
+</script>

package/src/components/prompt/confirm.js

@@ -0,0 +1,174 @@
+/**
+ * Created by admin on 2017/5/10.
+ */
+import Prompt from '../prompt/prompt.vue'
+import Vue from 'vue'
+
+import {camelcaseToHyphen} from '../../utils/util'
+
+const prefixCls = 'v-lc-modal';
+
+Prompt.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 propmt = new Vue({
+        el: div,
+
+        template: `<Prompt ${props} v-model="visible" 
+                                    :width="width" 
+                                    :text="text" 
+                                    :title="title" 
+                                    :ok-text="okText" 
+                                    :cancle-text="cancleText" 
+                                    :loading="loading" 
+                                    :spec="spec" 
+                                    :message="message" 
+                                    :validator="validator"
+                                    :on-ok="onOk" 
+                                    :on-cancle="onCancle"> </Prompt>`,
+        components: {
+            Prompt
+        },
+        data: Object.assign(_props, {
+            text:'',
+            placeholderText: '请输入',
+            visible: false,
+            width: '70%',
+            title: '',
+            okText: '确定',
+            cancleText: '取消',
+            loading: false,
+            showCancle: true,
+            spec: '',
+            message: '',
+            validator: null,
+            onOk:function(){},
+            onCancle:function(prop){},
+            onRemove:function(){}
+        }),
+        methods: {
+            cancle(){
+                this.$children[0].visible = false;
+                this.onCancle();
+                this.remove();
+            },
+            ok(){
+                if (this.loading) {
+                    this.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()
+            },
+            mounted(){
+
+
+            },
+        }
+    }).$children[0]
+
+
+    return {
+
+        show(props){
+
+            propmt.$parent.showCancle = props.showCancle;
+            propmt.$parent.onRemove = props.onRemove;
+            propmt.visible = true;
+
+            if ('width' in props) {
+                propmt.$parent.width = props.width
+            }
+
+            if ('text' in props) {
+                propmt.$parent.text = props.text
+            }
+
+            if ('spec' in props) {
+                propmt.$parent.spec = props.spec
+            }
+
+            if ('title' in props) {
+
+                propmt.$parent.title = props.title
+            }
+
+
+
+            if ('placeholderText' in props) {
+                propmt.$parent.placeholderText = props.placeholderText
+            }
+
+            if ('content' in props) {
+                propmt.$parent.body = props.body
+            }
+
+
+            if ('okText' in props) {
+                propmt.$parent.okText = props.okText
+            }
+
+            if ('cancleText' in props) {
+                propmt.$parent.cancleText = props.cancleText
+            }
+
+            if ('onCancle' in props) {
+                propmt.$parent.onCancle = props.onCancle
+            }
+
+            if ('onOk' in props) {
+                propmt.$parent.onOk = props.onOk
+            }
+
+            if ('loading' in props) {
+                propmt.$parent.loading = props.loading
+            }
+
+            if ('message' in props) {
+                propmt.$parent.message = props.message
+            }
+
+            if ('validator' in props) {
+                propmt.$parent.validator = props.validator
+            }
+
+            console.log(propmt.$parent)
+        },
+        remove () {
+
+            propmt.visible = false;
+            propmt.$parent.buttonLoading = false;
+            propmt.$parent.remove();
+
+        },
+        component: propmt
+    }
+};
+
+export default  Prompt;