dpzvc3-ui 3.0.0

package/src/views/Text.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="Text">
+    <!-- Number 示例 -->
+    <div class="item">
+      <p class="title">
+        Number
+      </p>
+      <Number
+        v-model="number"
+        :min="min"
+        :max="max"
+        :step="step"
+        :focus="focus"
+      />
+      <span class="value">value: {{ number }}</span>
+    </div>
+
+    <!-- TextBar 普通输入框 -->
+    <div class="item">
+      <p class="title">
+        TextBar
+      </p>
+      <TextBar
+        v-model="text"
+        type="text"
+      />
+      <span class="value">value: {{ text }}</span>
+    </div>
+
+    <!-- TextBar 多行输入框 -->
+    <div class="item">
+      <p class="title">
+        TextBar
+      </p>
+      <TextBar
+        v-model="texts"
+        type="textarea"
+        :maxlength="9"
+      />
+      <span class="value">value: {{ texts }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ViewText',
+  setup () {
+    const number = ref(1)
+    const min = ref(1)
+    const max = ref(10)
+    const step = ref(2)
+    const focus = ref(true)
+    const text = ref('请输入')
+    const texts = ref('正在输入....')
+
+    return {
+      number,
+      min,
+      max,
+      step,
+      focus,
+      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 />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ViewToTop'
+}
+</script>
+
+<style  lang="less" scoped>
+    .ToTop {
+        height:200%;
+    }
+</style>

package/src/views/Upload.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="Upload">
+    <Upload
+      ref="upload"
+      :multiple="true"
+      @on-change-file="onChangeFile"
+    />
+
+    <template v-if="files.length">
+      <img
+        v-for="(item, index) in files"
+        :key="index"
+        :src="item.base64"
+      >
+    </template>
+  </div>
+</template>
+
+<script>
+import { ref, defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ViewUpload',
+  setup () {
+    const files = ref([])
+    const upload = ref(null)
+
+    const onChangeFile = (newFiles) => {
+      files.value = newFiles
+    }
+
+    return {
+      files,
+      upload,
+      onChangeFile
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.Upload {
+  height: 100%;
+
+  .upload-box {
+    width: 200px;
+    height: 100px;
+    background: #008cee;
+    color: #ffffff;
+    text-align: center;
+    line-height: 100px;
+  }
+
+  // img {
+  //   width: 100px;
+  //   height: 100px;
+  //   margin: 5px;
+  //   object-fit: cover;
+  // }
+}
+</style>

package/src/views/guide.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="guide">
+    <Cell
+      v-for="v in componentList"
+      :key="v.title"
+      :title="v.title"
+      :label="v.label"
+      :link="v.link"
+      has-mask
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ViewGuide',
+  data () {
+    return {
+      componentList: [
+        {
+          title: 'ActionSheet',
+          label: 'dpzvc3-ui操作列表',
+          link: '/ActionSheet'
+        },
+        {
+          title: 'Badge',
+          label: 'dpzvc3-ui消息气泡',
+          link: '/Badge'
+        },
+        {
+          title: 'Button',
+          label: 'dpzvc3-ui按钮',
+          link: '/Button'
+        },
+        {
+          title: 'Card',
+          label: 'dpzvc3-ui卡片',
+          link: '/Card'
+        },
+        {
+          title: 'Cell',
+          label: 'dpzvc3-ui单元格',
+          link: '/Cell'
+        },
+        {
+          title: 'CellSwipe',
+          label: 'dpzvc3-ui滑动单元格',
+          link: '/CellSwipe'
+        },
+        {
+          title: 'CheckBox',
+          label: 'dpzvc3-ui多选',
+          link: '/CheckBox'
+        },
+        {
+          title: 'Header',
+          label: 'dpzvc3-ui导航栏',
+          link: '/Header'
+        },
+        {
+          title: 'Indicator',
+          label: 'dpzvc3-ui加载框',
+          link: '/Indicator'
+        },
+        {
+          title: 'LoadMore',
+          label: 'dpzvc3-ui上拉加载/下拉刷新',
+          link: '/LoadMore'
+        },
+        {
+          title: 'Message',
+          label: 'dpzvc3-ui消息弹出框',
+          link: '/Message'
+        },
+        {
+          title: 'Modal',
+          label: 'dpzvc3-ui弹窗',
+          link: '/Modal'
+        },
+        {
+          title: 'Picker',
+          label: 'dpzvc3-ui选择器',
+          link: '/Picker'
+        },
+        {
+          title: 'Popup',
+          label: 'dpzvc3-ui拉起列表',
+          link: '/Popup'
+        },
+        {
+          title: 'Progress',
+          label: 'dpzvc3-ui进度条',
+          link: '/Progress'
+        },
+        {
+          title: 'Prompt',
+          label: 'dpzvc3-ui交互式弹窗',
+          link: '/Prompt'
+        },
+        {
+          title: 'RadioBox',
+          label: 'dpzvc3-ui单选按钮',
+          link: '/RadioBox'
+        },
+        {
+          title: 'Rater',
+          label: 'dpzvc3-ui评分',
+          link: '/Rater'
+        },
+        {
+          title: 'SlideBar',
+          label: 'dpzvc3-ui选项卡',
+          link: '/SlideBar'
+        },
+        {
+          title: 'Spinner',
+          label: 'dpzvc3-ui加载动画',
+          link: '/Spinner'
+        },
+        {
+          title: 'Swipe',
+          label: 'dpzvc3-ui轮播',
+          link: '/Swipe'
+        },
+        {
+          title: 'SwitchBar',
+          label: 'dpzvc3-ui开关',
+          link: '/SwitchBar'
+        },
+        {
+          title: 'Tab',
+          label: 'dpzvc3-ui菜单栏',
+          link: '/Tab'
+        },
+        {
+          title: 'Text',
+          label: 'dpzvc3-ui输入框',
+          link: '/Text'
+        },
+        {
+          title: 'ToTop',
+          label: 'dpzvc3-ui回到顶部',
+          link: '/ToTop'
+        },
+        {
+          title: 'Upload',
+          label: 'dpzvc3-ui图片上传',
+          link: '/Upload'
+        }
+
+      ]
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+    .guide {
+        width: 100%;
+        position: relative;
+    }
+</style>