dpzvc3-ui 3.0.3 → 3.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dpzvc3-ui",
-  "version": "3.0.3",
-  "description": "Vue组件库",
+  "version": "3.0.5",
+  "description": "Vue3组件库",
   "main": "dist/dpzvc3.js",
   "module": "dist/dpzvc3.esm.js",
   "scripts": {

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

@@ -28,12 +28,12 @@
 </template>
 
 <script>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, defineComponent } from 'vue'
 import Popup from '../popup'
 
 const prefixCls = 'dpzvc3-actionSheet'
 
-export default {
+export default defineComponent({
   name: 'ActionSheet',
   components: { Popup },
   props: {
@@ -61,9 +61,9 @@ export default {
     })
 
     // 监听 visible 改变，通知父组件
-    watch(visible, (val) => {
-      emit('update:modelValue', val)
-    })
+    // watch(visible, (val) => {
+    //   emit('update:modelValue', val)
+    // })
 
     // 样式类
     const classes = computed(() => [prefixCls])
@@ -76,7 +76,8 @@ export default {
       if (item.onClick && typeof item.onClick === 'function') {
         item.onClick(item, index)
       }
-      visible.value = false
+      // visible.value = false
+      emit('update:modelValue', false)
     }
 
     return {
@@ -89,5 +90,5 @@ export default {
       emit: emitAction
     }
   }
-}
+})
 </script>

package/src/components/app.vue

@@ -1,9 +1,7 @@
 <template>
-  <div id="app">
-    <transition :name="direction">
-      <router-view class="page" />
-    </transition>
-  </div>
+  <transition :name="direction">
+    <router-view class="page" />
+  </transition>
 </template>
 <script>
 export default {

package/src/components/badge/badge.vue

@@ -9,11 +9,11 @@
 </template>
 
 <script>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, defineComponent } from 'vue'
 
 const prefixCls = 'dpzvc3-badge'
 
-export default {
+export default defineComponent({
   name: 'Dpzvc3Badge',
   props: {
     type: {
@@ -76,5 +76,5 @@ export default {
       displayCount
     }
   }
-}
+})
 </script>

package/src/components/cell/cell.vue

@@ -3,6 +3,9 @@
     :href="toLink"
     :class="classes"
     @click.prevent="handleClick"
+    @touchstart="cellTouchStart"
+    @touchmove="cellTouchMove"
+    @touchend="cellTouchEnd"
   >
     <span
       v-if="hasMask"
@@ -35,12 +38,12 @@
 </template>
 
 <script>
-import { computed } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useRouter } from 'vue-router'
 
 const prefixCls = 'dpzvc3-cell'
 
-export default {
+export default defineComponent({
   name: 'Dpzvc3Cell',
   props: {
     title: String,
@@ -49,6 +52,7 @@ export default {
     link: String,
     hasMask: Boolean
   },
+  emits: ['touchstart', 'touchmove', 'touchend', 'click'],
   setup (props, { emit }) {
     const router = useRouter()
 
@@ -72,7 +76,20 @@ export default {
 
     // 点击跳转
     const handleClick = (e) => {
-      if (props.link) router.push(props.link)
+      if (props.link) { router.push(props.link) } else {
+        emit('click', e)
+      }
+    }
+
+    // 定义touchstart，touchmove，touchend事件
+    const cellTouchStart = (e) => {
+      emit('touchstart', e)
+    }
+    const cellTouchMove = (e) => {
+      emit('touchmove', e)
+    }
+    const cellTouchEnd = (e) => {
+      emit('touchend', e)
     }
 
     return {
@@ -86,8 +103,11 @@ export default {
       valueClass,
       labelClass,
       handleClick,
-      emit
+      emit,
+      cellTouchStart,
+      cellTouchMove,
+      cellTouchEnd
     }
   }
-}
+})
 </script>

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

@@ -1,7 +1,6 @@
 <template>
   <Cell
     ref="cell"
-    v-clickoutside:touchstart="swipe"
     :title="title"
     :value="value"
     :label="label"
@@ -47,14 +46,14 @@
 </template>
 
 <script>
-import { ref, reactive, onMounted, watch, nextTick } from 'vue'
+import { ref, reactive, onMounted, watch, nextTick, defineComponent } from 'vue'
 import Cell from '../cell'
-import Clickoutside from '../../directives/clickoutside'
+// import Clickoutside from '../../directives/clickoutside'
 
-export default {
+export default defineComponent({
   name: 'CellSwipe',
   components: { Cell },
-  directives: { Clickoutside },
+  // directives: { Clickoutside },
   props: {
     title: String,
     value: {},
@@ -165,5 +164,5 @@ export default {
       onTouchEnd
     }
   }
-}
+})
 </script>

package/src/components/header/header.vue

@@ -93,9 +93,9 @@ export default defineComponent({
       }
     )
 
-    watch(visible, val => {
-      emit('update:modelValue', val)
-    })
+    // watch(visible, val => {
+    //   emit('update:modelValue', val)
+    // })
 
     watch(
       () => props.wechat,
@@ -107,7 +107,8 @@ export default defineComponent({
     /** mounted 逻辑 */
     onMounted(() => {
       if ((isWeixin.value || isPcWeixin.value) && !isWechat.value) {
-        visible.value = false
+        // visible.value = false
+        emit('update:modelValue', false)
       }
     })
 

package/src/components/modal/modal.vue

@@ -66,10 +66,10 @@
 </template>
 
 <script>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, defineComponent } from 'vue'
 import VButton from '../button'
 
-export default {
+export default defineComponent({
   name: 'Dpzvc3Modal',
   components: { VButton },
   props: {
@@ -134,5 +134,5 @@ export default {
       ok
     }
   }
-}
+})
 </script>

package/src/components/popup/popup.vue

@@ -21,11 +21,11 @@
 </template>
 
 <script>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, defineComponent } from 'vue'
 
 const prefixCls = 'dpzvc3-popup'
 
-export default {
+export default defineComponent({
   name: 'Dpzvc3Popup',
   props: {
     modelValue: { // Vue 3 v-model 默认绑定
@@ -87,5 +87,5 @@ export default {
       close
     }
   }
-}
+})
 </script>

package/src/components/swipe/swipe.vue

@@ -61,7 +61,7 @@
 
 <script>
 import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
-
+import rafTimeout from '../../lib/lib'
 const prefixCls = 'dpzvc3-swipe'
 
 export default defineComponent({
@@ -205,7 +205,7 @@ export default defineComponent({
     }
 
     function autoSlide () {
-      timer.value = setTimeout(() => {
+      timer.value = rafTimeout(() => {
         if (!dragging.value && autoSwipe.value) {
           translateX.value -= clientWidth.value
           console.log(slideIndex.value, maxIndex.value, 'dsdadddasdss')
@@ -233,7 +233,8 @@ export default defineComponent({
     }
 
     function clearTimer () {
-      if (timer.value) clearTimeout(timer.value)
+      // if (timer.value) clearTimeout(timer.value)
+      timer.value && timer.value()
       timer.value = null
     }
 

package/src/lib/lib.js

@@ -0,0 +1,22 @@
+const rafTimeout = (callback, delay) => {
+  let start = null
+  let rafId
+
+  function loop (timestamp) {
+    if (!start) start = timestamp
+
+    if (timestamp - start >= delay) {
+      callback()
+      cancelAnimationFrame(rafId)
+    } else {
+      rafId = requestAnimationFrame(loop)
+    }
+  }
+
+  rafId = requestAnimationFrame(loop)
+
+  // 返回清除方法
+  return () => cancelAnimationFrame(rafId)
+}
+
+export default rafTimeout