dpzvc3-ui 3.0.0

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "dpzvc3-ui",
+  "version": "3.0.0",
+  "description": "Vue组件库",
+  "main": "dist/dpzvc3.js",
+  "module": "dist/dpzvc3.esm.js",
+  "scripts": {
+    "init": "webpack --progress --config webpack.dev.config.js",
+    "dev": "webpack serve --config webpack.dev.config.js --open",
+    "build:style": "gulp --gulpfile build-style.js",
+    "build:dev": "webpack --config webpack.dist.dev.config.js",
+    "build:prod": "webpack --config webpack.dist.prod.config.js",
+    "build": "npm run build:style && npm run build:dev && npm run build:prod",
+    "dist": "webpack --progress --config webpack.prod.config.js",
+    "prepare": "husky"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yishide/dpzvc3.git"
+  },
+  "keywords": [
+    "Vue3",
+    "Vue3 Cli",
+    "Webpack5",
+    "dpzvc3",
+    "UI",
+    "Vue3 Components",
+    "Vue3组件库",
+    "移动端组件库"
+  ],
+  "dependencies": {
+    "china-area-data": "^3.0.0",
+    "core-js": "^2.4.1",
+    "deepmerge": "^1.3.1",
+    "exifr": "^7.1.3",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "@vue/compiler-sfc": "^3.5.26",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "autoprefixer": "^10.4.23",
+    "autoprefixer-loader": "^2.0.0",
+    "babel": "^6.23.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.4.1",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-latest": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "cross-env": "^3.1.4",
+    "css-loader": "^6.11.0",
+    "del": "^8.0.1",
+    "eslint": "^8.57.1",
+    "eslint-plugin-html": "^1.7.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-vue": "^9.33.0",
+    "eslint-webpack-plugin": "^4.2.0",
+    "file-loader": "^0.8.5",
+    "function-bind": "^1.1.0",
+    "gh-pages": "^6.3.0",
+    "gulp": "^4.0.2",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-cli": "^2.3.0",
+    "gulp-header": "^2.0.9",
+    "gulp-less": "^5.0.0",
+    "gulp-postcss": "^10.0.0",
+    "gulp-rename": "^2.1.0",
+    "html-loader": "^0.3.0",
+    "html-webpack-plugin": "^5.6.5",
+    "husky": "^9.1.7",
+    "less": "^4.5.1",
+    "less-loader": "^11.1.4",
+    "lint-staged": "^16.2.7",
+    "lolex": "^1.5.2",
+    "mini-css-extract-plugin": "^2.9.4",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^6.2.1",
+    "style-loader": "^3.3.4",
+    "terser-webpack-plugin": "^4.2.3",
+    "url-loader": "^0.5.9",
+    "vue": "^3.5.26",
+    "vue-hot-reload-api": "^1.3.3",
+    "vue-html-loader": "^1.2.3",
+    "vue-loader": "^17.4.2",
+    "vue-style-loader": "^4.1.3",
+    "webpack": "^5.104.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.2",
+    "webpack-merge": "^5.10.0"
+  },
+  "author": "yishide",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/yishide/dpzvc3/issues"
+  },
+  "homepage": "https://github.com/yishide/dpzvc3#readme",
+  "directories": {
+    "example": "example"
+  },
+  "lint-staged": {
+    "*.{js,vue}": [
+      "eslint --max-warnings=0"
+    ]
+  }
+}

package/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')()
+  ]
+}

package/src/components/Indicator/Indicator.vue

@@ -0,0 +1,82 @@
+<template>
+  <transition name="dpzvc3-ani-fade">
+    <div
+      v-show="visible"
+      :class="classes"
+      @touchmove.prevent
+    >
+      <div :class="containerClasses">
+        <div :class="wrapperClasses">
+          <Spinner
+            :size="size"
+            :type="type"
+            :color="color"
+          />
+          <span :style="{ color }">{{ text }}</span>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { defineComponent, ref, watch, computed } from 'vue'
+import Spinner from '../spinner'
+
+const prefixCls = 'dpzvc3-Indicator'
+
+export default defineComponent({
+  name: 'Dpzvc3Indicator',
+  components: { Spinner },
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: '#ffffff'
+    },
+    type: {
+      type: String,
+      default: 'snake'
+    },
+    size: {
+      type: [Number, String],
+      default: 45
+    },
+    text: {
+      type: String,
+      default: '加载中...'
+    }
+  },
+  emits: ['update:modelValue'],
+  setup (props, { emit }) {
+    const visible = ref(props.modelValue)
+
+    // watch modelValue 更新 visible
+    watch(
+      () => props.modelValue,
+      val => {
+        visible.value = val
+      }
+    )
+
+    // watch visible 更新 v-model
+    watch(visible, val => {
+      emit('update:modelValue', val)
+    })
+
+    const classes = computed(() => [prefixCls])
+    const containerClasses = computed(() => [`${prefixCls}-container`])
+    const wrapperClasses = computed(() => [`${prefixCls}-wrapper`])
+
+    return {
+      visible,
+      classes,
+      containerClasses,
+      wrapperClasses
+    }
+  }
+})
+</script>

package/src/components/Indicator/index.js

@@ -0,0 +1,86 @@
+/**
+ * Indicator - Vue 3 版本
+ */
+import { createVNode, render } from 'vue'
+import Indicator from './Indicator.vue'
+
+let instance = null
+let container = null
+
+function createInstance (props = {}) {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+
+  const defaultProps = {
+    size: 45,
+    type: 'snake',
+    color: '#ffffff',
+    text: '加载中...',
+    visible: false,
+    ...props
+  }
+  const vnode = createVNode(Indicator, {
+    ...defaultProps,
+    onRemove: destroyInstance
+  })
+  render(vnode, container)
+  instance = vnode.component
+  return instance
+}
+
+function destroyInstance () {
+  if (!instance || !container) return
+  render(null, container)
+  if (container.parentNode) {
+    container.parentNode.removeChild(container)
+  }
+  instance = null
+  container = null
+}
+
+function open (options = {}) {
+  if (!instance) {
+    createInstance(options)
+  }
+
+  // 更新 props
+  if (instance) {
+    Object.keys(options).forEach(key => {
+      instance.props[key] = options[key]
+    })
+    instance.props.modelValue = true
+  }
+}
+
+function close () {
+  if (!instance) return
+  instance.props.modelValue = false
+  destroyInstance()
+}
+
+/* ================== 对外 API ================== */
+
+Indicator.open = open
+Indicator.remove = close
+
+Indicator.snake = function (props = {}) {
+  props.type = 'snake'
+  open(props)
+}
+
+Indicator.blade = function (props = {}) {
+  props.type = 'blade'
+  open(props)
+}
+
+Indicator.circle = function (props = {}) {
+  props.type = 'fading-circle'
+  open(props)
+}
+
+Indicator.bounce = function (props = {}) {
+  props.type = 'double-bounce'
+  open(props)
+}
+
+export default Indicator

package/src/components/Text/Number.vue

@@ -0,0 +1,167 @@
+<template>
+  <div
+    :class="classes"
+    :style="containerStyle"
+  >
+    <!-- 减按钮 -->
+    <div
+      :class="reduceClasses"
+      :style="getChangeStyle"
+      @click="change('reduce', downDisabled)"
+    >
+      <slot name="reduce">
+        -
+      </slot>
+    </div>
+
+    <!-- 输入框 -->
+    <div :class="wrapperClasses">
+      <input
+        type="number"
+        :style="inputStyle"
+        :min="min"
+        :max="max"
+        :step="step"
+        :value="currentValue"
+        :autocomplete="autocomplete"
+        @input="changeInput"
+        @focus="focusInput"
+        @blur="blurInput"
+        @change="onChangeInput"
+        @keyup.38="change('reduce', downDisabled)"
+        @keyup.40="change('add', upDisabled)"
+      >
+    </div>
+
+    <!-- 加按钮 -->
+    <div
+      :class="addtionClasses"
+      :style="getChangeStyle"
+      @click="change('add', upDisabled)"
+    >
+      <slot name="add">
+        +
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch, onMounted } from 'vue'
+import Input from '../../mixin/input'
+
+const prefixCls = 'dpzvc3-number'
+
+export default defineComponent({
+  name: 'Dpzvc3Number',
+  mixins: [Input],
+  props: {
+    min: { type: [Number, String], default: -Infinity },
+    max: { type: [Number, String], default: Infinity },
+    modelValue: [Number, String],
+    step: { type: Number, default: 1 },
+    width: { type: Number, default: 60 },
+    height: { type: Number, default: 35 },
+    numberStyle: { type: Object, default: () => ({}) },
+    containerStyle: { type: Object, default: () => ({}) }
+  },
+  emits: ['update:modelValue', 'input', 'on-input'],
+  setup (props, { emit }) {
+    const currentValue = ref(props.modelValue)
+    const upDisabled = ref(false)
+    const downDisabled = ref(false)
+
+    // 计算类名
+    const classes = computed(() => [prefixCls])
+    const reduceClasses = computed(() => [
+      `${prefixCls}-changevalue`,
+      'left',
+      { disabled: downDisabled.value }
+    ])
+    const addtionClasses = computed(() => [
+      `${prefixCls}-changevalue`,
+      'right',
+      { disabled: upDisabled.value }
+    ])
+    const wrapperClasses = computed(() => [`${prefixCls}-wrapper`])
+    const getChangeStyle = computed(() => ({
+      width: `${props.height}px`,
+      height: `${props.height}px`,
+      lineHeight: `${props.height}px`
+    }))
+    const inputStyle = computed(() => ({
+      ...props.numberStyle,
+      width: `${props.width}px`,
+      height: `${props.height}px`
+    }))
+
+    // 改变值时计算按钮状态
+    function changeVal (val) {
+      const numberVal = Number(val)
+      if (!isNaN(numberVal) || numberVal === 0) {
+        upDisabled.value = numberVal + props.step > props.max
+        downDisabled.value = numberVal - props.step < props.min
+      } else {
+        upDisabled.value = true
+        downDisabled.value = true
+      }
+    }
+
+    function setValue (val) {
+      currentValue.value = val
+      emit('input', val)
+      emit('update:modelValue', val)
+    }
+
+    // 输入框事件
+    function changeInput (e) {
+      let val = e.target.value.trim()
+      val = Number(val)
+      if (val < props.min) val = props.min
+      if (val > props.max) val = props.max
+      setValue(val)
+      e.target.value = currentValue.value
+      emit('on-input', e)
+      emit('update:modelValue', val)
+    }
+
+    // 点击加减按钮
+    function change (type, disabled) {
+      if (disabled) return
+      let val = Number(currentValue.value)
+      if (isNaN(val)) return
+      if (type === 'reduce') val -= props.step
+      else if (type === 'add') val += props.step
+      if (val < props.min) val = props.min
+      if (val > props.max) val = props.max
+      setValue(val)
+    }
+
+    watch(() => props.modelValue, (val) => {
+      currentValue.value = val
+    })
+
+    watch(currentValue, (val) => {
+      changeVal(val)
+    })
+
+    onMounted(() => {
+      changeVal(currentValue.value)
+    })
+
+    return {
+      currentValue,
+      upDisabled,
+      downDisabled,
+      classes,
+      reduceClasses,
+      addtionClasses,
+      wrapperClasses,
+      getChangeStyle,
+      inputStyle,
+      changeInput,
+      change
+    }
+  }
+})
+</script>

package/src/components/Text/index.js

@@ -0,0 +1,7 @@
+/**
+ * Created by admin on 2025/9/24.
+ */
+import Text from './textBar'
+import Number from './Number'
+Text.Number = Number
+export default Text

package/src/components/Text/textBar.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+    :class="classes"
+    :style="styles"
+  >
+    <!-- 普通输入框 -->
+    <label
+      v-if="type !== 'textarea'"
+      :class="inputClasses"
+      :style="inputStyles"
+    >
+      <input
+        :type="type"
+        :autofocus="autofocus"
+        :value="currentVal"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :maxlength="maxlength"
+        :autocomplete="autocomplete"
+        :name="name"
+        :disabled="disable"
+        @input="changeInput"
+        @blur="blurInput"
+        @focus="focusInput"
+        @keyup.enter="enterInput"
+        @change="onChangeInput"
+      >
+    </label>
+
+    <!-- 多行文本框 -->
+    <label
+      v-else
+      :class="textareaClasses"
+    >
+      <textarea
+        :type="type"
+        :autofocus="autofocus"
+        :value="currentVal"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :maxlength="maxlength"
+        :name="name"
+        :rows="rows"
+        :disabled="disable"
+        @input="changeInput"
+        @blur="blurInput"
+        @focus="focusInput"
+        @keyup.enter="enterInput"
+        @change="onChangeInput"
+      />
+    </label>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, watch } from 'vue'
+import Input from '../../mixin/input'
+
+const prefixCls = 'dpzvc3-textBar'
+
+export default defineComponent({
+  name: 'TextBar',
+  mixins: [Input],
+  props: {
+    rows: Number,
+    autofocus: { type: Boolean, default: true },
+    type: { type: String, default: 'text' },
+    modelValue: { type: [String, Number], default: '' },
+    placeholder: { type: [String, Number], default: '请输入' },
+    inputStyles: Object,
+    maxlength: Number,
+    name: String,
+    readonly: { type: Boolean, default: false }
+  },
+  emits: ['update:modelValue', 'input', 'on-input', 'on-enter'],
+  setup (props, { emit }) {
+    const currentVal = ref(props.modelValue)
+
+    // 类名
+    const classes = computed(() => [prefixCls])
+    const inputClasses = computed(() => [`${prefixCls}-input`])
+    const textareaClasses = computed(() => [`${prefixCls}-textarea`])
+
+    // 监听 props.value 改变
+    watch(
+      () => props.modelValue,
+      (val) => {
+        currentVal.value = val
+      }
+    )
+
+    // 监听内部值变化
+    watch(currentVal, (val) => {
+      emit('input', val)
+      emit('on-input', val)
+      emit('update:modelValue', val)
+    })
+
+    // 输入事件
+    function changeInput (e) {
+      currentVal.value = e.target.value
+      emit('input', currentVal.value)
+      emit('on-input', e)
+      emit('update:modelValue', currentVal.value)
+    }
+
+    // 回车事件
+    function enterInput (e) {
+      emit('on-enter', e)
+    }
+
+    return {
+      currentVal,
+      classes,
+      inputClasses,
+      textareaClasses,
+      changeInput,
+      enterInput
+    }
+  }
+})
+</script>

package/src/components/action-sheet/actionSheet.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <Popup
+      v-model="visible"
+      position="bottom"
+      :styles="{ background: 'transparent' }"
+    >
+      <div :class="classes">
+        <ul :class="wrapperClasses">
+          <li
+            v-for="(item, key) in actions"
+            :key="key"
+            :class="wrapperActionClass"
+            @click="emit(item, key)"
+          >
+            <span>{{ item.text }}</span>
+          </li>
+        </ul>
+        <a
+          v-if="cancleText"
+          href="javascript:;"
+          :class="cancleClass"
+          @click="visible = false"
+        >{{ cancleText }}</a>
+      </div>
+    </Popup>
+  </div>
+</template>
+
+<script>
+import { ref, computed, watch } from 'vue'
+import Popup from '../popup'
+
+const prefixCls = 'dpzvc3-actionSheet'
+
+export default {
+  name: 'ActionSheet',
+  components: { Popup },
+  props: {
+    modelValue: { // Vue 3 v-model 默认绑定 modelValue
+      type: Boolean,
+      default: false
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    cancleText: {
+      type: String,
+      default: '取消'
+    }
+  },
+  setup (props, { emit }) {
+    // 内部状态
+    const visible = ref(props.modelValue)
+    const actions = ref(props.items)
+
+    // 同步 props.modelValue
+    watch(() => props.modelValue, (val) => {
+      visible.value = val
+    })
+
+    // 监听 visible 改变，通知父组件
+    watch(visible, (val) => {
+      emit('update:modelValue', val)
+    })
+
+    // 样式类
+    const classes = computed(() => [prefixCls])
+    const wrapperClasses = computed(() => [`${prefixCls}-wrapper`])
+    const wrapperActionClass = computed(() => [`${prefixCls}-wrapper-action`])
+    const cancleClass = computed(() => [`${prefixCls}-cancle`])
+
+    // 点击事件
+    const emitAction = (item, index) => {
+      if (item.onClick && typeof item.onClick === 'function') {
+        item.onClick(item, index)
+      }
+      visible.value = false
+    }
+
+    return {
+      visible,
+      actions,
+      classes,
+      wrapperClasses,
+      wrapperActionClass,
+      cancleClass,
+      emit: emitAction
+    }
+  }
+}
+</script>

package/src/components/action-sheet/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2025/9/19.
+ */
+import ActionSheet from './actionSheet'
+export default ActionSheet