dpzvc-ui 1.0.0

package/src/views/Message.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="Message">
+        <VButton width="50%" @click="showMessageTop">
+            Top
+        </VButton>
+        <VButton width="50%" @click="showMessage">
+            Center
+        </VButton>
+        <VButton width="50%" @click="showMessageBottom">
+            Bottom
+        </VButton>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "message",
+       methods:{
+            showMessage(){
+                this.$Message.show({text: '显示消息'});
+
+            },
+            showMessageTop(){
+                this.$Message.show({text: '显示消息',position:'top'});
+            },
+           showMessageBottom(){
+               this.$Message.show({text: '显示消息',position:'bottom'});
+           }
+       }
+
+    }
+</script>
+
+<style scoped>
+    .Message {
+        height: 100%;
+        display: flex;
+        justify-content: space-around;
+        flex-direction: column;
+        align-items: center;
+    }
+</style>

package/src/views/Modal.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="Modal">
+        <VButton width="50%" @click="showInfo">info</VButton>
+        <VButton width="50%" @click="showConfirm">confirm</VButton>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "modal",
+        methods:{
+            showInfo(){
+                this.$Modal.info({body:'这是内容',onOk:function(){EventBus.$Message.show({text:'点击了确定'})},onCancle:function () {
+                        EventBus.$Message.show({text:'点击了取消'})
+                    }})
+            },
+            showConfirm(){
+                this.$Modal.confirm({body:'这是内容',onOk:function(){EventBus.$Message.show({text:'点击了确定'})},})
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .Modal {
+        height: 100%;
+        display: flex;
+        justify-content: space-around;
+        flex-direction: column;
+        align-items: center;
+    }
+</style>

package/src/views/Picker.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="Picker">
+        <Picker type="AreaPicker"  v-model="AreaVisible"  @sure="pickerSure" @cancle="pickerCancle" ></Picker>
+        <Picker type="DatePicker" date-value="2018/1/1"  v-model="DateVisible"  @sure="pickerSure" @cancle="pickerCancle" ></Picker>
+
+        <div class="item">
+            <VButton width="40%" @click="DateVisible = true">日期选择器</VButton>
+            <VButton width="40%" @click="AreaVisible = true">地区选择器</VButton>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "picker",
+        data(){
+            return {
+                AreaVisible:false,
+                DateVisible:false
+            }
+        },
+        methods:{
+            pickerSure(value){
+                console.log(value)
+                this.$Modal.confirm({body: value.formArea || value.formatDate,});
+            },
+            pickerCancle(){
+                this.$Message.show({text: '您选择了取消'});
+            },
+
+            //TODO    NormalPicker
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .Picker {
+        position: relative;
+        height: 100%;
+
+        .item {
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            padding: 50px 0;
+        }
+    }
+</style>

package/src/views/Popup.vue

@@ -0,0 +1,87 @@
+
+<template>
+    <div class="Popup">
+        <VButton width="50%" @click.native="showPop('top')">
+            Top
+        </VButton>
+        <VButton width="50%" @click.native="showPop('right')">
+            Right
+        </VButton>
+        <VButton width="50%" @click.native="showPop('bottom')">
+            Bottom
+        </VButton>
+        <VButton width="50%" @click.native="showPop('left')">
+            Left
+        </VButton>
+
+
+        <Popup v-model="show" :position="side" :width="width" :height="height" show-mask="">
+
+        </Popup>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        name: "popup",
+        data(){
+            return {
+                side:'top',
+                show:false,
+                sideList:['top','right','bottom','left'],
+                width:'100%',
+                height:'100%'
+            }
+        },
+
+        methods:{
+            showPop(side){
+                this.show = false
+                this.$nextTick(()=>{
+
+                    if (this.sideList.indexOf(side) < 0) side = 'top'
+
+                    switch (side){
+                        case 'top':
+                            this.width = '100%'
+                            this.height = 0
+                            break
+                        case 'right':
+                            this.width = '70%'
+                            this.height = '100%'
+                            break
+                        case 'bottom':
+                            this.width = '100%'
+                            this.height = '70%'
+                            break;
+                        case 'left':
+                            this.width = '70%'
+                            this.height = '100%'
+                            break
+                    }
+
+
+                    this.side = side
+
+
+                    setTimeout(()=>{
+                        this.show = true
+                    },350)
+                })
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+    .Popup {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+    }
+</style>

package/src/views/Progress.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="Progress">
+        <Progress v-model="progress" :barHeight="barHeight"></Progress>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "progress",
+        data(){
+            return {
+                progress:0,
+                barHeight:5
+            }
+        },
+        mounted(){
+            var timer = setInterval(()=>{
+                this.progress+= 1
+                if (this.progress >= 100)  {
+                    clearInterval(timer)
+                    time = null
+                }
+            },100)
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .Progress {
+        padding-top: 50px;
+    }
+</style>

package/src/views/Prompt.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="Prompt">
+        <VButton width="50%" @click="showPrompt">弹出Prompt</VButton>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "prompt",
+        data(){
+            return {
+
+            }
+        },
+        methods:{
+            showPrompt(){
+                this.$Prompt.info({title:'Prompt',spec:'ccc',text:'vvvv'})
+            }
+        }
+
+    }
+</script>
+
+<style lang="less" scoped>
+    .Prompt {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+    }
+</style>

package/src/views/RadioBox.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="RadioBox">
+        <p>radio组合</p>
+        <div class="item">
+            <Radio-group v-model="radio" >
+                <Radio label="中国"></Radio>
+                <Radio label="美国"></Radio>
+                <Radio label="日本"></Radio>
+            </Radio-group>
+        </div>
+
+        <div class="item">value:{{radio}}</div>
+        <p>单个Radio</p>
+        <Radio  label="苹果" v-model="checked"></Radio>
+        <div class="item">checked:{{checked}}</div>
+        <p>禁用的Radio</p>
+        <div class="item"><Radio label="玩具" disable></Radio></div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        name: "radio-box",
+        data(){
+            return {
+                checked:false,
+                radio:'',
+
+                visible: true,
+                Radioed:false
+            }
+        },
+
+    }
+</script>
+
+<style lang="less" scoped>
+    .RadioBox {
+        padding-top: 100px;
+        p {
+            width: 100%;
+            font-weight: bold;
+            font-size: 16px;
+            margin: 20px 0;
+        }
+
+        .item{
+            width: 100%;
+            display: flex;
+            justify-content: center;
+
+        }
+    }
+</style>

package/src/views/Rater.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="Rater">
+        <p>可点击评分</p>
+        <Rater v-model="rate"></Rater>
+        <span>{{rate}}</span>
+        <p>不可点击评分</p>
+        <Rater v-model="disabledRate" disabled></Rater>
+        <span>{{disabledRate}}</span>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "rater",
+        data(){
+            return {
+                rate:0,
+                disabledRate:4.5
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .Rater {
+        width: 100%;
+        padding-top: 50px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        p {
+            text-indent: 10px;
+            font-weight: bold;
+            font-size: 14px;
+            margin: 10px 0;
+        }
+    }
+</style>

package/src/views/SlideBar.vue

@@ -0,0 +1,47 @@
+<template>
+    <div clas="SlideBar">
+        <Slide-bar :list="items" :flex="false" index="1" :can-drag="false" height="100%" scroll-height='50px'
+                   :is-fixed-header="true">
+
+            <div slot="slot-item-0" style="height:100%;flex: 1;background:red;overflow: scroll">
+                <div style="height: 40px;width: 100%;background-color: blue;"></div>
+                <div style="height: 40px;width: 100%;background-color: blue;"></div>
+                <div style="height: 40px;width: 100%;background-color: blue;"></div>
+                <div style="height: 40px;width: 100%;background-color: blue;"></div>
+                <div style="height: 40px;width: 100%;background-color: blue;"></div>
+            </div>
+            <div slot="slot-item-1" style="height:200px;flex: 1;background:yellow">
+
+            </div>
+            <div slot="slot-item-2" style="height:200px;flex: 1;background:black"></div>
+        </Slide-bar>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "slide-bar",
+        data(){
+            return {
+                items:[{
+
+                    name: "选项一",
+
+                }, {
+                    name: "选项二",
+
+                }, {
+                    name: "选项三",
+
+                }
+                ]
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .SlideBar {
+        width: 100%;
+    }
+</style>

package/src/views/Spinner.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="Spinner">
+       <Spinner />
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "spinner"
+    }
+</script>
+
+<style scoped>
+
+</style>

package/src/views/Swipe.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="swipe">
+        <Swipe :multiple="false" :list="files">
+            <template slot-scope="props">
+
+                <div>
+                    <img :src="props.item.image"/>
+                </div>
+
+            </template>
+        </Swipe>
+    </div>
+</template>
+
+<script>
+    //TODO multiple
+    export default {
+        name: "swipe",
+        data(){
+            return {
+                files:[{"id":521,"ad_id":10,"name":"\u73a9\u8f6c\u5927\u6570\u636e\u5206\u6790\uff01Spark2.X+Python \u7cbe\u534e\u5b9e\u6218\u8bfe\u7a0b","image":"https:\/\/o74ly5e8r.qnssl.com\/9MhSVW1gJD.png","background":{"color":""},"link":"https:\/\/edu.hellobi.com\/course\/222","sort":0,"meta":"","created_at":"2017-12-21 09:48:29","updated_at":"2017-12-21 09:48:29","deleted_at":null},{"id":506,"ad_id":10,"name":"\u6570\u636e\u5206\u6790\u62a5\u544a\u5236\u4f5c\u79d8\u7c4d\u5347\u7ea7\u7248","image":"https:\/\/o74ly5e8r.qnssl.com\/EAbxDnBMcX.png","background":{"color":""},"link":"https:\/\/edu.hellobi.com\/course\/132","sort":1,"meta":"","created_at":"2017-10-31 09:43:15","updated_at":"2017-12-21 09:46:16","deleted_at":null},{"id":504,"ad_id":10,"name":"\u72ec\u4e00\u65e0\u4e8c\u7684\u6570\u636e\u4ed3\u5e93\u5efa\u6a21\u6307\u5357\u7cfb\u5217\u6559\u7a0b\u5347\u7ea7\u7248 \uff08\u8fde\u8f7d\u4e2d\uff09","image":"https:\/\/o74ly5e8r.qnssl.com\/dmJqsjtLNS.png","background":{"color":""},"link":"https:\/\/edu.hellobi.com\/course\/102","sort":2,"meta":"","created_at":"2017-10-18 09:35:05","updated_at":"2017-12-21 09:50:03","deleted_at":null}]
+
+        }
+
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .Swipe {
+        padding-top: 100px;
+        width: 100%;
+    }
+</style>

package/src/views/SwitchBar.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="SwitchBar">
+        <SwitchBar v-model="checkLarge" size="large"></SwitchBar>
+        <span>large</span>
+        <SwitchBar v-model="checkSmall" size="small"></SwitchBar>
+        <span>small</span>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "switch-bar",
+        data(){
+            return {
+                checkLarge:false,
+                checkSmall:false
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .SwitchBar {
+        padding-top: 100px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        height: 100%;
+        p {
+            font-weight: bold;
+            font-size: 14px;
+            align-self: flex-start;
+        }
+    }
+</style>

package/src/views/Tab.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="Tab">
+        <Tab :items="items" :index="index" :border="hasBorder" :styles="styles"></Tab>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "tab",
+        data(){
+            return {
+                items:[
+                    {
+                        path:'/guide',
+                        name:'首页',
+                        iconCur:'<span class="iconfont icon-shangcheng"></span>',
+                        icon:'<span class="iconfont icon-shangcheng"></span>'
+                    },
+                    {
+                        path:'/guide',
+                        name:'首页',
+                        iconCur:'<span class="iconfont icon-shangcheng"></span>',
+                        icon:'<span class="iconfont icon-shangcheng"></span>',
+                    },
+                ],
+                index:0,
+                hasBorder:true,
+                styles:{
+                    bottom:0
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .Tab {
+        height:100%;
+
+    }
+</style>

package/src/views/Text.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="Text">
+        <div class="item">
+            <p class="title">Number</p>
+            <Number v-model="number" :min="min" :max="max" :focus="focus" :step="step"></Number>
+            <span class="value">value:{{number}}</span>
+        </div>
+
+        <div class="item">
+            <p class="title">TextBar</p>
+            <TextBar v-model="text" type="text"></TextBar>
+            <span class="value">value:{{text}}</span>
+
+
+        </div>
+
+        <div class="item">
+            <p class="title">TextBar</p>
+            <TextBar v-model="texts" type="textarea" :maxlength="9"></TextBar>
+            <span class="value">value:{{texts}}</span>
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "text",
+        data(){
+            return {
+                number: 1,
+                min: 1,
+                max: 10,
+                step: 2,
+                focus: true,
+                text:'请输入',
+                texts: '正在输入....'
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .Text {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        .item {
+            width: 50%;
+            .title  {
+                margin-bottom:10px;
+                font-weight: bold;
+
+            }
+            .value {
+                margin-top:10px;
+            }
+
+        }
+    }
+</style>

package/src/views/ToTop.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="ToTop">
+        <ToTop></ToTop>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "to-top"
+    }
+</script>
+
+<style  lang="less" scoped>
+    .ToTop {
+        height:200%;
+    }
+</style>

package/src/views/Upload.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="Upload">
+
+        <Upload :multiple="true" @on-change-file="onChangeFile" ref="upload"></Upload>
+
+
+        <template v-if="files.length">
+
+            <img :src="item.base64" v-for="item in files"/>
+        </template>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "upload",
+        data(){
+            return {
+                files:[]
+            }
+        },
+        methods:{
+            onChangeFile(files){
+                this.files = files
+            }
+        }
+
+    }
+</script>
+
+<style lang="less" scoped>
+    .Upload {
+        height:100%;
+        .upload-box {
+            width:200px;
+            height:100px;
+            background: #008cee;
+            color: #ffffff;
+            text-align: center;
+            line-height: 100px;
+        }
+    }
+</style>