dpzvc3-ui 3.1.4 → 3.1.6

package/src/views/Header.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="Header">
-    <!-- 默认 Header -->
-    <div class="item">
-      <DpHeader
-        title="Header"
-        :fixed="fixed"
-      />
-    </div>
-
-    <!-- Header 右侧自定义 -->
-    <div class="item">
-      <DpHeader
-        title="Header"
-        :fixed="fixed"
-      >
-        <template #right>
-          <span @click="share">分享</span>
-        </template>
-      </DpHeader>
-    </div>
-
-    <!-- Header 左右自定义 -->
-    <div class="item">
-      <DpHeader
-        title="Header"
-        :fixed="fixed"
-      >
-        <template #left>
-          <span>返回</span>
-        </template>
-        <template #right>
-          <span @click="share">分享</span>
-        </template>
-      </DpHeader>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { ref, getCurrentInstance, defineComponent } from 'vue'
-// import DpHeader from '../components/header'
-export default defineComponent({
-  name: 'ViewHeader',
-  // components: { DpHeader },
-  setup () {
-    const { proxy } = getCurrentInstance()!
-    const fixed = ref(false)
-
-    const share = () => {
-      // 假设 $Modal 已经在全局挂载
-      if (proxy) {
-        (proxy as any).$Modal.confirm({
-          showHead: false,
-          body: '点击了分享'
-        })
-      }
-    }
-
-    return { fixed, share }
-  }
-})
-</script>
-
-<style scoped>
-.item {
-  position: relative;
-  margin-bottom: 20px;
-  height: 50px;
-}
-</style>

package/src/views/Indicator.vue

@@ -1,82 +0,0 @@
-<template>
-  <div class="Indicator">
-    <div class="item">
-      <DpButton @click="blade">
-        blade
-      </DpButton>
-    </div>
-    <div class="item">
-      <DpButton @click="snake">
-        snake
-      </DpButton>
-    </div>
-    <div class="item">
-      <DpButton @click="circle">
-        circle
-      </DpButton>
-    </div>
-    <div class="item">
-      <DpButton @click="bounce">
-        bounce
-      </DpButton>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, getCurrentInstance } from 'vue'
-
-export default defineComponent({
-  name: 'ViewIndicator',
-  setup () {
-    const { proxy } = getCurrentInstance()!
-    const removeAfterDelay = (duration = 3000) => {
-      setTimeout(() => {
-        proxy!.$Indicator.remove()
-      }, duration)
-    }
-
-    const blade = () => {
-      proxy!.$Indicator.blade({})
-      removeAfterDelay()
-    }
-
-    const snake = () => {
-      proxy!.$Indicator.snake({})
-      removeAfterDelay()
-    }
-
-    const circle = () => {
-      proxy!.$Indicator.circle({})
-      removeAfterDelay()
-    }
-
-    const bounce = () => {
-      proxy!.$Indicator.bounce({})
-      removeAfterDelay()
-    }
-
-    return {
-      blade,
-      snake,
-      circle,
-      bounce
-    }
-  }
-})
-</script>
-
-<style lang="less" scoped>
-.Indicator {
-  height: 100%;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  align-items: center;
-
-  .item {
-    margin: 0 auto;
-    width: 50%;
-  }
-}
-</style>

package/src/views/LoadMore.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="LoadMore">
-    <DpLoadMore
-      ref="moreRef"
-      :refresh="topMethod"
-      height="100%"
-      :load-more="bottomMethod"
-      :has-more="hasMore"
-      @on-change-up-status="getStatus"
-    >
-      <div
-        v-for="(item, index) in loadmore"
-        :key="index"
-        style="width: 100%; height: 50px;"
-      >
-        {{ item }}
-      </div>
-    </DpLoadMore>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-// import DpLoadMore from '../components/loadMore'
-import type { LoadmoreProps } from '../components/loadMore/types'
-export default defineComponent({
-  name: 'ViewLoadMore',
-  // components: { DpLoadMore },
-  setup () {
-    const moreRef = ref(null)
-    const hasMore = ref<LoadmoreProps['hasMore']>(true)
-    const loadmore = ref(Array(16).fill('LoadMore'))
-
-    const topMethod = () => {
-      hasMore.value = true
-
-      setTimeout(() => {
-        // console.log(moreRef.value, '----moreRef----')
-        if (moreRef.value && (moreRef.value as any).onLoadOff) {
-          (moreRef.value as any).onLoadOff()
-        }
-      }, 2000)
-    }
-
-    const bottomMethod = () => {
-      setTimeout(() => {
-        if (moreRef.value && (moreRef.value as any).onLoadOff) {
-          (moreRef.value as any).onLoadOff()
-        }
-        loadmore.value.push(...['LoadMore', 'LoadMore'])
-      }, 2000)
-    }
-
-    const getStatus = (val: any) => {
-      console.log(val)
-    }
-
-    return {
-      moreRef,
-      hasMore,
-      loadmore,
-      topMethod,
-      bottomMethod,
-      getStatus
-    }
-  }
-})
-</script>
-
-<style lang="less" scoped>
-.LoadMore {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-}
-</style>

package/src/views/Message.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="Message">
-    <DpButton
-      width="50%"
-      @click="showMessageTop"
-    >
-      Top
-    </DpButton>
-    <DpButton
-      width="50%"
-      @click="showMessage"
-    >
-      Center
-    </DpButton>
-    <DpButton
-      width="50%"
-      @click="showMessageBottom"
-    >
-      Bottom
-    </DpButton>
-  </div>
-</template>
-
-<script lang="ts">
-import { getCurrentInstance, defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'ViewMessage',
-  setup () {
-    // 获取全局实例
-    const { proxy } = getCurrentInstance()!
-    const showMessage = () => {
-      proxy!.$Message.show({ text: '显示消息' })
-    }
-
-    const showMessageTop = () => {
-      proxy!.$Message.show({ text: '显示消息', position: 'top' })
-    }
-
-    const showMessageBottom = () => {
-      proxy!.$Message.show({ text: '显示消息', position: 'bottom' })
-    }
-
-    return {
-      showMessage,
-      showMessageTop,
-      showMessageBottom
-    }
-  }
-})
-</script>
-
-<style scoped>
-.Message {
-    height: 100%;
-    display: flex;
-    justify-content: space-around;
-    flex-direction: column;
-    align-items: center;
-}
-</style>

package/src/views/Modal.vue

@@ -1,69 +0,0 @@
-<template>
-  <div class="Modal">
-    <VButton
-      width="50%"
-      @click="showInfo"
-    >
-      info
-    </VButton>
-    <VButton
-      width="50%"
-      @click="showConfirm"
-    >
-      confirm
-    </VButton>
-  </div>
-</template>
-
-<script lang="ts">
-import { getCurrentInstance, defineComponent } from 'vue'
-import VButton from '../components/button'
-
-export default defineComponent({
-  name: 'ViewModal',
-  components: { VButton },
-  setup () {
-    // 获取实例，用来访问全局属性 $Modal / $Message
-    const { proxy } = getCurrentInstance()!
-
-    const showInfo = () => {
-      proxy!.$Modal.info({
-        body: '这是内容',
-        onOk: function () {
-          proxy!.$Message.show({ text: '点击了确定' })
-          // console.log('点击了确定')
-        },
-        onCancle: function () {
-          proxy!.$Message.show({ text: '点击了取消' })
-          // console.log('点击了取消')
-        }
-      })
-    }
-
-    const showConfirm = () => {
-      proxy!.$Modal.confirm({
-        body: '这是内容',
-        onOk: function () {
-          proxy!.$Message.show({ text: '点击了确定' })
-          // console.log('点击了确定')
-        }
-      })
-    }
-
-    return {
-      showInfo,
-      showConfirm
-    }
-  }
-})
-</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

@@ -1,142 +0,0 @@
-<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">
-      <DpButton
-        width="30%"
-        @click="DateVisible = true"
-      >
-        日期选择器
-      </DpButton>
-      <DpButton
-        width="30%"
-        @click="AreaVisible = true"
-      >
-        地区选择器
-      </DpButton>
-      <DpButton
-        width="30%"
-        @click="NormalVisible = true"
-      >
-        通用选择器
-      </DpButton>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { ref, getCurrentInstance } from 'vue'
-// import Picker from '../components/picker'
-import type { PickerProps } from '../components/picker/types'
-export default {
-  name: 'ViewPicker',
-  // components: { Picker },
-  setup () {
-    const AreaVisible = ref<PickerProps['modelValue']>(false)
-    const DateVisible = ref<PickerProps['modelValue']>(false)
-    const NormalVisible = ref<PickerProps['modelValue']>(false)
-    const initArrRef = ref<PickerProps['initArr']>([1, 3, 3])
-    const listRef = ref<PickerProps['list']>([
-      {
-        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: any) {
-      // console.log(value)
-      // 如果全局 $Modal 可用
-      if (proxy) {
-        (proxy as any).$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 as any).$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

@@ -1,103 +0,0 @@
-<template>
-  <div class="Popup">
-    <VButton
-      width="50%"
-      @click="() => showPop('top')"
-    >
-      Top
-    </VButton>
-    <VButton
-      width="50%"
-      @click="() => showPop('right')"
-    >
-      Right
-    </VButton>
-    <VButton
-      width="50%"
-      @click="() => showPop('bottom')"
-    >
-      Bottom
-    </VButton>
-    <VButton
-      width="50%"
-      @click="() => showPop('left')"
-    >
-      Left
-    </VButton>
-
-    <Popup
-      v-model="show"
-      :position="side"
-      :width="width"
-      :height="height"
-      :show-mask="true"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, nextTick } from 'vue'
-// import type { Side } from './dist/types/components/popup/types'
-type Side = 'top' | 'right' | 'bottom' | 'left'
-
-export default defineComponent({
-  name: 'ViewPopup',
-  setup () {
-    const side = ref<Side>('top')
-    const show = ref(false)
-    const width = ref('100%')
-    const height = ref<string | number>('100%')
-    const sideList: Side[] = ['top', 'right', 'bottom', 'left']
-
-    const showPop = (s: Side) => {
-      show.value = false
-      nextTick(() => {
-        if (!sideList.includes(s)) s = 'top'
-
-        switch (s) {
-        case 'top':
-          width.value = '100%'
-          height.value = 0
-          break
-        case 'right':
-          width.value = '70%'
-          height.value = '100%'
-          break
-        case 'bottom':
-          width.value = '100%'
-          height.value = '70%'
-          break
-        case 'left':
-          width.value = '70%'
-          height.value = '100%'
-          break
-        }
-
-        side.value = s
-
-        setTimeout(() => {
-          show.value = true
-        }, 350)
-      })
-    }
-
-    return {
-      side,
-      show,
-      width,
-      height,
-      showPop
-    }
-  }
-})
-</script>
-
-<style scoped>
-.Popup {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-}
-</style>

package/src/views/Progress.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="Progress">
-    <DpProgress
-      v-model="progress"
-      :bar-height="barHeight"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
-// import DpProgress from '../components/progress'
-import type { ProgressProps } from '../components/progress'
-export default defineComponent({
-  name: 'ViewDpProgress',
-  // components: { DpProgress },
-  setup () {
-    const progress = ref<ProgressProps['modelValue']>('0')
-    const barHeight = ref(5)
-    let timer:any = null
-
-    onMounted(() => {
-      timer = setInterval(() => {
-        progress.value = Number(progress.value) + 1
-        if (progress.value >= 100) {
-          clearInterval(timer)
-          timer = null
-        }
-      }, 100)
-    })
-
-    onBeforeUnmount(() => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      timer && clearInterval(timer)
-    })
-
-    return {
-      progress,
-      barHeight
-    }
-  }
-})
-</script>
-
-<style lang="less" scoped>
-.Progress {
-  padding-top: 50px;
-}
-</style>

package/src/views/Prompt.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="Prompt">
-    <DpButton
-      width="50%"
-      @click="showPrompt"
-    >
-      弹出Prompt
-    </DpButton>
-  </div>
-</template>
-
-<script lang="ts">
-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>