dpzvc-ui 1.0.0

package/src/components/Indicator/index.js

@@ -0,0 +1,153 @@
+/**
+ * Created by admin on 2017/6/22.
+ */
+import Indicator from './Indicator'
+import {camelcaseToHyphen} from '../../utils/util'
+import Vue from 'vue'
+let instance;
+
+Indicator.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);
+
+    let indicator = new Vue({
+        el: div,
+        template: `<Indicator ${props} v-model="visible" ></Indicator>`,
+        components: {
+            Indicator
+        },
+        data: Object.assign(_props, {
+            visible: false,
+            size: 45,
+            type: 'snake',
+            color: '#ffffff',
+            text: '加载中...',
+            onRemove:function(){}
+
+        }),
+        methods: {
+            remove() {
+                this.$children[0].visible = false;
+                setTimeout(() => {
+                    this.destroy();
+                }, 300)
+            },
+            destroy(){
+
+                this.$destroy();
+
+                // if (!this.$el) return;
+                document.body.removeChild(this.$el);
+                this.onRemove()
+            }
+        }
+    }).$children[0];
+
+
+    return {
+        open(options){
+
+            indicator.$parent.visible = true;
+            indicator.$parent.onRemove = options.onRemove;
+
+
+            if ('size' in options) {
+                indicator.$parent.size = options.size;
+            }
+
+            if ('type' in options) {
+                indicator.$parent.type = options.type;
+            }
+
+            if ('color' in options) {
+                indicator.$parent.color = options.color;
+            }
+
+            if ('text' in options) {
+                indicator.$parent.text = options.text;
+            }
+
+        },
+
+        remove(){
+
+            indicator.visible = false;
+
+            indicator.$parent.remove()
+
+        },
+        component: indicator
+    }
+};
+
+
+function confirm(options) {
+    instance = instance || Indicator.newInstance({
+            size: 45,
+            color: '#ffffff',
+            text: '正在加载...',
+            type: 'snake'
+        });
+
+    options.onRemove = function () {
+        instance = null;
+    }
+
+    instance.open(options)
+
+}
+
+
+Indicator.blade = function (props = {}) {
+
+    props.type = 'blade';
+    return confirm(props)
+}
+
+
+Indicator.snake = function (props = {}) {
+
+    props.type = 'snake';
+    return confirm(props)
+}
+
+Indicator.circle = function (props = {}) {
+
+    props.type = 'fading-circle';
+    return confirm(props)
+}
+
+Indicator.bounce = function (props = {}) {
+
+    props.type = 'double-bounce';
+    return confirm(props)
+}
+
+Indicator.remove = function () {
+
+
+    if (!instance) return false;
+
+     instance = instance || Indicator.newInstance({
+            size: 45,
+            color: '#ffffff',
+            text: '正在加载...',
+            type: 'snake'
+        })
+
+    instance.remove()
+}
+
+
+export default  Indicator

package/src/components/Text/Number.vue

@@ -0,0 +1,201 @@
+<template>
+
+    <div :class="classes" :style="containerStyle">
+        <div :class="reduceClasses" :style="getChangeStyle" @click="change('reduce',downDisabled)">
+            <slot name="reduce">-</slot>
+        </div>
+        <div :class="wrapperClasses">
+            <input type="number"
+                   :style="inputStyle"
+                   :min="min"
+                   :max="max"
+                   :step="step"
+                   :value="currentValue"
+                   :autocomplete:="autocomplete"
+                   @input="changeInput"
+                   @focus="focusInput"
+                   @blur="blurInput"
+                   @change="onChangeInput"
+                   @keyup.38="change('reduce',downDisabled)"
+                   @keyup.40="change('add',upDisabled)"
+            />
+        </div>
+        <div :class="addtionClasses" :style="getChangeStyle" @click="change('add',upDisabled)">
+            <slot name="add">+</slot>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    import Input from '../../mixin/input'
+    const prefixCls = 'dpzvc-number';
+    export default {
+        name:'Number',
+        mixins:[Input],
+        props: {
+            min: {
+                type: [Number, String],
+                default: -Infinity
+            },
+            max: {
+                type: [Number, String],
+                default: Infinity
+            },
+            value: [Number, String],
+            step: {
+                type: Number,
+                default: 1
+            },
+
+            width:{
+                type:Number,
+                default:60
+            },
+            height: {
+                type: Number,
+                default: 35
+            },
+            numberStyle:{
+                type:Object,
+                default(){
+                    return {}
+                }
+            },
+            containerStyle:{
+                type:Object,
+                default(){
+                    return {}
+                }
+            },
+
+
+        },
+        data(){
+            return {
+                upDisabled: this.disabled,
+                downDisabled: this.disabled,
+                currentValue: this.value
+            }
+        },
+        mounted(){
+            this.changeVal(this.currentValue)
+        },
+        methods: {
+            changeInput(e){
+                let val = e.target.value.trim();
+                const min = this.min;
+                const max = this.max;
+                val < min ? val = min : val = val;
+                val > max ? val = max : val = val;
+                this.setValue(val);
+                e.target.value = this.currentValue;
+                this.$emit('on-input',e)
+            },
+            setValue(val){
+                this.currentValue = val;
+                this.$emit('input', val)
+            },
+            changeVal (val) {
+                if (!isNaN(val) || val === 0) {
+                    val = Number(val);
+                    const step = this.step;
+
+                    this.upDisabled = val + step > this.max;
+                    this.downDisabled = val - step < this.min;
+                } else {
+                    this.upDisabled = true;
+                    this.downDisabled = true;
+                }
+            },
+            change (type,disabled){
+
+                if (this.disabled) return false;
+
+                const val = Number(this.currentValue);
+
+                const step = this.step;
+
+                if (isNaN(val)) return false;
+
+                if (type == 'reduce' && !disabled) {
+
+                    let distance = val - step;
+
+                    distance < this.min ? distance = this.min : distance = distance;
+
+                    this.setValue(distance)
+                } else if (type == 'add' && !disabled) {
+
+                    let distance = val + step;
+
+                    distance > this.max ? distance = this.max : distance = distance;
+
+                    this.setValue(distance)
+                }
+
+            }
+
+
+        },
+        computed: {
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            reduceClasses(){
+                return [
+                    `${prefixCls}-changevalue`,
+                    'left',
+                    {
+                        ['disabled']:this.downDisabled
+                    }
+                ]
+            },
+            addtionClasses(){
+                return [
+                    `${prefixCls}-changevalue`,
+                    'right',
+                    {
+                        ['disabled']:this.upDisabled
+                    }
+                ]
+            },
+            wrapperClasses(){
+                return [
+                    `${prefixCls}-wrapper`
+                ]
+            },
+
+            getChangeStyle(){
+
+                return {
+                    width: `${this.height}px`,
+                    height: `${this.height}px`,
+                    lineHeight:`${this.height}px`,
+                }
+            },
+            inputStyle(){
+                return Object.assign({},this.numberStyle,{
+                    width:`${this.width}px`,
+                    height:`${this.height}px`,
+
+                })
+            }
+
+        },
+
+        watch: {
+            value(val){
+                this.currentValue = val;
+
+            },
+            currentValue(val){
+                this.changeVal(val);
+            },
+
+        }
+    }
+</script>
+

package/src/components/Text/index.js

@@ -0,0 +1,7 @@
+/**
+ * Created by admin on 2017/5/24.
+ */
+import Text from './textBar';
+import Number from './Number'
+Text.Number = Number;
+export  default Text

package/src/components/Text/textBar.vue

@@ -0,0 +1,142 @@
+<template>
+    <div :class="classes" :style="styles">
+        <label :class="inputClasses" :style="inputStyles" v-if="type !== 'textarea'">
+            <input
+                    :type="type"
+                    :autofocus="autofocus"
+                    :value="currentVal"
+                    :placeholder="placeholder"
+                    :readonly="readonly"
+                    :maxlength="maxlength"
+                    :autocomplete="autocomplete"
+                    :name="name"
+                    :disabled="disable"
+                    @input="changeInput"
+                    @blur="blurInput"
+                    @focus="focusInput"
+                    @keyup.enter="enterInput"
+                    @change="onChangeInput"
+            />
+        </label>
+
+        <label :class="textareaClasses" v-else>
+            <textarea
+                    :type="type"
+                    :autofocus="autofocus"
+                    :value="currentVal"
+                    :placeholder="placeholder"
+                    :readonly="readonly"
+                    :maxlength="maxlength"
+                    :name="name"
+                    :rows="rows"
+                    :disabled="disable"
+                    @input="changeInput"
+                    @blur="blurInput"
+                    @focus="focusInput"
+                    @keyup.enter="enterInput"
+                    @change="onChangeInput">
+
+            </textarea>
+        </label>
+    </div>
+</template>
+
+<script>
+    const prefixCls = 'dpzvc-textBar';
+    import Input from '../../mixin/input'
+    export default {
+        name: 'TextBar',
+        mixins:[Input],
+        props: {
+            rows:{
+                type:Number,
+            },
+            autofocus:{
+                type:Boolean,
+                default:true
+            },
+
+            type:{
+                type:String,
+                default:'text'
+            },
+            value: {
+                type: [String, Number],
+                default:''
+            },
+
+            placeholder:{
+                type:[String,Number],
+                default:'请输入'
+            },
+            inputStyles:{
+                type:Object,
+
+            },
+            maxlength:{
+                type:Number
+            },
+            name:String,
+            readonly:{
+                type:Boolean,
+                default:false
+            },
+
+        },
+        data(){
+            return {
+                currentVal:   this.value,
+            }
+        },
+        computed:{
+            classes(){
+
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            inputClasses(){
+                return [
+                    `${prefixCls}-input`
+                ]
+            },
+            textareaClasses(){
+                return [
+                    `${prefixCls}-textarea`
+                ]
+            }
+        },
+
+        mounted(){
+
+        },
+        methods:{
+            changeInput(e){
+                this.currentVal =  e.target.value;
+
+                this.$emit('input',this.currentVal);
+                this.$emit('on-input',e)
+            },
+
+
+            enterInput(e){
+                this.$emit('on-enter',e)
+            },
+
+
+
+        },
+        watch: {
+            value(val){
+                this.currentVal =  val
+            },
+            currentVal(val){
+
+                this.$emit('input', val);
+                this.$emit('on-input',val);
+            },
+
+        }
+    }
+</script>
+

package/src/components/action-sheet/actionSheet.vue

@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <Popup position="bottom"   v-model="visible" :styles="{background:'transparent'}">
+            <div :class="classes" >
+                <ul :class="wrapperClasses">
+                    <li :class="wrapperActionClass" v-for="(item,key) in actions" @click="emit(item,key)"><span>{{item.text}}</span></li>
+                </ul>
+                <a href="javascript:;" :class="cancleClass"  @click="visible = false" v-if="cancleText">{{cancleText}}</a>
+            </div>
+        </Popup>
+    </div>
+
+</template>
+
+<script>
+
+    import Popup from '../popup'
+    const prefixCls = 'dpzvc-actionSheet';
+
+    export default {
+        name:'action-sheet',
+        props:{
+            value:{
+                type:Boolean,
+                default:false
+            },
+            items:Array,
+            cancleText:{
+                type:String,
+                default:'取消'
+            }
+        },
+
+        data(){
+            return {
+                actions:this.items,
+                visible:this.value,
+            }
+        },
+        computed:{
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            wrapperClasses(){
+                return [
+                    `${prefixCls}-wrapper`
+                ]
+            },
+            wrapperActionClass(){
+                return [
+                    `${prefixCls}-wrapper-action`
+                ]
+            },
+            cancleClass(){
+                return [
+                    `${prefixCls}-cancle`
+                ]
+            }
+        },
+
+        methods:{
+            emit(item,index){
+
+                if (item.onClick && typeof item.onClick == 'function') {
+                    item.onClick(item,index);
+                }
+
+                this.visible = false;
+            },
+
+
+        },
+        watch:{
+            value(val){
+                this.visible = val
+            },
+
+            visible(val){
+                this.$emit('input',val)
+            }
+        },
+        components:{
+            Popup
+        }
+
+
+
+    }
+</script>

package/src/components/action-sheet/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/5/19.
+ */
+import ActionSheet from './actionSheet'
+export default  ActionSheet;

package/src/components/app.vue

@@ -0,0 +1,66 @@
+
+<style rel="stylesheet/less" lang="less">
+    // @import '../styles/common.css';
+
+    // @import '../../src/styles/index';
+     @import '../styles/index.less';
+
+    .page{
+        position: relative;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    html,body {
+        height: 100%;
+    }
+
+    #app {
+        height: 100%;
+    }
+</style>
+<template>
+    <div id="app">
+        <transition :name="direction">
+
+            <router-view   class="page"></router-view>
+
+        </transition>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                direction:'dpzvc-ani-fade'
+            }
+        },
+        mounted () {
+
+        },
+        watch:{
+            $route(to,from){
+
+                let toDepth = to.path.split('/').length;
+                let fromDepth = from.path.split('/').length;
+
+                if (toDepth == fromDepth) {
+                    this.direction = 'dpzvc-ani-fade'
+                } else if(toDepth > fromDepth) {
+                    this.direction = 'dpzvc-ani-left'
+                } else {
+                    this.direction = 'dpzvc-ani-right';
+                }
+            }
+        },
+        beforeDestroy () {
+
+        },
+        methods: {
+
+        },
+    }
+</script>
+