dpzvc3-ui 3.0.0

package/src/components/app.vue

@@ -0,0 +1,61 @@
+<template>
+  <div id="app">
+    <transition :name="direction">
+      <router-view class="page" />
+    </transition>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      direction: 'dpzvc3-ani-fade'
+    }
+  },
+  watch: {
+    $route (to, from) {
+      const toDepth = to.path.split('/').length
+      const fromDepth = from.path.split('/').length
+
+      if (toDepth === fromDepth) {
+        this.direction = 'dpzvc3-ani-fade'
+      } else if (toDepth > fromDepth) {
+        this.direction = 'dpzvc3-ani-left'
+      } else {
+        this.direction = 'dpzvc3-ani-right'
+      }
+    }
+  },
+  mounted () {
+
+  },
+  beforeUnmount () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+<style lang="less">
+    // @import '../styles/common.css';
+
+    // @import '../../src/styles/index';
+     @import '../styles/index.less';
+
+    .page{
+        position: relative;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    html,body {
+        height: 100%;
+    }
+
+    #app {
+        height: 100%;
+    }
+</style>

package/src/components/badge/badge.vue

@@ -0,0 +1,80 @@
+<template>
+  <span :class="classes">
+    <slot />
+    <sup
+      v-show="visible"
+      :class="supClasses"
+    >{{ displayCount }}</sup>
+  </span>
+</template>
+
+<script>
+import { computed, ref, watch } from 'vue'
+
+const prefixCls = 'dpzvc3-badge'
+
+export default {
+  name: 'Dpzvc3Badge',
+  props: {
+    type: {
+      type: String,
+      default: 'danger',
+      validator: (val) => ['normal', 'danger', 'warning', 'success'].includes(val)
+    },
+    size: {
+      type: String,
+      default: 'normal',
+      validator: (val) => ['small', 'normal', 'large'].includes(val)
+    },
+    dot: {
+      type: Boolean,
+      default: false
+    },
+    max: {
+      type: [Number, String],
+      default: 99
+    },
+    number: [Number, String]
+  },
+  setup (props) {
+    const visible = ref(true)
+
+    // 监听 number 来控制 visible
+    watch(
+      () => props.number,
+      (val) => {
+        if (props.dot) {
+          visible.value = true
+        } else if (val == null || isNaN(Number(val))) {
+          visible.value = false
+        } else {
+          visible.value = true
+        }
+      },
+      { immediate: true }
+    )
+
+    const classes = computed(() => [prefixCls])
+    const supClasses = computed(() => [
+      `${prefixCls}-${props.type}`,
+      {
+        [`${prefixCls}-size-${props.size}`]: !props.dot,
+        [`${prefixCls}-dot`]: props.dot
+      }
+    ])
+
+    const displayCount = computed(() => {
+      if (props.dot) return ''
+      const num = Number(props.number)
+      return num <= Number(props.max) ? String(num) : String(props.max) + '+'
+    })
+
+    return {
+      classes,
+      supClasses,
+      visible,
+      displayCount
+    }
+  }
+}
+</script>

package/src/components/badge/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2025/11/4.
+ */
+import Badge from './badge'
+export default Badge

package/src/components/button/button.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    :class="classes"
+    :style="wrapperStyles"
+  >
+    <button
+      :style="styles"
+      :class="buttonClass"
+      :disabled="disabled"
+      @click.stop="handleClick"
+    >
+      <slot name="left">
+        <span
+          v-show="loadingValue"
+          class="loading"
+        >
+          <Spinner
+            type="blade"
+            size="15"
+            color="#ffffff"
+          />
+        </span>
+      </slot>
+      <slot><span>确定</span></slot>
+      <slot name="right" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+import Spinner from '../spinner'
+
+const prefixCls = 'dpzvc3-button'
+
+export default defineComponent({
+  name: 'VButton',
+  components: { Spinner },
+  props: {
+    type: {
+      type: String,
+      default: 'normal',
+      validator: (val) =>
+        ['success', 'loading', 'normal', 'primary', 'warning', 'danger', 'text'].includes(val)
+    },
+    styles: {
+      type: Object,
+      default: () => ({})
+    },
+    circle: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    inline: { type: Boolean, default: false },
+    width: { type: String, default: '100%' },
+    height: { type: String, default: '40px' },
+    loading: { type: Boolean, default: false },
+    radius: { type: Boolean, default: true },
+    border: { type: String, default: 'all' }
+  },
+  setup (props, { emit }) {
+    // 外层容器类
+    const classes = computed(() => [
+      prefixCls,
+      {
+        [`${prefixCls}-circle`]: props.circle,
+        [`${prefixCls}-inline`]: props.inline
+      }
+    ])
+
+    // 外层容器样式
+    const wrapperStyles = computed(() => ({
+      display: props.inline ? 'inline-block' : 'block',
+      width: props.width,
+      height: props.height
+    }))
+
+    // button 类
+    const buttonClass = computed(() => [
+      `${prefixCls}-btn`,
+      [`dpzvc3-1px-${props.border}`],
+      {
+        [`${prefixCls}-success`]: props.type === 'success',
+        [`${prefixCls}-loading`]: props.type === 'loading',
+        [`${prefixCls}-normal`]: props.type === 'normal',
+        [`${prefixCls}-warning`]: props.type === 'warning',
+        [`${prefixCls}-danger`]: props.type === 'danger',
+        [`${prefixCls}-text`]: props.type === 'text',
+        [`${prefixCls}-primary`]: props.type === 'primary',
+        [`${prefixCls}-disabled`]: props.disabled,
+        [`${prefixCls}-radius`]: props.radius
+      }
+    ])
+
+    // 点击事件
+    const handleClick = (e) => {
+      if (props.disabled || props.loading) return
+      emit('click', e)
+    }
+
+    // 状态
+    const loadingValue = computed(() => props.loading)
+
+    return {
+      classes,
+      wrapperStyles,
+      buttonClass,
+      handleClick,
+      loadingValue
+    }
+  }
+})
+</script>

package/src/components/button/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/5/9.
+ */
+import VButton from './button'
+export default VButton

package/src/components/card/card.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    :class="classes"
+    :style="{ width: cardWidth }"
+  >
+    <div :class="headerClass">
+      <slot name="header" />
+    </div>
+    <div :class="contentClass">
+      <slot>
+        <div class="main" />
+      </slot>
+    </div>
+    <div :class="footerClass">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed } from 'vue'
+
+const prefixCls = 'dpzvc3-card'
+
+export default defineComponent({
+  name: 'Dpzvc3Card',
+  props: {
+    width: {
+      type: String,
+      default: '100%'
+    }
+  },
+  setup (props) {
+    const classes = computed(() => [prefixCls])
+    const headerClass = computed(() => [`${prefixCls}-header`, 'dpzvc3-1px-bottom'])
+    const contentClass = computed(() => [`${prefixCls}-content`])
+    const footerClass = computed(() => [`${prefixCls}-footer`, 'dpzvc3-1px-top'])
+    const cardWidth = computed(() => props.width)
+    return {
+      classes,
+      headerClass,
+      contentClass,
+      footerClass,
+      cardWidth
+      // 不返回 width，模板直接用 props.width
+    }
+  }
+})
+</script>

package/src/components/card/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/7/7.
+ */
+import Card from './card'
+export default Card

package/src/components/cell/cell.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    :href="toLink"
+    :class="classes"
+    @click.prevent="handleClick"
+  >
+    <span
+      v-if="hasMask"
+      :class="maskClass"
+    />
+    <div :class="leftClasses">
+      <slot name="left" />
+    </div>
+    <div :class="wrapperClasses">
+      <div :class="titleClass">
+        <slot name="icon" />
+        <slot name="title">
+          <span v-text="title" />
+          <span
+            :class="labelClass"
+            v-text="label"
+          />
+        </slot>
+      </div>
+      <div :class="valueClass">
+        <slot name="value">
+          <span v-text="value" />
+        </slot>
+      </div>
+    </div>
+    <div :class="rightClasses">
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const prefixCls = 'dpzvc3-cell'
+
+export default {
+  name: 'Dpzvc3Cell',
+  props: {
+    title: String,
+    value: {},
+    label: String,
+    link: String,
+    hasMask: Boolean
+  },
+  setup (props, { emit }) {
+    const router = useRouter()
+
+    // 计算链接
+    const toLink = computed(() => {
+      if (!props.link) return ''
+      // Vue 3 router.resolve 替代 Vue 2 match
+      const resolved = router.resolve(props.link)
+      return resolved.matched.length ? resolved.href : props.link
+    })
+
+    // 样式类
+    const classes = computed(() => [`${prefixCls}`])
+    const maskClass = computed(() => [`${prefixCls}-mask`])
+    const leftClasses = computed(() => [`${prefixCls}-left`])
+    const rightClasses = computed(() => [`${prefixCls}-right`])
+    const wrapperClasses = computed(() => [`${prefixCls}-main`, 'dpzvc3-1px-top'])
+    const titleClass = computed(() => [`${prefixCls}-main-title`])
+    const valueClass = computed(() => [`${prefixCls}-main-value`])
+    const labelClass = computed(() => [`${prefixCls}-main-label`])
+
+    // 点击跳转
+    const handleClick = (e) => {
+      if (props.link) router.push(props.link)
+    }
+
+    return {
+      toLink,
+      classes,
+      maskClass,
+      leftClasses,
+      rightClasses,
+      wrapperClasses,
+      titleClass,
+      valueClass,
+      labelClass,
+      handleClick,
+      emit
+    }
+  }
+}
+</script>

package/src/components/cell/index.js

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

package/src/components/cell-swipe/cell-swipe.vue

@@ -0,0 +1,169 @@
+<template>
+  <Cell
+    ref="cell"
+    v-clickoutside:touchstart="swipe"
+    :title="title"
+    :value="value"
+    :label="label"
+    :link="link"
+    :has-mask="hasMask"
+    @click="swipe()"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+  >
+    <template #left>
+      <div
+        ref="leftRef"
+        class="dpzvc3-cell-swipe-group"
+      >
+        <span
+          v-for="(item, key) in left"
+          :key="key"
+          class="dpzvc3-cell-swipe-btn"
+          :style="item.style"
+          @click.stop="() => { item.handleClick && item.handleClick(); swipe() }"
+          v-html="item.content"
+        />
+      </div>
+    </template>
+
+    <template #right>
+      <div
+        ref="rightRef"
+        class="dpzvc3-cell-swipe-group"
+      >
+        <span
+          v-for="(item, key) in right"
+          :key="key"
+          class="dpzvc3-cell-swipe-btn"
+          :style="item.style"
+          @click.stop="() => { item.handleClick && item.handleClick(); swipe() }"
+          v-html="item.content"
+        />
+      </div>
+    </template>
+  </Cell>
+</template>
+
+<script>
+import { ref, reactive, onMounted, watch, nextTick } from 'vue'
+import Cell from '../cell'
+import Clickoutside from '../../directives/clickoutside'
+
+export default {
+  name: 'CellSwipe',
+  components: { Cell },
+  directives: { Clickoutside },
+  props: {
+    title: String,
+    value: {},
+    label: String,
+    link: String,
+    left: Array,
+    right: Array,
+    hasMask: Boolean
+  },
+  setup (props) {
+    const cell = ref(null)
+    const leftRef = ref(null)
+    const rightRef = ref(null)
+
+    const state = reactive({
+      isDrag: false,
+      translate: 0,
+      $wrapper: null,
+      $left: null,
+      $right: null,
+      leftWidth: 0,
+      rightWidth: 0,
+      startX: 0,
+      currentX: 0,
+      direction: '',
+      distance: 0
+    })
+
+    const translate3d = (translate) => `translate3d(${translate}px,0,0)`
+
+    const swipe = (translate = 0) => {
+      state.translate = translate
+      if (state.$wrapper) state.$wrapper.style.transform = translate3d(translate)
+      if (state.$left) state.$left.style.transform = translate3d(-state.leftWidth + translate)
+      if (state.$right) state.$right.style.transform = translate3d(state.rightWidth + translate)
+    }
+
+    const onTouchStart = (e) => {
+      console.log('滑动开始')
+      state.startX = e.touches[0].clientX
+    }
+
+    const onTouchMove = (e) => {
+      console.log('滑动移动')
+      e.preventDefault()
+      state.currentX = e.touches[0].clientX
+      const diff = state.currentX - state.startX
+      state.direction = diff < 0 ? 'left' : 'right'
+
+      if (state.direction === 'left') {
+        state.translate = Math.max(-state.rightWidth, diff)
+      } else {
+        state.translate = Math.min(state.leftWidth, diff)
+      }
+
+      nextTick(() => swipe(state.translate))
+    }
+
+    const onTouchEnd = () => {
+      console.log('滑动结束')
+      if (Math.abs(state.translate) > state.leftWidth / 2 && state.direction === 'right') {
+        swipe(state.leftWidth)
+      } else if (Math.abs(state.translate) > state.rightWidth / 2 && state.direction === 'left') {
+        swipe(-state.rightWidth)
+      } else {
+        swipe(0)
+      }
+    }
+
+    watch(() => props.left, () => {
+      nextTick(() => {
+        state.leftWidth = leftRef.value?.offsetWidth || 0
+        swipe()
+      })
+    })
+
+    watch(() => props.right, () => {
+      nextTick(() => {
+        state.rightWidth = rightRef.value?.offsetWidth || 0
+        swipe()
+      })
+    })
+
+    onMounted(() => {
+      nextTick(() => {
+        // if (!leftRef.value || !rightRef.value || !cell.value) return
+        state.$wrapper = cell.value.$el.querySelector('.dpzvc3-cell-main')
+        state.$left = leftRef.value.parentNode
+        state.$right = rightRef.value.parentNode
+
+        state.leftWidth = state.$left.offsetWidth
+        state.rightWidth = state.$right.offsetWidth
+
+        state.$left.style.transform = translate3d(-state.leftWidth)
+        state.$right.style.transform = translate3d(state.rightWidth + 1)
+        state.$wrapper.style.transform = translate3d(0)
+      })
+    })
+
+    return {
+      cell,
+      leftRef,
+      rightRef,
+      state,
+      swipe,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd
+    }
+  }
+}
+</script>

package/src/components/cell-swipe/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/7/4.
+ */
+import CellSwipe from './cell-swipe'
+export default CellSwipe

package/src/components/checkBox/checkbox-group.vue

@@ -0,0 +1,74 @@
+<template>
+  <div
+    :class="[
+      'dpzvc3-checkBoxGroup',
+      vertical ? 'dpzvc3-checkBoxGroup-vertical' : ''
+    ]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, watch, provide } from 'vue'
+// import Emitter from '../../mixin/emitter'
+
+export default defineComponent({
+  name: 'CheckBoxGroup',
+  // mixins: [Emitter],
+
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    single: {
+      type: Boolean,
+      default: false
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  emits: ['update:modelValue', 'on-change'],
+
+  setup (props, { emit }) {
+    // alert(props)
+    const currentValue = ref([...props.modelValue])
+
+    /** 对外暴露给 checkbox 的方法 */
+    const toggleOption = (label) => {
+      let newValue = []
+      newValue = [...label]
+      // currentValue.value = newValue
+      emit('update:modelValue', newValue)
+      emit('on-change', newValue)
+    }
+
+    /** 提供给子 checkbox */
+    provide('CheckBoxGroup', {
+      currentValue,
+      toggleOption
+      // single: props.single
+    })
+
+    watch(
+      () => props.modelValue,
+      (val) => {
+        currentValue.value = [...val]
+      }
+    )
+
+    return {}
+  }
+})
+</script>
+
+<style scoped>
+.dpzvc3-checkBoxGroup-vertical {
+  display: flex;
+  flex-direction: column;
+}
+</style>