dpzvc3-ui 3.0.0

package/src/views/Picker.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="Picker">
+    <!-- AreaPicker -->
+    <Picker
+      v-model="AreaVisible"
+      type="AreaPicker"
+      @sure="pickerSure"
+      @cancle="pickerCancle"
+    />
+
+    <!-- DatePicker -->
+    <Picker
+      v-model="DateVisible"
+      type="DatePicker"
+      :date-value="'2025/12/25'"
+      @sure="pickerSure"
+      @cancle="pickerCancle"
+    />
+    <!-- NormalPicker -->
+    <Picker
+      v-model="NormalVisible"
+      type="NormalPicker"
+      :list="listRef"
+      :init-arr="initArrRef"
+      @sure="pickerSure"
+      @cancle="pickerCancle"
+    />
+    <div class="item">
+      <VButton
+        width="30%"
+        @click="DateVisible = true"
+      >
+        日期选择器
+      </VButton>
+      <VButton
+        width="30%"
+        @click="AreaVisible = true"
+      >
+        地区选择器
+      </VButton>
+      <VButton
+        width="30%"
+        @click="NormalVisible = true"
+      >
+        通用选择器
+      </VButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, getCurrentInstance } from 'vue'
+
+export default {
+  name: 'ViewPicker',
+  setup () {
+    const AreaVisible = ref(false)
+    const DateVisible = ref(false)
+    const NormalVisible = ref(false)
+    const initArrRef = ref([1, 3, 3])
+    const listRef = ref([
+      {
+        target: 'targetA',
+        list: [{ value: 'a', code: 1 }, { value: 2, code: 2 }, { value: 3, code: 3 }, {
+          value: 4,
+          code: 4
+        }, { value: 5, code: 5 }, { value: 6, code: 6 }, { value: 7, code: 7 }, {
+          value: 8,
+          code: 8
+        }, { value: 'c', code: 9 }, { value: 0, code: 0 }]
+      },
+      {
+        target: 'targetB',
+        list: [{ value: 'b', code: 1 }, { value: 2, code: 2 }, { value: 3, code: 3 }, {
+          value: 4,
+          code: 4
+        }, { value: 5, code: 5 }, { value: 6, code: 6 }, { value: 7, code: 7 }, {
+          value: 8,
+          code: 8
+        }, { value: 9, code: 9 }, { value: 0, code: 0 }]
+      },
+      {
+        target: 'targetC',
+        list: [{ value: 'c', code: 1 }, { value: 2, code: 2 }, { value: 3, code: 3 }, {
+          value: 4,
+          code: 4
+        }, { value: 5, code: 5 }, { value: 6, code: 6 }, { value: 7, code: 7 }, {
+          value: 8,
+          code: 8
+        }, { value: 9, code: 9 }, { value: 0, code: 0 }]
+      }
+    ]) // code为唯一值，value为显示出的具体文本
+    const { proxy } = getCurrentInstance()
+    // 选择确定回调
+    function pickerSure (value) {
+      // console.log(value)
+      // 如果全局 $Modal 可用
+      if (proxy) {
+        proxy.$Modal.confirm({ body: value.formArea || value.formatDate || JSON.stringify(value) })
+      }
+      if (!value.formArea && !value.formatDate) {
+        // console.log(value, 'value')
+        initArrRef.value = [value.targetA.code, value.targetB.code, value.targetC.code]
+      }
+    }
+
+    // 选择取消回调
+    function pickerCancle () {
+      if (proxy) {
+        proxy.$Message.show({ text: '您选择了取消' })
+      }
+    }
+
+    return {
+      AreaVisible,
+      DateVisible,
+      NormalVisible,
+      pickerSure,
+      pickerCancle,
+      listRef,
+      initArrRef
+    }
+  }
+}
+</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,97 @@
+<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=""
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ViewPopup',
+  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,47 @@
+<template>
+  <div class="Progress">
+    <DpProgress
+      v-model="progress"
+      :bar-height="barHeight"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
+
+export default defineComponent({
+  name: 'ViewDpProgress',
+
+  setup () {
+    const progress = ref(0)
+    const barHeight = ref(5)
+    let timer = null
+
+    onMounted(() => {
+      timer = setInterval(() => {
+        progress.value += 1
+        if (progress.value >= 100) {
+          clearInterval(timer)
+          timer = null
+        }
+      }, 100)
+    })
+
+    onBeforeUnmount(() => {
+      timer && clearInterval(timer)
+    })
+
+    return {
+      progress,
+      barHeight
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.Progress {
+  padding-top: 50px;
+}
+</style>

package/src/views/Prompt.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="Prompt">
+    <VButton
+      width="50%"
+      @click="showPrompt"
+    >
+      弹出Prompt
+    </VButton>
+  </div>
+</template>
+
+<script>
+import { defineComponent, getCurrentInstance } from 'vue'
+
+export default defineComponent({
+  name: 'ViewPrompt',
+  setup () {
+    // 获取当前组件实例
+    const { proxy } = getCurrentInstance()
+
+    function showPrompt () {
+      proxy.$Prompt.info({
+        title: 'Prompt',
+        spec: 'ccc',
+        text: 'vvvv'
+      })
+    }
+
+    return {
+      showPrompt
+    }
+  }
+})
+</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,68 @@
+<template>
+  <div class="RadioBox">
+    <p>Radio组合</p>
+    <div class="item">
+      <RadioBoxGroup v-model="radio">
+        <RadioBox label="中国" />
+        <RadioBox label="美国" />
+        <RadioBox label="日本" />
+      </RadioBoxGroup>
+    </div>
+    <div class="item">
+      value: {{ radio }}
+    </div>
+
+    <p>单个Radio</p>
+    <RadioBox
+      v-model="checked"
+      label="苹果"
+    />
+    <div class="item">
+      checked: {{ checked }}
+    </div>
+
+    <p>禁用的Radio</p>
+    <div class="item">
+      <RadioBox
+        label="玩具"
+        :disable="true"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ViewRadioBox',
+  setup () {
+    const checked = ref(false)
+    const radio = ref('')
+
+    return {
+      checked,
+      radio
+    }
+  }
+})
+</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,49 @@
+<template>
+  <div class="Rater">
+    <p>可点击评分</p>
+    <Rater v-model="rate" />
+    <span>{{ rate }}</span>
+
+    <p>不可点击评分</p>
+    <Rater
+      v-model="disabledRate"
+      :disabled="true"
+    />
+    <span>{{ disabledRate }}</span>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ViewRater',
+  setup () {
+    const rate = ref(0)
+    const disabledRate = ref(4.5)
+
+    return {
+      rate,
+      disabledRate
+    }
+  }
+})
+</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,55 @@
+<template>
+  <div class="SlideBar">
+    <Slide-bar
+      :list="items"
+      :flex="false"
+      :index="index"
+      :can-drag="false"
+      height="100%"
+      scroll-height="50px"
+      :is-fixed-header="true"
+    >
+      <!-- 具名插槽语法 Vue3 -->
+      <template #slot-item-0>
+        <div style="height:100%; flex: 1; background:red; overflow: scroll;">
+          <div style="height: 40px; width: 100%; background-color: blue;" />
+          <div style="height: 40px; width: 100%; background-color: blue;" />
+          <div style="height: 40px; width: 100%; background-color: blue;" />
+          <div style="height: 40px; width: 100%; background-color: blue;" />
+          <div style="height: 40px; width: 100%; background-color: blue;" />
+        </div>
+      </template>
+
+      <template #slot-item-1>
+        <div style="height:200px; flex:1; background:yellow;" />
+      </template>
+
+      <template #slot-item-2>
+        <div style="height:200px; flex:1; background:black;" />
+      </template>
+    </Slide-bar>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ViewSlideBar',
+  setup () {
+    const items = ref([
+      { name: '选项一' },
+      { name: '选项二' },
+      { name: '选项三' }
+    ])
+    const index = ref(1)
+    return { items, index }
+  }
+})
+</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: 'ViewSpinner'
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/views/Swipe.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="swipe">
+    <Swipe
+      :multiple="false"
+      :list="files"
+    >
+      <template #default="props">
+        <div>
+          <img
+            :src="props.item.image"
+            :alt="props.item.name"
+          >
+        </div>
+      </template>
+    </Swipe>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ViewSwipe',
+  setup () {
+    const files = ref([
+      {
+        id: 521,
+        ad_id: 10,
+        name: '玩转大数据分析！Spark2.X+Python 精华实战课程',
+        image: 'https://o74ly5e8r.qnssl.com/9MhSVW1gJD.png',
+        link: 'https://edu.hellobi.com/course/222'
+      },
+      {
+        id: 506,
+        ad_id: 10,
+        name: '数据分析报告制作秘籍升级版',
+        image: 'https://o74ly5e8r.qnssl.com/EAbxDnBMcX.png',
+        link: 'https://edu.hellobi.com/course/132'
+      },
+      {
+        id: 504,
+        ad_id: 10,
+        name: '独一无二的数据仓库建模指引系列教程升级版（连载中）',
+        image: 'https://o74ly5e8r.qnssl.com/dmJqsjtLNS.png',
+        link: 'https://edu.hellobi.com/course/102'
+      }
+    ])
+
+    return { files }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.swipe {
+  padding-top: 100px;
+  width: 100%;
+}
+</style>

package/src/views/SwitchBar.vue

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

package/src/views/Tab.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="Tab">
+    <Tab
+      :items="items"
+      :index="index"
+      :border="hasBorder"
+      :styles="styles"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ViewTab',
+  setup () {
+    const items = ref([
+      {
+        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>'
+      }
+    ])
+
+    const index = ref(0)
+    const hasBorder = ref(true)
+    const styles = ref({
+      bottom: 0
+    })
+
+    return {
+      items,
+      index,
+      hasBorder,
+      styles
+    }
+  }
+})
+</script>
+
+<style scoped>
+.Tab {
+  height: 100%;
+}
+</style>