dpzvc3-ui 3.0.0

package/src/components/tab/tab.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    v-show="show"
+    :class="classes"
+    :style="getStyles"
+  >
+    <ul>
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+      >
+        <!-- 外部链接 -->
+        <template v-if="/(http|https)/i.test(item.path)">
+          <a
+            :href="item.path"
+            :class="itemClass(index)"
+          >
+            <span v-html="getIconHtml(index)" />
+            <p>{{ item.name }}</p>
+          </a>
+        </template>
+
+        <!-- 内部路由 -->
+        <template v-else>
+          <router-link
+            :to="item.path"
+            :class="itemClass(index)"
+          >
+            <slot name="item">
+              <span v-html="getIconHtml(index)" />
+              <p>{{ item.name }}</p>
+            </slot>
+          </router-link>
+        </template>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch } from 'vue'
+
+const prefixCls = 'dpzvc3-tab'
+
+export default defineComponent({
+  name: 'Dpzvc3Tab',
+  props: {
+    items: { type: Array, default: () => [] },
+    modelValue: { type: Boolean, default: true },
+    index: { type: [Number, String], default: 0 },
+    border: { type: Boolean, default: true },
+    styles: { type: Object, default: () => ({}) }
+  },
+  setup (props) {
+    // 控制显示
+    const show = ref(props.modelValue)
+
+    watch(() => props.modelValue, (val) => {
+      show.value = val
+    })
+
+    // 计算类名和样式
+    const classes = computed(() => [prefixCls])
+    const getStyles = computed(() => ({ ...props.styles }))
+
+    // tab item 样式
+    const itemClass = (index) => {
+      const _class = [`tab-item-${index}`]
+      if (Number(props.index) === Number(index)) _class.push('cur')
+      return _class
+    }
+
+    // icon 显示
+    const getIconHtml = (index) => {
+      const item = props.items[index]
+      if (!item) return ''
+      return Number(props.index) === Number(index) ? (item.iconCur || item.icon) : item.icon
+    }
+
+    return {
+      show,
+      classes,
+      getStyles,
+      itemClass,
+      getIconHtml
+    }
+  }
+})
+</script>

package/src/components/toTop/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2025/11/29.
+ */
+import ToTop from './topTop'
+export default ToTop

package/src/components/toTop/topTop.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    v-show="back"
+    :class="classes"
+    :style="positionStyles"
+    @click="toTop"
+  >
+    <slot>
+      <div :class="wrapperClasses" />
+    </slot>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted, onBeforeUnmount, defineComponent } from 'vue'
+import { scrollTop } from '../../utils/util'
+
+const prefixCls = 'dpzvc3-toTop'
+
+export default defineComponent({
+  name: 'ToTop',
+  props: {
+    distance: {
+      type: Number,
+      default: 200
+    },
+    bottom: {
+      type: [Number, String],
+      default: 30
+    },
+    right: {
+      type: [Number, String],
+      default: 30
+    },
+    duration: {
+      type: Number,
+      default: 1000
+    }
+  },
+  setup (props) {
+    const back = ref(false)
+
+    const classes = computed(() => [prefixCls])
+    const wrapperClasses = computed(() => [`${prefixCls}-wrapper`])
+    const positionStyles = computed(() => ({
+      bottom: props.bottom + 'px',
+      right: props.right + 'px'
+    }))
+
+    // 滚动监听
+    const scroll = () => {
+      back.value = window.pageYOffset > props.distance
+    }
+
+    const toTop = () => {
+      scrollTop(window, window.pageYOffset, 0, props.duration)
+    }
+
+    onMounted(() => {
+      window.addEventListener('scroll', scroll, false)
+      window.addEventListener('resize', scroll, false)
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('scroll', scroll, false)
+      window.removeEventListener('resize', scroll, false)
+    })
+
+    return {
+      back,
+      classes,
+      wrapperClasses,
+      positionStyles,
+      toTop
+    }
+  }
+})
+</script>

package/src/components/upload/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2025/10/26.
+ */
+import Upload from './upload'
+export default Upload

package/src/components/upload/upload.vue

@@ -0,0 +1,166 @@
+<template>
+  <div
+    :class="classes"
+    :style="styles"
+  >
+    <slot>
+      <div :class="wrapperClasses">
+        图片上传
+      </div>
+    </slot>
+    <input
+      ref="upload"
+      type="file"
+      :accept="accept"
+      :multiple="multiple"
+      @change="showPhoto"
+    >
+  </div>
+</template>
+
+<script>
+import { ref, computed, defineComponent, getCurrentInstance, watch } from 'vue'
+import exifr from 'exifr'
+import MegaPixImage from '../../lib/MegaPixImage'
+import { JPEG } from '../../utils/util'
+
+const prefixCls = 'dpzvc3-upload'
+
+export default defineComponent({
+  name: 'Dpzvc3Upload',
+  props: {
+    multiple: { type: Boolean, default: false },
+    accept: { type: String, default: 'image/*' },
+    styles: { type: Object, default: () => ({}) }
+  },
+  setup (props, { emit }) {
+    const { proxy } = getCurrentInstance()
+    // const $Indicator = appContext.config.globalProperties.$Indicator
+
+    const files = ref([])
+    const fileLength = ref(0)
+    const upload = ref(null)
+
+    const classes = computed(() => [prefixCls])
+    const wrapperClasses = computed(() => [`${prefixCls}-wrapper`])
+
+    watch(files, (val) => {
+      emit('on-change-file', val)
+    })
+
+    const showPhoto = async (e) => {
+      proxy.$Indicator.snake({ text: '上传中' })
+      files.value = []
+      const fileList = e.target.files
+      fileLength.value = fileList.length
+
+      for (let i = 0; i < fileList.length; i++) {
+        const file = fileList[i]
+        try {
+          const Orientation = await exifr.orientation(file)
+          const dataURL = await new Promise((resolve, reject) => {
+            const reader = new FileReader()
+            reader.readAsDataURL(file)
+            reader.onload = () => resolve(reader.result)
+            reader.onerror = (err) => reject(err)
+          })
+
+          const img = new Image()
+          img.src = dataURL
+
+          await new Promise((resolve) => {
+            img.onload = () => {
+              create(img, Orientation)
+              resolve()
+            }
+          })
+        } catch (err) {
+          console.error('读取图片或 EXIF 失败', err)
+        }
+      }
+
+      e.target.value = ''
+    }
+
+    const create = (file, Orientation) => {
+      let data = null
+      const img = new Image()
+      const mpImg = new MegaPixImage(file)
+
+      mpImg.render(img, { maxWidth: 600, quality: 0.8 })
+      img.onload = function () {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+        ctx.clearRect(0, 0, canvas.width, canvas.height)
+        canvas.width = img.width
+        canvas.height = img.height
+        ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
+        data = canvas.toDataURL('image/jpeg', 0.8)
+
+        if (navigator.userAgent.match(/iphone/i)) {
+          if (Orientation && Orientation !== 1) {
+            switch (Orientation) {
+            case 6: rotateImg(this, 'left', canvas); break
+            case 8: rotateImg(this, 'right', canvas); break
+            case 3:
+              rotateImg(this, 'right', canvas)
+              rotateImg(this, 'right', canvas)
+              break
+            }
+          }
+          data = canvas.toDataURL('image/jpeg', 0.8)
+        }
+
+        if (navigator.userAgent.match(/Android/i)) {
+          const JPEGEncoder = JPEG.JPEGEncoder
+          const encoder = new JPEGEncoder()
+          data = encoder.encode(ctx.getImageData(0, 0, canvas.width, canvas.height), 80)
+        }
+
+        const result = {
+          base64: data,
+          clearBase64: data.substr(data.indexOf(',') + 1)
+        }
+
+        files.value.push(result)
+
+        if (files.value.length === fileLength.value) {
+          proxy.$Indicator.remove()
+        }
+      }
+    }
+
+    const rotateImg = (img, direction, canvas) => {
+      const minStep = 0
+      const maxStep = 3
+      if (!img) return
+      const height = img.height
+      const width = img.width
+      let step = 2
+      if (direction === 'right') {
+        step++
+        step > maxStep && (step = minStep)
+      } else {
+        step--
+        step < minStep && (step = maxStep)
+      }
+      const degree = (step * 90 * Math.PI) / 180
+      const ctx = canvas.getContext('2d')
+      switch (step) {
+      case 0: canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); break
+      case 1: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, 0, -height, canvas.height, canvas.width); break
+      case 2: canvas.width = width; canvas.height = height; ctx.rotate(degree); ctx.drawImage(img, -width, -height, canvas.width, canvas.height); break
+      case 3: canvas.width = height; canvas.height = width; ctx.rotate(degree); ctx.drawImage(img, -width, 0, canvas.height, canvas.width); break
+      }
+    }
+
+    return {
+      files,
+      classes,
+      wrapperClasses,
+      upload,
+      showPhoto
+    }
+  }
+})
+</script>

package/src/config/config.js

@@ -0,0 +1,16 @@
+/**
+ * Created by yishide on 16/7/18.
+ */
+
+const config = {
+  env: process.env.NODE_ENV,
+  PROJECT: 'dpzvc3',
+  VERSION: '3.0',
+  doc_title: '',
+  baseUrl: '',
+  isIPad: /ipad/i.test(window.navigator.userAgent),
+  isIphone: /iphone|ipad|ipod/i.test(window.navigator.userAgent),
+  isWechat: /MicroMessenger/i.test(window.navigator.userAgent),
+  isUCBrowser: /UCWEB|UCBrowser/i.test(window.navigator.userAgent)
+}
+export default config

package/src/directives/clickoutside.js

@@ -0,0 +1,42 @@
+const clickoutsideContext = '@@clickoutsideContext'
+
+export default {
+  beforeMount (el, binding) {
+    // document 事件处理函数
+    const documentHandler = (e) => {
+      // 如果点击元素本身或其子元素，则不触发
+      if (!el.contains(e.target)) {
+        // 调用传入的方法
+        if (typeof binding.value === 'function') {
+          binding.value(e)
+        }
+      }
+    }
+
+    // 保存上下文信息到 el 上，方便解绑
+    el[clickoutsideContext] = {
+      documentHandler,
+      event: binding.arg || 'click'
+    }
+
+    document.addEventListener(el[clickoutsideContext].event, documentHandler)
+  },
+
+  updated (el, binding) {
+    // 可以在更新时替换方法
+    // binding.value 已经是最新函数
+    el[clickoutsideContext].documentHandler = (e) => {
+      if (!el.contains(e.target) && typeof binding.value === 'function') {
+        binding.value(e)
+      }
+    }
+  },
+
+  unmounted (el) {
+    document.removeEventListener(
+      el[clickoutsideContext].event,
+      el[clickoutsideContext].documentHandler
+    )
+    delete el[clickoutsideContext]
+  }
+}

package/src/directives/tranferDom.js

@@ -0,0 +1,66 @@
+/**
+ * Created by admin on 2017/5/5.
+ */
+function getTarget (node) {
+  // eslint-disable-next-line no-void
+  if (node === void 0) {
+    node = document.body
+  }
+  if (node === true) { return document.body }
+  return node instanceof window.Node ? node : document.querySelector(node)
+}
+
+const directive = {
+  inserted (el, { value }, vnode) {
+    el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom'
+    const parentNode = el.parentNode
+    const home = document.createComment('')
+    let hasMovedOut = false
+
+    if (value !== false) {
+      parentNode.replaceChild(home, el) // moving out, el is no longer in the document
+      getTarget(value).appendChild(el) // moving into new place
+      hasMovedOut = true
+    }
+    if (!el.__transferDomData) {
+      el.__transferDomData = {
+        parentNode,
+        home,
+        target: getTarget(value),
+        hasMovedOut
+      }
+    }
+  },
+  componentUpdated (el, { value }) {
+    // need to make sure children are done updating (vs. `update`)
+    const ref$1 = el.__transferDomData
+    // homes.get(el)
+    const parentNode = ref$1.parentNode
+    const home = ref$1.home
+    const hasMovedOut = ref$1.hasMovedOut // recall where home is
+
+    if (!hasMovedOut && value) {
+      // remove from document and leave placeholder
+      parentNode.replaceChild(home, el)
+      // append to target
+      getTarget(value).appendChild(el)
+      el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: true, target: getTarget(value) })
+    } else if (hasMovedOut && value === false) {
+      // previously moved, coming back home
+      parentNode.replaceChild(el, home)
+      el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: false, target: getTarget(value) })
+    } else if (value) {
+      // already moved, going somewhere else
+      getTarget(value).appendChild(el)
+    }
+  },
+  unbind: function unbind (el, binding) {
+    el.className = el.className.replace('v-transfer-dom', '')
+    if (el.__transferDomData.hasMovedOut === true) {
+      el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
+    }
+    el.__transferDomData = null
+  }
+}
+
+export default directive

package/src/index.js

@@ -0,0 +1,149 @@
+/**
+ * Created by admin on 2025/12/25.
+ * Vue 3 version
+ */
+
+/* ========= 组件引入 ========= */
+
+import VButton from './components/button'
+import CheckBox from './components/checkBox'
+import DpHeader from './components/header'
+import Message from './components/message'
+import Modal from './components/modal'
+import Picker from './components/picker'
+import RadioBox from './components/radioBox'
+import Swipe from './components/swipe'
+import Tab from './components/tab'
+import Prompt from './components/prompt'
+import SlideBar from './components/slideBar'
+import TextBar from './components/Text'
+import Upload from './components/upload'
+import ActionSheet from './components/action-sheet'
+import SwitchBar from './components/switchbar'
+import Rater from './components/rater'
+import Spinner from './components/spinner'
+import LoadMore from './components/loadMore'
+import Popup from './components/popup'
+import Indicator from './components/Indicator'
+import Progress from './components/progress'
+import ToTop from './components/toTop'
+import Cell from './components/cell'
+import CellSwipe from './components/cell-swipe'
+import Badge from './components/badge'
+import Card from './components/card'
+
+/* ========= 组件集合 ========= */
+
+const components = {
+  VButton,
+  CheckBox,
+  CheckBoxGroup: CheckBox.group,
+  RadioBox,
+  RadioBoxGroup: RadioBox.group,
+  DpHeader,
+  Picker,
+  Swipe,
+  Tab,
+  SlideBar,
+  TextBar,
+  Number: TextBar.Number,
+  Upload,
+  ActionSheet,
+  SwitchBar,
+  Rater,
+  Spinner,
+  LoadMore,
+  Popup,
+  DpProgress: Progress,
+  ToTop,
+  Cell,
+  CellSwipe,
+  Badge,
+  Card
+}
+
+/* ========= 服务组件 ========= */
+
+const services = {
+  Message,
+  Modal,
+  Prompt,
+  Indicator
+}
+
+/* ========= 给单个组件补 install（Vue 3 写法） ========= */
+
+Object.keys(components).forEach(key => {
+  const component = components[key]
+  if (component && !component.install) {
+    component.install = (app) => {
+      app.component(key, component)
+    }
+  }
+})
+
+Object.keys(services).forEach(key => {
+  const service = services[key]
+  if (service && !service.install) {
+    service.install = (app) => {
+      app.config.globalProperties[`$${key}`] = service
+    }
+  }
+})
+
+/* ========= 全量 install ========= */
+
+const install = (app) => {
+  // if (install.installed) return
+  // install.installed = true
+  if (!app) {
+    console.warn('dpzvc3 install: app is undefined, ensure you are using Vue 3 createApp')
+    return
+  }
+  // 注册组件
+  Object.keys(components).forEach(key => {
+    app.component(key, components[key])
+  })
+
+  // 注册服务
+  Object.keys(services).forEach(key => {
+    app.config.globalProperties[`$${key}`] = services[key]
+  })
+}
+
+/* ========= 按需导出 ========= */
+
+export {
+  VButton,
+  CheckBox,
+  DpHeader,
+  Message,
+  Modal,
+  Prompt,
+  Picker,
+  RadioBox,
+  Swipe,
+  Tab,
+  SlideBar,
+  TextBar,
+  Upload,
+  ActionSheet,
+  SwitchBar,
+  Rater,
+  Spinner,
+  LoadMore,
+  Popup,
+  Indicator,
+  Progress,
+  ToTop,
+  Cell,
+  CellSwipe,
+  Badge,
+  Card
+}
+
+/* ========= 默认导出 ========= */
+
+export default {
+  install
+}