dpzvc3-ui 3.0.2 → 3.0.3

package/dist/dpzvc3.js

@@ -4160,7 +4160,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `
   justify-content: center;
   flex-direction: column;
 }
-`, "",{"version":3,"sources":["webpack://./src/components/radioBox/radiobox-group.vue"],"names":[],"mappings":";AA4DA;EACE,aAAa;EACb,uBAAuB;EACvB,sBAAsB;AACxB","sourcesContent":["<template>\n  <div :class=\"classes\">\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { defineComponent, computed, watch, provide, ref } from 'vue'\n\nconst prefixCls = 'dpzvc3-radioBoxGroup'\n\nexport default defineComponent({\n  name: 'RadioBoxGroup',\n  props: {\n    modelValue: {\n      type: [String, Boolean, Number],\n      default: ''\n    },\n    vertical: {\n      type: Boolean,\n      default: false\n    }\n  },\n  emits: ['update:modelValue', 'on-change', 'on-form-change'],\n  setup (props, { emit }) {\n    const currentValue = ref(props.modelValue)\n\n    // 提供给子组件\n    provide('radioBoxGroup', {\n      currentValue,\n      change: (val) => {\n        currentValue.value = val\n        emit('update:modelValue', val)\n        emit('on-change', val)\n        emit('on-form-change', val)\n      }\n    })\n\n    // 监听外部 v-model 改变\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = val\n      }\n    )\n\n    const classes = computed(() => [\n      prefixCls,\n      { [`${prefixCls}-vertical`]: props.vertical }\n    ])\n\n    return {\n      classes,\n      currentValue\n    }\n  }\n})\n</script>\n\n<style scoped>\n.dpzvc3-radioBoxGroup-vertical {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n</style>\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./radiobox-group.vue"],"names":[],"mappings":";AA4DA;EACE,aAAa;EACb,uBAAuB;EACvB,sBAAsB;AACxB","sourcesContent":["<template>\n  <div :class=\"classes\">\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { defineComponent, computed, watch, provide, ref } from 'vue'\n\nconst prefixCls = 'dpzvc3-radioBoxGroup'\n\nexport default defineComponent({\n  name: 'RadioBoxGroup',\n  props: {\n    modelValue: {\n      type: [String, Boolean, Number],\n      default: ''\n    },\n    vertical: {\n      type: Boolean,\n      default: false\n    }\n  },\n  emits: ['update:modelValue', 'on-change', 'on-form-change'],\n  setup (props, { emit }) {\n    const currentValue = ref(props.modelValue)\n\n    // 提供给子组件\n    provide('radioBoxGroup', {\n      currentValue,\n      change: (val) => {\n        currentValue.value = val\n        emit('update:modelValue', val)\n        emit('on-change', val)\n        emit('on-form-change', val)\n      }\n    })\n\n    // 监听外部 v-model 改变\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = val\n      }\n    )\n\n    const classes = computed(() => [\n      prefixCls,\n      { [`${prefixCls}-vertical`]: props.vertical }\n    ])\n\n    return {\n      classes,\n      currentValue\n    }\n  }\n})\n</script>\n\n<style scoped>\n.dpzvc3-radioBoxGroup-vertical {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n</style>\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -4811,7 +4811,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `
   display: flex;
   flex-direction: column;
 }
-`, "",{"version":3,"sources":["webpack://./src/components/checkBox/checkbox-group.vue"],"names":[],"mappings":";AAqEA;EACE,aAAa;EACb,sBAAsB;AACxB","sourcesContent":["<template>\n  <div\n    :class=\"[\n      'dpzvc3-checkBoxGroup',\n      vertical ? 'dpzvc3-checkBoxGroup-vertical' : ''\n    ]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { defineComponent, ref, watch, provide } from 'vue'\n// import Emitter from '../../mixin/emitter'\n\nexport default defineComponent({\n  name: 'CheckBoxGroup',\n  // mixins: [Emitter],\n\n  props: {\n    modelValue: {\n      type: Array,\n      default: () => []\n    },\n    single: {\n      type: Boolean,\n      default: false\n    },\n    vertical: {\n      type: Boolean,\n      default: false\n    }\n  },\n\n  emits: ['update:modelValue', 'on-change'],\n\n  setup (props, { emit }) {\n    // alert(props)\n    const currentValue = ref([...props.modelValue])\n\n    /** 对外暴露给 checkbox 的方法 */\n    const toggleOption = (label) => {\n      let newValue = []\n      newValue = [...label]\n      // currentValue.value = newValue\n      emit('update:modelValue', newValue)\n      emit('on-change', newValue)\n    }\n\n    /** 提供给子 checkbox */\n    provide('CheckBoxGroup', {\n      currentValue,\n      toggleOption\n      // single: props.single\n    })\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = [...val]\n      }\n    )\n\n    return {}\n  }\n})\n</script>\n\n<style scoped>\n.dpzvc3-checkBoxGroup-vertical {\n  display: flex;\n  flex-direction: column;\n}\n</style>\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./checkbox-group.vue"],"names":[],"mappings":";AAqEA;EACE,aAAa;EACb,sBAAsB;AACxB","sourcesContent":["<template>\n  <div\n    :class=\"[\n      'dpzvc3-checkBoxGroup',\n      vertical ? 'dpzvc3-checkBoxGroup-vertical' : ''\n    ]\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { defineComponent, ref, watch, provide } from 'vue'\n// import Emitter from '../../mixin/emitter'\n\nexport default defineComponent({\n  name: 'CheckBoxGroup',\n  // mixins: [Emitter],\n\n  props: {\n    modelValue: {\n      type: Array,\n      default: () => []\n    },\n    single: {\n      type: Boolean,\n      default: false\n    },\n    vertical: {\n      type: Boolean,\n      default: false\n    }\n  },\n\n  emits: ['update:modelValue', 'on-change'],\n\n  setup (props, { emit }) {\n    // alert(props)\n    const currentValue = ref([...props.modelValue])\n\n    /** 对外暴露给 checkbox 的方法 */\n    const toggleOption = (label) => {\n      let newValue = []\n      newValue = [...label]\n      // currentValue.value = newValue\n      emit('update:modelValue', newValue)\n      emit('on-change', newValue)\n    }\n\n    /** 提供给子 checkbox */\n    provide('CheckBoxGroup', {\n      currentValue,\n      toggleOption\n      // single: props.single\n    })\n\n    watch(\n      () => props.modelValue,\n      (val) => {\n        currentValue.value = [...val]\n      }\n    )\n\n    return {}\n  }\n})\n</script>\n\n<style scoped>\n.dpzvc3-checkBoxGroup-vertical {\n  display: flex;\n  flex-direction: column;\n}\n</style>\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -11158,10 +11158,10 @@ const picker_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(pickervue_t
  */
 
 /* harmony default export */ const components_picker = (picker);
-;// ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/components/radioBox/radiobox.vue?vue&type=template&id=12c1d7f9
+;// ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/components/radioBox/radiobox.vue?vue&type=template&id=1ec5a25f
 
-var radioboxvue_type_template_id_12c1d7f9_hoisted_1 = ["disabled", "checked"];
-function radioboxvue_type_template_id_12c1d7f9_render(_ctx, _cache, $props, $setup, $data, $options) {
+var radioboxvue_type_template_id_1ec5a25f_hoisted_1 = ["disabled", "checked"];
+function radioboxvue_type_template_id_1ec5a25f_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("label", {
     "class": (0,external_vue_.normalizeClass)(_ctx.classes)
   }, [(0,external_vue_.createElementVNode)("span", {
@@ -11176,7 +11176,7 @@ function radioboxvue_type_template_id_12c1d7f9_render(_ctx, _cache, $props, $set
     onChange: _cache[0] || (_cache[0] = function () {
       return _ctx.handleChange && _ctx.handleChange.apply(_ctx, arguments);
     })
-  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, radioboxvue_type_template_id_12c1d7f9_hoisted_1)], 2 /* CLASS */)], 2 /* CLASS */), _ctx.show ? (0,external_vue_.renderSlot)(_ctx.$slots, "default", {
+  }, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, radioboxvue_type_template_id_1ec5a25f_hoisted_1)], 2 /* CLASS */)], 2 /* CLASS */), _ctx.show ? (0,external_vue_.renderSlot)(_ctx.$slots, "default", {
     key: 0
   }, function () {
     return [(0,external_vue_.createElementVNode)("span", {
@@ -11184,7 +11184,7 @@ function radioboxvue_type_template_id_12c1d7f9_render(_ctx, _cache, $props, $set
     }, (0,external_vue_.toDisplayString)(_ctx.label), 513 /* TEXT, NEED_PATCH */)];
   }) : (0,external_vue_.createCommentVNode)("v-if", true)], 2 /* CLASS */);
 }
-;// ./src/components/radioBox/radiobox.vue?vue&type=template&id=12c1d7f9
+;// ./src/components/radioBox/radiobox.vue?vue&type=template&id=1ec5a25f
 
 ;// ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/components/radioBox/radiobox.vue?vue&type=script&lang=js
 
@@ -11197,7 +11197,7 @@ var radioboxvue_type_script_lang_js_prefixCls = 'dpzvc3-radiobox';
       type: [String, Number],
       required: true
     },
-    modalValue: {
+    modelValue: {
       type: Boolean,
       "default": false
     },
@@ -11206,7 +11206,7 @@ var radioboxvue_type_script_lang_js_prefixCls = 'dpzvc3-radiobox';
       "default": false
     }
   },
-  emits: ['update:value', 'on-change'],
+  emits: ['update:modelValue', 'on-change'],
   setup: function setup(props, _ref) {
     var emit = _ref.emit;
     var slotEl = (0,external_vue_.ref)(null);
@@ -11217,7 +11217,7 @@ var radioboxvue_type_script_lang_js_prefixCls = 'dpzvc3-radiobox';
       if (group) {
         return group.currentValue.value === props.label;
       } else {
-        return props.modalValue;
+        return props.modelValue;
       }
     });
     var classes = (0,external_vue_.computed)(function () {
@@ -11238,7 +11238,8 @@ var radioboxvue_type_script_lang_js_prefixCls = 'dpzvc3-radiobox';
       if (group) {
         group.change(props.label);
       } else {
-        emit('update:modalValue', checked);
+        // console.log(checked, 'ddadda')
+        emit('update:modelValue', checked);
         emit('on-change', checked);
       }
     }
@@ -11270,7 +11271,7 @@ var radioboxvue_type_script_lang_js_prefixCls = 'dpzvc3-radiobox';
 
 
 ;
-const radiobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(radioboxvue_type_script_lang_js, [['render',radioboxvue_type_template_id_12c1d7f9_render]])
+const radiobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(radioboxvue_type_script_lang_js, [['render',radioboxvue_type_template_id_1ec5a25f_render]])
 
 /* harmony default export */ const radiobox = (radiobox_exports_);
 ;// ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/components/radioBox/radiobox-group.vue?vue&type=template&id=d101a504&scoped=true
@@ -11354,13 +11355,13 @@ const radiobox_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(rad
 
 radiobox.group = radiobox_group;
 /* harmony default export */ const radioBox = (radiobox);
-;// ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/components/swipe/swipe.vue?vue&type=template&id=4bcc6d9d
+;// ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/components/swipe/swipe.vue?vue&type=template&id=0053c134
 
-var swipevue_type_template_id_4bcc6d9d_hoisted_1 = ["onClick"];
-var swipevue_type_template_id_4bcc6d9d_hoisted_2 = ["src"];
-var swipevue_type_template_id_4bcc6d9d_hoisted_3 = ["onClick"];
-var swipevue_type_template_id_4bcc6d9d_hoisted_4 = ["src"];
-function swipevue_type_template_id_4bcc6d9d_render(_ctx, _cache, $props, $setup, $data, $options) {
+var swipevue_type_template_id_0053c134_hoisted_1 = ["onClick"];
+var swipevue_type_template_id_0053c134_hoisted_2 = ["src"];
+var swipevue_type_template_id_0053c134_hoisted_3 = ["onClick"];
+var swipevue_type_template_id_0053c134_hoisted_4 = ["src"];
+function swipevue_type_template_id_0053c134_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("div", {
     ref: "swipeRef",
     "class": (0,external_vue_.normalizeClass)(_ctx.classes),
@@ -11392,8 +11393,8 @@ function swipevue_type_template_id_4bcc6d9d_render(_ctx, _cache, $props, $setup,
       }, function () {
         return [(0,external_vue_.createElementVNode)("img", {
           src: _item.image
-        }, null, 8 /* PROPS */, swipevue_type_template_id_4bcc6d9d_hoisted_2), (0,external_vue_.createElementVNode)("span", null, (0,external_vue_.toDisplayString)(_item.spec), 1 /* TEXT */)];
-      })], 10 /* CLASS, PROPS */, swipevue_type_template_id_4bcc6d9d_hoisted_1);
+        }, null, 8 /* PROPS */, swipevue_type_template_id_0053c134_hoisted_2), (0,external_vue_.createElementVNode)("span", null, (0,external_vue_.toDisplayString)(_item.spec), 1 /* TEXT */)];
+      })], 10 /* CLASS, PROPS */, swipevue_type_template_id_0053c134_hoisted_1);
     }), 128 /* KEYED_FRAGMENT */)) : ((0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("a", {
       key: 1,
       "class": (0,external_vue_.normalizeClass)(_ctx.singleClass),
@@ -11406,8 +11407,8 @@ function swipevue_type_template_id_4bcc6d9d_render(_ctx, _cache, $props, $setup,
     }, function () {
       return [(0,external_vue_.createElementVNode)("img", {
         src: item.image
-      }, null, 8 /* PROPS */, swipevue_type_template_id_4bcc6d9d_hoisted_4), (0,external_vue_.createElementVNode)("span", null, (0,external_vue_.toDisplayString)(item.spec), 1 /* TEXT */)];
-    })], 10 /* CLASS, PROPS */, swipevue_type_template_id_4bcc6d9d_hoisted_3))], 2 /* CLASS */);
+      }, null, 8 /* PROPS */, swipevue_type_template_id_0053c134_hoisted_4), (0,external_vue_.createElementVNode)("span", null, (0,external_vue_.toDisplayString)(item.spec), 1 /* TEXT */)];
+    })], 10 /* CLASS, PROPS */, swipevue_type_template_id_0053c134_hoisted_3))], 2 /* CLASS */);
   }), 128 /* KEYED_FRAGMENT */)) : (0,external_vue_.createCommentVNode)("v-if", true)], 6 /* CLASS, STYLE */), (0,external_vue_.createCommentVNode)(" :class=\"['dpzvc3-swipe-dots-item', (loop ? index + 1 : index) === slideIndex ? 'active' : '']\" "), (0,external_vue_.createElementVNode)("div", {
     "class": (0,external_vue_.normalizeClass)(_ctx.dotsClasses)
   }, [((0,external_vue_.openBlock)(true), (0,external_vue_.createElementBlock)(external_vue_.Fragment, null, (0,external_vue_.renderList)(_ctx.dotLength, function (item, index) {
@@ -11417,7 +11418,7 @@ function swipevue_type_template_id_4bcc6d9d_render(_ctx, _cache, $props, $setup,
     }, null, 2 /* CLASS */);
   }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */)], 6 /* CLASS, STYLE */);
 }
-;// ./src/components/swipe/swipe.vue?vue&type=template&id=4bcc6d9d
+;// ./src/components/swipe/swipe.vue?vue&type=template&id=0053c134
 
 ;// ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/components/swipe/swipe.vue?vue&type=script&lang=js
 
@@ -11636,7 +11637,8 @@ var swipevue_type_script_lang_js_prefixCls = 'dpzvc3-swipe';
       timer.value = null;
     }
     function onResize() {
-      if (wrapper.value) clientWidth.value = wrapper.value.clientWidth;
+      // if (wrapper.value) clientWidth.value = wrapper.value.clientWidth
+      clientWidth.value = swipeRef.value ? swipeRef.value.clientWidth : 0;
     }
     (0,external_vue_.onMounted)(function () {
       // nextTick(() => {
@@ -11686,7 +11688,7 @@ var swipevue_type_script_lang_js_prefixCls = 'dpzvc3-swipe';
 
 
 ;
-const swipe_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(swipevue_type_script_lang_js, [['render',swipevue_type_template_id_4bcc6d9d_render]])
+const swipe_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(swipevue_type_script_lang_js, [['render',swipevue_type_template_id_0053c134_render]])
 
 /* harmony default export */ const swipe = (swipe_exports_);
 ;// ./src/components/swipe/index.js
@@ -12385,13 +12387,13 @@ prompt_confirm.remove = function () {
   instance.remove();
 };
 /* harmony default export */ const components_prompt = (prompt_confirm);
-;// ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/components/slideBar/slideBar.vue?vue&type=template&id=6ee7198d
+;// ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/components/slideBar/slideBar.vue?vue&type=template&id=b7dd0e7a
 
-var slideBarvue_type_template_id_6ee7198d_hoisted_1 = ["onClick"];
-var slideBarvue_type_template_id_6ee7198d_hoisted_2 = {
+var slideBarvue_type_template_id_b7dd0e7a_hoisted_1 = ["onClick"];
+var slideBarvue_type_template_id_b7dd0e7a_hoisted_2 = {
   "class": "content ellipse-fir"
 };
-function slideBarvue_type_template_id_6ee7198d_render(_ctx, _cache, $props, $setup, $data, $options) {
+function slideBarvue_type_template_id_b7dd0e7a_render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("div", {
     "class": (0,external_vue_.normalizeClass)(_ctx.classes),
     style: (0,external_vue_.normalizeStyle)(_ctx.getStyles)
@@ -12418,8 +12420,8 @@ function slideBarvue_type_template_id_6ee7198d_render(_ctx, _cache, $props, $set
         return _ctx.changeBar(key);
       }
     }, [(0,external_vue_.renderSlot)(_ctx.$slots, 'slide-bar-header-' + key, {}, function () {
-      return [(0,external_vue_.createElementVNode)("a", slideBarvue_type_template_id_6ee7198d_hoisted_2, (0,external_vue_.toDisplayString)(item.name), 1 /* TEXT */)];
-    })], 14 /* CLASS, STYLE, PROPS */, slideBarvue_type_template_id_6ee7198d_hoisted_1);
+      return [(0,external_vue_.createElementVNode)("a", slideBarvue_type_template_id_b7dd0e7a_hoisted_2, (0,external_vue_.toDisplayString)(item.name), 1 /* TEXT */)];
+    })], 14 /* CLASS, STYLE, PROPS */, slideBarvue_type_template_id_b7dd0e7a_hoisted_1);
   }), 128 /* KEYED_FRAGMENT */))], 6 /* CLASS, STYLE */), (0,external_vue_.createElementVNode)("div", {
     "class": (0,external_vue_.normalizeClass)(_ctx.absoluteClass),
     style: (0,external_vue_.normalizeStyle)(_ctx.getScrollStyle)
@@ -12442,7 +12444,7 @@ function slideBarvue_type_template_id_6ee7198d_render(_ctx, _cache, $props, $set
     }, [(0,external_vue_.renderSlot)(_ctx.$slots, 'slot-item-' + index)], 6 /* CLASS, STYLE */);
   }), 128 /* KEYED_FRAGMENT */))], 6 /* CLASS, STYLE */)], 6 /* CLASS, STYLE */)], 6 /* CLASS, STYLE */);
 }
-;// ./src/components/slideBar/slideBar.vue?vue&type=template&id=6ee7198d
+;// ./src/components/slideBar/slideBar.vue?vue&type=template&id=b7dd0e7a
 
 ;// ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[7].use[0]!./src/components/slideBar/slideBar.vue?vue&type=script&lang=js
 
@@ -12531,9 +12533,8 @@ var slideBarvue_type_script_lang_js_prefixCls = 'dpzvc3-slideBar';
     var getItemWidth = (0,external_vue_.computed)(function () {
       return isFlex.value ? clientWidth.value / items.value.length : props.childWidth;
     });
-    var translateX = (0,external_vue_.computed)(function () {
-      return -startIndex.value * clientWidth.value;
-    });
+    // const translateX = computed(() => -startIndex.value * clientWidth.value)
+    var translateX = (0,external_vue_.ref)(0);
     var classes = (0,external_vue_.computed)(function () {
       return [slideBarvue_type_script_lang_js_prefixCls];
     });
@@ -12581,6 +12582,7 @@ var slideBarvue_type_script_lang_js_prefixCls = 'dpzvc3-slideBar';
     function changeBar(index) {
       if (startIndex.value === index) return;
       startIndex.value = index;
+      translateX.value = -startIndex.value * clientWidth.value;
       emit('on-change', index);
     }
 
@@ -12594,21 +12596,35 @@ var slideBarvue_type_script_lang_js_prefixCls = 'dpzvc3-slideBar';
     function onTouchMove(e) {
       var 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);
     }
 
@@ -12621,8 +12637,11 @@ var slideBarvue_type_script_lang_js_prefixCls = 'dpzvc3-slideBar';
     }
     (0,external_vue_.onMounted)(function () {
       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);
@@ -12669,7 +12688,7 @@ var slideBarvue_type_script_lang_js_prefixCls = 'dpzvc3-slideBar';
 
 
 ;
-const slideBar_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(slideBarvue_type_script_lang_js, [['render',slideBarvue_type_template_id_6ee7198d_render]])
+const slideBar_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(slideBarvue_type_script_lang_js, [['render',slideBarvue_type_template_id_b7dd0e7a_render]])
 
 /* harmony default export */ const slideBar = (slideBar_exports_);
 ;// ./src/components/slideBar/index.js