dpzvc3-ui 3.0.2 → 3.0.4

package/dist-prod/slidebar.d7ad5de495550613661f.chunk.js

@@ -0,0 +1,2 @@
+(self.webpackChunkdpzvc3_ui=self.webpackChunkdpzvc3_ui||[]).push([[13],{2684(e,n,i){var t=i(3321);t.__esModule&&(t=t.default),"string"==typeof t&&(t=[[e.id,t,""]]),t.locals&&(e.exports=t.locals);(0,i(534).A)("948cae42",t,!0,{})},3321(e,n,i){"use strict";i.r(n),i.d(n,{default:()=>s});var t=i(1354),l=i.n(t),d=i(6314),r=i.n(d)()(l());r.push([e.id,".SlideBar[data-v-67055e32] {\n  width: 100%;\n}\n/*# sourceMappingURL=SlideBar.css.map */","",{version:3,sources:["webpack://./SlideBar.vue","webpack://./src/views/SlideBar.vue"],names:[],mappings:"AACA;EACE,WAAA;ACAF;AACA,uCAAuC",sourcesContent:["\n.SlideBar {\n  width: 100%;\n}\n",".SlideBar {\n  width: 100%;\n}\n/*# sourceMappingURL=SlideBar.css.map */"],sourceRoot:""}]);const s=r},3542(e,n,i){"use strict";i.r(n),i.d(n,{default:()=>s});var t=i(5458),l=i(1425),d={class:"SlideBar"};const r=(0,l.pM)({name:"ViewSlideBar",setup:function(){return{items:(0,l.KR)([{name:"选项一"},{name:"选项二"},{name:"选项三"}]),index:(0,l.KR)(1),changeIndex:function(e){}}}});i(2684);const s=(0,i(6262).A)(r,[["render",function(e,n,i,r,s,a){var o=(0,l.g2)("Slide-bar",!0);return(0,l.uX)(),(0,l.CE)("div",d,[(0,l.bF)(o,{list:e.items,flex:!1,index:e.index,height:"100%","scroll-height":"50px","is-fixed-header":!0,onOnChange:e.changeIndex},{"slot-item-0":(0,l.k6)(function(){return(0,t.A)(n[0]||(n[0]=[(0,l.Lk)("div",{style:{height:"100%",flex:"1",background:"red",overflow:"scroll"}},[(0,l.Lk)("div",{style:{height:"40px",width:"100%","background-color":"blue"}}),(0,l.Lk)("div",{style:{height:"40px",width:"100%","background-color":"blue"}}),(0,l.Lk)("div",{style:{height:"40px",width:"100%","background-color":"blue"}}),(0,l.Lk)("div",{style:{height:"40px",width:"100%","background-color":"blue"}}),(0,l.Lk)("div",{style:{height:"40px",width:"100%","background-color":"blue"}})],-1)]))}),"slot-item-1":(0,l.k6)(function(){return(0,t.A)(n[1]||(n[1]=[(0,l.Lk)("div",{style:{height:"200px",flex:"1",background:"yellow"}},null,-1)]))}),"slot-item-2":(0,l.k6)(function(){return(0,t.A)(n[2]||(n[2]=[(0,l.Lk)("div",{style:{height:"200px",flex:"1",background:"black"}},null,-1)]))}),_:1},8,["list","index","onOnChange"])])}],["__scopeId","data-v-67055e32"]])}}]);
+//# sourceMappingURL=slidebar.d7ad5de495550613661f.chunk.js.map

package/dist-prod/slidebar.d7ad5de495550613661f.chunk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slidebar.d7ad5de495550613661f.chunk.js","mappings":"oFAGA,IAAIA,EAAU,EAAQ,MACnBA,EAAQC,aAAYD,EAAUA,EAAQE,SACnB,iBAAZF,IAAsBA,EAAU,CAAC,CAACG,EAAOC,GAAIJ,EAAS,MAC7DA,EAAQK,SAAQF,EAAOG,QAAUN,EAAQK,SAG/BE,EADH,UACO,WAAYP,GAAS,EAAM,CAAC,E,0FCNzCQ,E,MAA0B,GAA4B,KAE1DA,EAAwBC,KAAK,CAACN,EAAOC,GAAI,4FAGE,GAAG,CAAC,QAAU,EAAE,QAAU,CAAC,2BAA2B,sCAAsC,MAAQ,GAAG,SAAW,kCAAkC,eAAiB,CAAC,qCAAqC,4EAA4E,WAAa,MAE/U,S,oFCTOM,MAAM,YAmCb,SAAeC,EAAAA,EAAAA,IAAgB,CAC7BC,KAAM,eACNC,MAAI,WAUF,MAAO,CAAEC,OATKC,EAAAA,EAAAA,IAAI,CAChB,CAAEH,KAAM,OACR,CAAEA,KAAM,OACR,CAAEA,KAAM,SAMMI,OAJFD,EAAAA,EAAAA,IAAI,GAIKE,YAHH,SAACD,GAErB,EAEF,I,QC1CF,MAEA,GAFiC,E,QAAA,GAAgB,EAAQ,CAAC,CAAC,S,uEDNzDE,EAAAA,EAAAA,IA6BM,MA7BNC,EA6BM,EA5BJC,EAAAA,EAAAA,IA2BYC,EAAA,CA1BTC,KAAMC,EAAAT,MACNU,MAAM,EACNR,MAAOO,EAAAP,MACRS,OAAO,OACP,gBAAc,OACb,mBAAiB,EACjBC,WAAWH,EAAAN,a,CAGD,eAAWU,EAAAA,EAAAA,IACpB,kBAAAC,EAAAA,EAAAA,GAMMC,EAAA,KAAAA,EAAA,KANNC,EAAAA,EAAAA,IAMM,OANDC,MAAA,6DAA+D,EAClED,EAAAA,EAAAA,IAAkE,OAA7DC,MAAA,0DACLD,EAAAA,EAAAA,IAAkE,OAA7DC,MAAA,0DACLD,EAAAA,EAAAA,IAAkE,OAA7DC,MAAA,0DACLD,EAAAA,EAAAA,IAAkE,OAA7DC,MAAA,0DACLD,EAAAA,EAAAA,IAAkE,OAA7DC,MAAA,2D,QAIE,eAAWJ,EAAAA,EAAAA,IACpB,kBAAAC,EAAAA,EAAAA,GAAwDC,EAAA,KAAAA,EAAA,KAAxDC,EAAAA,EAAAA,IAAwD,OAAnDC,MAAA,+CAAgD,W,GAG5C,eAAWJ,EAAAA,EAAAA,IACpB,kBAAAC,EAAAA,EAAAA,GAAuDC,EAAA,KAAAA,EAAA,KAAvDC,EAAAA,EAAAA,IAAuD,OAAlDC,MAAA,8CAA+C,W,6CCpBgB,CAAC,YAAY,oB","sources":["webpack://dpzvc3-ui/./src/views/SlideBar.vue?1f42","webpack://dpzvc3-ui/./src/views/SlideBar.vue?05d1","webpack://dpzvc3-ui/./src/views/SlideBar.vue","webpack://dpzvc3-ui/./src/views/SlideBar.vue?6fd3"],"sourcesContent":["// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/vue-loader/dist/stylePostLoader.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/less-loader/dist/cjs.js!../../node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./SlideBar.vue?vue&type=style&index=0&id=67055e32&lang=less&scoped=true\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"948cae42\", content, true, {});","// Imports\nimport ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\";\nimport ___CSS_LOADER_API_IMPORT___ from \"../../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.SlideBar[data-v-67055e32] {\n  width: 100%;\n}\n/*# sourceMappingURL=SlideBar.css.map */`, \"\",{\"version\":3,\"sources\":[\"webpack://./SlideBar.vue\",\"webpack://./src/views/SlideBar.vue\"],\"names\":[],\"mappings\":\"AACA;EACE,WAAA;ACAF;AACA,uCAAuC\",\"sourcesContent\":[\"\\n.SlideBar {\\n  width: 100%;\\n}\\n\",\".SlideBar {\\n  width: 100%;\\n}\\n/*# sourceMappingURL=SlideBar.css.map */\"],\"sourceRoot\":\"\"}]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","<template>\n  <div class=\"SlideBar\">\n    <Slide-bar\n      :list=\"items\"\n      :flex=\"false\"\n      :index=\"index\"\n      height=\"100%\"\n      scroll-height=\"50px\"\n      :is-fixed-header=\"true\"\n      @on-change=\"changeIndex\"\n    >\n      <!-- 具名插槽语法 Vue3 -->\n      <template #slot-item-0>\n        <div style=\"height:100%; flex: 1; background:red; overflow: scroll;\">\n          <div style=\"height: 40px; width: 100%; background-color: blue;\" />\n          <div style=\"height: 40px; width: 100%; background-color: blue;\" />\n          <div style=\"height: 40px; width: 100%; background-color: blue;\" />\n          <div style=\"height: 40px; width: 100%; background-color: blue;\" />\n          <div style=\"height: 40px; width: 100%; background-color: blue;\" />\n        </div>\n      </template>\n\n      <template #slot-item-1>\n        <div style=\"height:200px; flex:1; background:yellow;\" />\n      </template>\n\n      <template #slot-item-2>\n        <div style=\"height:200px; flex:1; background:black;\" />\n      </template>\n    </Slide-bar>\n  </div>\n</template>\n\n<script>\nimport { defineComponent, ref } from 'vue'\n\nexport default defineComponent({\n  name: 'ViewSlideBar',\n  setup () {\n    const items = ref([\n      { name: '选项一' },\n      { name: '选项二' },\n      { name: '选项三' }\n    ])\n    const index = ref(1)\n    const changeIndex = (index) => {\n      console.log(index)\n    }\n    return { items, index, changeIndex }\n  }\n})\n</script>\n\n<style lang=\"less\" scoped>\n.SlideBar {\n  width: 100%;\n}\n</style>\n","import { render } from \"./SlideBar.vue?vue&type=template&id=67055e32&scoped=true\"\nimport script from \"./SlideBar.vue?vue&type=script&lang=js\"\nexport * from \"./SlideBar.vue?vue&type=script&lang=js\"\n\nimport \"./SlideBar.vue?vue&type=style&index=0&id=67055e32&lang=less&scoped=true\"\n\nimport exportComponent from \"../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-67055e32\"]])\n\nexport default __exports__"],"names":["content","__esModule","default","module","id","locals","exports","add","___CSS_LOADER_EXPORT___","push","class","defineComponent","name","setup","items","ref","index","changeIndex","_createElementBlock","_hoisted_1","_createVNode","_component_Slide_bar","list","_ctx","flex","height","onOnChange","_withCtx","_toConsumableArray","_cache","_createElementVNode","style"],"ignoreList":[],"sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dpzvc3-ui",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "Vue组件库",
   "main": "dist/dpzvc3.js",
   "module": "dist/dpzvc3.esm.js",

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/radioBox/radiobox.vue

@@ -24,10 +24,10 @@ export default defineComponent({
   name: 'RadioBox',
   props: {
     label: { type: [String, Number], required: true },
-    modalValue: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: false },
     disable: { type: Boolean, default: false }
   },
-  emits: ['update:value', 'on-change'],
+  emits: ['update:modelValue', 'on-change'],
   setup (props, { emit }) {
     const slotEl = ref(null)
     const show = ref(true)
@@ -37,7 +37,7 @@ export default defineComponent({
       if (group) {
         return group.currentValue.value === props.label
       } else {
-        return props.modalValue
+        return props.modelValue
       }
     })
 
@@ -59,7 +59,8 @@ export default defineComponent({
       if (group) {
         group.change(props.label)
       } else {
-        emit('update:modalValue', checked)
+        // console.log(checked, 'ddadda')
+        emit('update:modelValue', checked)
         emit('on-change', checked)
       }
     }

package/src/components/slideBar/slideBar.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'
 
 const prefixCls = 'dpzvc3-slideBar'
 
@@ -93,8 +93,8 @@ export default defineComponent({
     const fixed = ref(false)
 
     const getItemWidth = computed(() => (isFlex.value ? clientWidth.value / items.value.length : props.childWidth))
-    const translateX = computed(() => -startIndex.value * clientWidth.value)
-
+    // const translateX = computed(() => -startIndex.value * clientWidth.value)
+    const translateX = ref(0)
     const classes = computed(() => [prefixCls])
     const headerClasses = computed(() => [prefixCls + '-header', { fixed: fixed.value }])
     const wrapperClasses = computed(() => [
@@ -121,6 +121,7 @@ export default defineComponent({
     function changeBar (index) {
       if (startIndex.value === index) return
       startIndex.value = index
+      translateX.value = -startIndex.value * clientWidth.value
       emit('on-change', index)
     }
 
@@ -134,21 +135,35 @@ export default defineComponent({
     function onTouchMove (e) {
       const currentX = e.touches[0].clientX
       distance.value = props.distanceIndex ? (currentX - startX.value) / props.distanceIndex : currentX - startX.value
+      translateX.value = startTranslateX.value + distance.value
     }
     function onTouchEnd () {
       if (distance.value < 0 && Math.abs(distance.value) > clientWidth.value / 2) {
         slideLeft()
       } else if (distance.value > 0 && Math.abs(distance.value) > clientWidth.value / 2) {
         slideRight()
+      } else {
+        translateX.value = startTranslateX.value
       }
       dragging.value = false
     }
     function slideLeft () {
-      if (startIndex.value < maxIndex.value) startIndex.value++
+      if (startIndex.value >= maxIndex.value) {
+        translateX.value = startTranslateX.value
+      } else {
+        startIndex.value++
+        translateX.value = startTranslateX.value - clientWidth.value
+      }
       emit('on-change', startIndex.value)
     }
     function slideRight () {
-      if (startIndex.value > 0) startIndex.value--
+      // if (startIndex.value > 0) startIndex.value--
+      if (startIndex.value <= 0) {
+        translateX.value = startTranslateX.value
+      } else {
+        startIndex.value--
+        translateX.value = startTranslateX.value + clientWidth.value
+      }
       emit('on-change', startIndex.value)
     }
 
@@ -162,8 +177,11 @@ export default defineComponent({
 
     onMounted(() => {
       clientWidth.value = header.value.clientWidth
+      translateX.value = -startIndex.value * clientWidth.value
       window.addEventListener('resize', onResize)
+      onScroll()
       if (props.canDrag && content.value) {
+        // console.log(content.value, 'dadsds')
         content.value.addEventListener('touchstart', onTouchStart)
         content.value.addEventListener('touchmove', onTouchMove)
         content.value.addEventListener('touchend', onTouchEnd)

package/src/views/SlideBar.vue

@@ -4,10 +4,10 @@
       :list="items"
       :flex="false"
       :index="index"
-      :can-drag="false"
       height="100%"
       scroll-height="50px"
       :is-fixed-header="true"
+      @on-change="changeIndex"
     >
       <!-- 具名插槽语法 Vue3 -->
       <template #slot-item-0>
@@ -43,7 +43,10 @@ export default defineComponent({
       { name: '选项三' }
     ])
     const index = ref(1)
-    return { items, index }
+    const changeIndex = (index) => {
+      console.log(index)
+    }
+    return { items, index, changeIndex }
   }
 })
 </script>