dpzvc3-ui 3.0.0

package/src/components/checkBox/checkbox.vue

@@ -0,0 +1,117 @@
+<template>
+  <label :class="classes">
+    <span :class="wrapperClasses">
+      <span :class="innerClasses" />
+      <input
+        type="checkbox"
+        class="dpzvc3-checkbox-input noselect"
+        :disabled="disable"
+        :checked="currentValue"
+        @change="change"
+      >
+    </span>
+    <slot v-if="show">
+      <span ref="slotRef">{{ label }}</span>
+    </slot>
+  </label>
+</template>
+
+<script>
+import {
+  defineComponent,
+  ref,
+  computed,
+  inject,
+  watch,
+  onMounted
+} from 'vue'
+
+export default defineComponent({
+  name: 'CheckBox',
+
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: [String, Number, Boolean]
+    }
+  },
+
+  emits: ['update:modelValue', 'on-change'],
+
+  setup (props, { emit }) {
+    // 注入 checkboxGroup（由 CheckBoxGroup provide）
+    const checkboxGroup = inject('CheckBoxGroup')
+    // console.log(checkboxGroup, 'checkboxGroup')
+    const isGroup = ref(!!checkboxGroup)
+    const currentValue = ref(props.modelValue)
+    const show = ref(true)
+    const slotRef = ref(null)
+
+    const classes = computed(() => ['dpzvc3-checkbox'])
+
+    const wrapperClasses = computed(() => [
+      'dpzvc3-checkbox-wrapper',
+      {
+        'dpzvc3-checkbox-checked': currentValue.value,
+        'dpzvc3-checkbox-disable': props.disable
+      }
+    ])
+
+    const innerClasses = computed(() => ['dpzvc3-checkbox-inner'])
+
+    watch(
+      () => props.modelValue,
+      val => {
+        currentValue.value = val
+      }
+    )
+
+    const change = (e) => {
+      if (props.disable) return
+      const checked = e.target.checked
+      currentValue.value = checked
+
+      // group 模式
+      if (isGroup.value && checkboxGroup) {
+        const value = [...checkboxGroup.currentValue.value]
+        const index = value.indexOf(props.label)
+
+        if (checked && index === -1) value.push(props.label)
+        if (!checked && index > -1) value.splice(index, 1)
+        checkboxGroup.toggleOption(value)
+      } else {
+        emit('update:modelValue', checked)
+        emit('on-change', checked)
+      }
+    }
+
+    onMounted(() => {
+      if (isGroup.value && checkboxGroup) {
+        const value = [...checkboxGroup.currentValue.value]
+        const index = value.indexOf(props.label)
+        if (index !== -1) currentValue.value = true
+      }
+      if (slotRef.value && !slotRef.value.innerHTML) {
+        show.value = false
+      }
+    })
+
+    return {
+      slotRef,
+      show,
+      currentValue,
+      classes,
+      wrapperClasses,
+      innerClasses,
+      change
+    }
+  }
+})
+</script>

package/src/components/checkBox/index.js

@@ -0,0 +1,8 @@
+/**
+ * Created by admin on 2017/4/19.
+ */
+import CheckBox from './checkbox.vue'
+import CheckGroup from './checkbox-group.vue'
+
+CheckBox.group = CheckGroup
+export default CheckBox

package/src/components/header/header.vue

@@ -0,0 +1,130 @@
+<template>
+  <div
+    v-if="visible"
+    :class="classes"
+  >
+    <header>
+      <div
+        class="left"
+        @click="back"
+      >
+        <slot name="left">
+          <span class="arrow" />
+          <span class="text">返回</span>
+        </slot>
+      </div>
+
+      <div class="title dpzvc3-nowrap">
+        {{ title }}
+      </div>
+
+      <div class="right">
+        <slot name="right">
+          <div />
+        </slot>
+      </div>
+    </header>
+
+    <div
+      v-if="fixed"
+      class="header-place"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+const prefixCls = 'dpzvc3-header'
+
+export default defineComponent({
+  name: 'Dpzvc3Header',
+
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: true
+    },
+    fixed: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    wechat: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  emits: ['update:modelValue'],
+
+  setup (props, { emit }) {
+    const router = useRouter()
+
+    const visible = ref(props.modelValue)
+    const isWechat = ref(props.wechat)
+
+    /** classes */
+    const classes = computed(() => [
+      prefixCls,
+      {
+        [`${prefixCls}-fixed`]: props.fixed
+      }
+    ])
+
+    /** UA 判断 */
+    const isWeixin = computed(() =>
+      /micromessenger/i.test(window.navigator.userAgent)
+    )
+
+    const isPcWeixin = computed(() =>
+      /windowswechat/i.test(window.navigator.userAgent)
+    )
+
+    /** 同步 v-model */
+    watch(
+      () => props.modelValue,
+      val => {
+        visible.value = val
+      }
+    )
+
+    watch(visible, val => {
+      emit('update:modelValue', val)
+    })
+
+    watch(
+      () => props.wechat,
+      val => {
+        isWechat.value = val
+      }
+    )
+
+    /** mounted 逻辑 */
+    onMounted(() => {
+      if ((isWeixin.value || isPcWeixin.value) && !isWechat.value) {
+        visible.value = false
+      }
+    })
+
+    /** 返回 */
+    const back = () => {
+      if (router) {
+        router.back()
+      } else {
+        window.history.back()
+      }
+    }
+
+    return {
+      visible,
+      classes,
+      back
+    }
+  }
+})
+</script>

package/src/components/header/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/5/4.
+ */
+import dpzvc3Header from './header'
+export default dpzvc3Header

package/src/components/loadMore/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2025/6/19.
+ */
+import LoadMore from './loadmore'
+export default LoadMore

package/src/components/loadMore/loadmore.vue

@@ -0,0 +1,258 @@
+<template>
+  <div
+    ref="containerRef"
+    :class="containerClasses"
+    :style="{ height: height }"
+    @scroll="onScroll"
+  >
+    <!-- 上拉刷新 -->
+    <div
+      v-if="refresh"
+      :class="topClasses"
+      :style="{ height: translateY + 'px' }"
+    >
+      <div :class="statusClass">
+        <slot name="top">
+          <span class="spinner">
+            <Spinner
+              v-if="upStatus === 'loading'"
+              size="15"
+              type="snake"
+            />
+          </span>
+          <span class="dpzvc3-loadmore-text">{{ upText }}</span>
+        </slot>
+      </div>
+    </div>
+
+    <!-- 内容 -->
+    <div :class="contentClasses">
+      <slot />
+    </div>
+
+    <!-- 下拉加载更多 -->
+    <div
+      v-if="loadMore"
+      :class="bottomClasses"
+    >
+      <div :class="statusClass">
+        <slot name="bottom">
+          <span class="spinner">
+            <Spinner
+              v-if="downStatus === 'loading'"
+              size="15"
+              type="snake"
+            />
+          </span>
+          <span class="dpzvc3-loadmore-text">{{ downText }}</span>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import Spinner from '../spinner'
+
+const prefixCls = 'dpzvc3-loadmore'
+
+export default defineComponent({
+  name: 'Dpzvc3Loadmore',
+  components: { Spinner },
+  props: {
+    height: { type: [Number, String], default: '100%' },
+    refresh: Function,
+    upLoadingText: { type: String, default: '加载中...' },
+    upDistance: { type: Number, default: 70 },
+    upPullText: { type: String, default: '↓ 下拉刷新' },
+    upDropText: { type: String, default: '↑ 释放更新' },
+    maxDistance: { type: Number, default: 0 },
+    speed: { type: Number, default: 3 },
+    downEndText: { type: String, default: '没有更多了' },
+    downDropText: { type: String, default: '↑ 上拉加载数据' },
+    downLoadingText: { type: String, default: '加载中...' },
+    downDistance: { type: Number, default: 50 },
+    loadMore: Function,
+    hasMore: { type: Boolean, default: true },
+    styles: { type: Object, default: () => ({}) },
+    auto: { type: Boolean, default: true },
+    autoFill: { type: Boolean, default: true }
+  },
+  setup (props, { emit }) {
+    const containerRef = ref(null)
+
+    // 状态
+    const translateY = ref(0)
+    const startTranslateY = ref(0)
+    const currentY = ref(0)
+    const startY = ref(0)
+    const upStatus = ref('')
+    const downStatus = ref('')
+    const direction = ref('')
+    const upText = ref('')
+    const downText = ref('')
+    const down = ref(false)
+    const drag = ref(false)
+    const more = ref(props.hasMore)
+
+    // classes
+    const containerClasses = computed(() => [prefixCls])
+    const topClasses = computed(() => [prefixCls + '-top', { [`${prefixCls}-drag`]: !drag.value }])
+    const bottomClasses = computed(() => [prefixCls + '-bottom'])
+    const contentClasses = computed(() => [prefixCls + '-content'])
+    const statusClass = computed(() => [prefixCls + '-status'])
+
+    // watch 状态
+    watch(upStatus, val => {
+      switch (val) {
+      case 'pull': upText.value = props.upPullText; break
+      case 'drop': upText.value = props.upDropText; break
+      case 'loading': upText.value = props.upLoadingText; break
+      }
+      emit('on-change-up-status', val)
+    })
+
+    watch(downStatus, val => {
+      switch (val) {
+      case 'end': downText.value = props.downEndText; break
+      case 'drop': downText.value = props.downDropText; break
+      case 'loading': downText.value = props.downLoadingText; break
+      default: downText.value = ''; break
+      }
+      emit('on-change-down-status', val)
+    })
+
+    watch(() => props.hasMore, val => {
+      more.value = val
+      if (!val) downStatus.value = 'end'
+    })
+
+    // 方法
+    const isBottom = () => {
+      const el = containerRef.value
+      return el.scrollHeight <= el.offsetHeight
+    }
+
+    const onLoadOff = () => {
+      translateY.value = 0
+      upStatus.value = ''
+      downStatus.value = ''
+      if (!more.value) downStatus.value = 'end'
+      setTimeout(() => {
+        if (more.value && isBottom()) {
+          direction.value = 'up'
+          downStatus.value = 'loading'
+          props.loadMore && props.loadMore()
+        }
+      }, 1000)
+    }
+
+    const onScroll = e => {
+      e.preventDefault()
+      if (downStatus.value === 'loading') return
+      const el = containerRef.value
+      const scrollTop = el.scrollTop
+      if (props.loadMore) {
+        const absY = el.scrollHeight - (el.offsetHeight + scrollTop)
+        if (absY > props.downDistance && downStatus.value === 'drop') downStatus.value = ''
+        else if (absY <= props.downDistance && absY > props.downDistance && more.value) downStatus.value = 'drop'
+        else if (absY <= props.downDistance) {
+          downStatus.value = 'loading'
+          if (more.value) props.loadMore()
+          else setTimeout(onLoadOff, 1000)
+        }
+      }
+    }
+
+    const onTouchStart = e => {
+      if (upStatus.value === 'loading') return
+      startY.value = e.touches[0].clientY
+      startTranslateY.value = translateY.value
+      down.value = false
+    }
+
+    const onTouchMove = e => {
+      const el = containerRef.value
+      if (!el) return
+      const pos = el.getBoundingClientRect()
+      if (upStatus.value === 'loading' || (startY.value < pos.top && startY.value > pos.bottom)) return
+      currentY.value = e.touches[0].clientY
+      const distance = (currentY.value - startY.value) / props.speed
+      const scrollTop = el.scrollTop
+      direction.value = distance > 0 ? 'down' : 'up'
+
+      if (currentY.value >= startY.value && props.refresh && scrollTop === 0 && direction.value === 'down') {
+        e.preventDefault()
+        e.stopPropagation()
+        translateY.value = props.maxDistance > 0 ? Math.min(distance - scrollTop, props.maxDistance) : distance - scrollTop
+        if (translateY.value < 0) translateY.value = 0
+        upStatus.value = translateY.value >= props.upDistance ? 'drop' : 'pull'
+        drag.value = true
+        down.value = down.value || isBottom()
+      }
+    }
+
+    const onTouchEnd = e => {
+      if (upStatus.value === 'loading') return
+      const el = containerRef.value
+      if (direction.value === 'down' && el.scrollTop <= 0 && translateY.value >= 0) {
+        if (upStatus.value === 'drop') {
+          translateY.value = 40
+          upStatus.value = 'loading'
+          props.refresh && props.refresh()
+        } else {
+          translateY.value = 0
+        }
+      }
+      direction.value = ''
+      drag.value = false
+    }
+
+    onMounted(() => {
+      if (props.auto && props.refresh) {
+        translateY.value = 40
+        drag.value = false
+        direction.value = 'down'
+        upStatus.value = 'loading'
+        props.refresh()
+      }
+
+      const el = containerRef.value
+      if (el) {
+        el.addEventListener('touchstart', onTouchStart, false)
+        el.addEventListener('touchmove', onTouchMove, false)
+        el.addEventListener('touchend', onTouchEnd, false)
+      }
+    })
+
+    onBeforeUnmount(() => {
+      const el = containerRef.value
+      if (el) {
+        el.removeEventListener('touchstart', onTouchStart, false)
+        el.removeEventListener('touchmove', onTouchMove, false)
+        el.removeEventListener('touchend', onTouchEnd, false)
+      }
+    })
+
+    return {
+      containerRef,
+      translateY,
+      upStatus,
+      downStatus,
+      upText,
+      downText,
+      down,
+      drag,
+      more,
+      containerClasses,
+      topClasses,
+      bottomClasses,
+      contentClasses,
+      statusClass,
+      onScroll,
+      onLoadOff
+    }
+  }
+})
+</script>

package/src/components/message/confirm.js

@@ -0,0 +1,60 @@
+/**
+ * confirm.js - Vue 3 版本
+ * 负责创建 MessageGroup 实例
+ */
+
+import { createVNode, render } from 'vue'
+import MessageGroup from './messageGroup.vue'
+
+MessageGroup.newInstance = function (props = {}) {
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+
+  let vnode = null
+  let instance = null // 组件实例 proxy
+
+  const mount = () => {
+    vnode = createVNode(MessageGroup, {
+      ...props
+      // 这里使用 ref 拿到组件实例 proxy
+    })
+    render(vnode, container)
+    instance = vnode.component.proxy
+  }
+
+  mount()
+
+  return {
+    add (options) {
+      if (instance && instance.add) {
+        instance.add(options)
+      }
+    },
+    remove (name) {
+      if (instance && instance.remove) {
+        instance.remove(name)
+      }
+    },
+    closeAll () {
+      if (instance && instance.closeAll) {
+        instance.closeAll()
+      }
+    },
+    component: instance,
+    destroy () {
+      if (instance && instance.closeAll) {
+        instance.closeAll()
+      }
+
+      setTimeout(() => {
+        render(null, container)
+        if (container.parentNode) {
+          container.parentNode.removeChild(container)
+        }
+        instance = null
+      }, 500)
+    }
+  }
+}
+
+export default MessageGroup

package/src/components/message/index.js

@@ -0,0 +1,111 @@
+/**
+ * message/index.js - Vue 3 版本
+ */
+
+import MessageGroup from './confirm'
+import { randomStr } from '../../utils/util'
+
+let defaultDuration = 1
+let top = '0'
+
+let MGInstance = null
+let seed = 1
+const time = Date.now()
+
+function getName () {
+  return `dpzvc3-message-group_${time}_${seed++}_${randomStr()}`
+}
+
+function getNewInstance () {
+  if (!MGInstance) {
+    MGInstance = MessageGroup.newInstance({
+      styles: {
+        top,
+        right: '0'
+      }
+    })
+  }
+
+  return MGInstance
+}
+
+function message (props = {}) {
+  const {
+    text = '',
+    name = getName(),
+    duration = props.duration === 0 ? 0 : (props.duration || defaultDuration),
+    showLeft = false,
+    rightHide = true,
+    loading = false,
+    onClose = () => {},
+    styles = {},
+    type = 'normal',
+    position = 'center'
+  } = props
+
+  const instance = getNewInstance()
+  // console.log(instance.add, 'instance')
+  instance.add({
+    name,
+    text,
+    duration,
+    showLeft,
+    rightHide,
+    loading,
+    onClose,
+    styles,
+    type,
+    position
+  })
+
+  // 返回手动关闭函数（保持旧行为）
+  return function remove () {
+    instance.remove(name)
+  }
+}
+
+export default {
+
+  show (options = {}) {
+    return message(options)
+  },
+
+  success (options = {}) {
+    return message({
+      ...options,
+      type: 'success'
+    })
+  },
+
+  error (options = {}) {
+    return message({
+      ...options,
+      type: 'error'
+    })
+  },
+
+  loading (options = {}) {
+    return message({
+      ...options,
+      type: 'loading',
+      duration: 0,
+      showLeft: true
+    })
+  },
+
+  config (options = {}) {
+    if (options.top !== undefined) {
+      top = options.top
+    }
+
+    if (options.duration !== undefined) {
+      defaultDuration = options.duration
+    }
+  },
+
+  destroy () {
+    if (!MGInstance) return
+    MGInstance.destroy()
+    MGInstance = null
+  }
+}