@10yun/cv-mobile-ui 0.5.43 → 0.5.45

package/uview-plus/components/u-datetime-picker/datetimePicker.js

@@ -7,6 +7,7 @@
  * @lastTime     : 2021-08-20 16:57:48
  * @FilePath     : /u-view2.0/uview-ui/libs/config/props/datetimePicker.js
  */
+import { t } from '../../libs/i18n'
 export default {
     // datetimePicker 组件
     datetimePicker: {
@@ -26,8 +27,8 @@ export default {
         formatter: null,
         loading: false,
         itemHeight: 44,
-        cancelText: '取消',
-        confirmText: '确认',
+        cancelText: t("up.common.cancel"),
+        confirmText: t("up.common.confirm"),
         cancelColor: '#909193',
         confirmColor: '#3c9cff',
         visibleItemCount: 5,
@@ -36,7 +37,8 @@ export default {
         inputBorder: 'surround',
         disabled: false,
         disabledColor: '',
-        placeholder: '请选择',
+        placeholder: t("up.common.pleaseChoose"),
         inputProps: {},
+        pageInline: false
     }
 }

package/uview-plus/components/u-datetime-picker/dayjs.esm.min.js

@@ -0,0 +1,7 @@
+/**
+ * Bundled by jsDelivr using Rollup v2.79.2 and Terser v5.39.0.
+ * Original file: /npm/dayjs@1.11.13/dayjs.min.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var t={exports:{}},e=t.exports=function(){var t=1e3,e=6e4,n=36e5,r="millisecond",s="second",i="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return"["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},g=function(t,e,n){var r=String(t);return!r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:g,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),s=n%60;return(e<=0?"+":"-")+g(r,2,"0")+":"+g(s,2,"0")},m:function t(e,n){if(e.date()<n.date())return-t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),s=e.clone().add(r,c),i=n-s<0,u=e.clone().add(r+(i?-1:1),c);return+(-(r+(n-s)/(i?s-u:u-s))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return{M:c,y:h,w:o,d:a,D:d,h:u,m:i,s:s,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},m="en",D={};D[m]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var s;if(!e)return m;if("string"==typeof e){var i=e.toLowerCase();D[i]&&(s=i),n&&(D[i]=n,s=i);var u=e.split("-");if(!s&&u.length>1)return t(u[0])}else{var a=e.name;D[a]=e,s=a}return!r&&s&&(m=s),s||!r&&m},b=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=v;O.l=w,O.i=S,O.w=function(t,e){return b(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0}var g=M.prototype;return g.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var s=r[2]-1||0,i=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],s,r[3]||1,r[4]||0,r[5]||0,r[6]||0,i)):new Date(r[1],s,r[3]||1,r[4]||0,r[5]||0,r[6]||0,i)}}return new Date(e)}(t),this.init()},g.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},g.$utils=function(){return O},g.isValid=function(){return!(this.$d.toString()===l)},g.isSame=function(t,e){var n=b(t);return this.startOf(e)<=n&&n<=this.endOf(e)},g.isAfter=function(t,e){return b(t)<this.startOf(e)},g.isBefore=function(t,e){return this.endOf(e)<b(t)},g.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},g.unix=function(){return Math.floor(this.valueOf()/1e3)},g.valueOf=function(){return this.$d.getTime()},g.startOf=function(t,e){var n=this,r=!!O.u(e)||e,f=O.p(t),l=function(t,e){var s=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?s:s.endOf(a)},$=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,g=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var m=this.$locale().weekStart||0,D=(y<m?y+7:y)-m;return l(r?g-D:g+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case i:return $(v+"Seconds",2);case s:return $(v+"Milliseconds",3);default:return this.clone()}},g.endOf=function(t){return this.startOf(t,!1)},g.$set=function(t,e){var n,o=O.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[i]=f+"Minutes",n[s]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d}else l&&this.$d[l]($);return this.init(),this},g.set=function(t,e){return this.clone().$set(t,e)},g.get=function(t){return this[O.p(t)]()},g.add=function(r,f){var d,l=this;r=Number(r);var $=O.p(f),y=function(t){var e=b(l);return O.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[i]=e,d[u]=n,d[s]=t,d)[$]||1,g=this.$d.getTime()+r*M;return O.w(g,this)},g.subtract=function(t,e){return this.add(-1*t,e)},g.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",s=O.z(this),i=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,s,i){return t&&(t[n]||t(e,r))||s[n].slice(0,i)},d=function(t){return O.s(i%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return O.s(e.$y,4,"0");case"M":return a+1;case"MM":return O.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return O.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(i);case"HH":return O.s(i,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(i,u,!0);case"A":return $(i,u,!1);case"m":return String(u);case"mm":return O.s(u,2,"0");case"s":return String(e.$s);case"ss":return O.s(e.$s,2,"0");case"SSS":return O.s(e.$ms,3,"0");case"Z":return s}return null}(t)||s.replace(":","")}))},g.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},g.diff=function(r,d,l){var $,y=this,M=O.p(d),g=b(r),v=(g.utcOffset()-this.utcOffset())*e,m=this-g,D=function(){return O.m(y,g)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(m-v)/6048e5;break;case a:$=(m-v)/864e5;break;case u:$=m/n;break;case i:$=m/e;break;case s:$=m/t;break;default:$=m}return l?$:O.a($)},g.daysInMonth=function(){return this.endOf(c).$D},g.$locale=function(){return D[this.$L]},g.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},g.clone=function(){return O.w(this.$d,this)},g.toDate=function(){return new Date(this.valueOf())},g.toJSON=function(){return this.isValid()?this.toISOString():null},g.toISOString=function(){return this.$d.toISOString()},g.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return b.prototype=k,[["$ms",r],["$s",s],["$m",i],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])}})),b.extend=function(t,e){return t.$i||(t(e,_,b),t.$i=!0),b},b.locale=w,b.isDayjs=S,b.unix=function(t){return b(1e3*t)},b.en=D[m],b.Ls=D,b.p={},b}();export{e as default};

package/uview-plus/components/u-datetime-picker/props.js

@@ -163,6 +163,11 @@ export const props = defineMixin({
     defaultIndex: {
       type: Array,
       default: () => defProps.datetimePicker.defaultIndex
+    },
+    // 是否页面内展示
+    pageInline: {
+      type: Boolean,
+      default: () => defProps.datetimePicker.pageInline
     }
   }
 });

package/uview-plus/components/u-datetime-picker/style.css

@@ -1,29 +1,3 @@
-/* #ifndef APP-NVUE */
-.u-empty,
-.u-empty__wrap,
-.u-tabs,
-.u-tabs__wrapper,
-.u-tabs__wrapper__scroll-view-wrapper,
-.u-tabs__wrapper__scroll-view,
-.u-tabs__wrapper__nav,
-.u-tabs__wrapper__nav__line,
-.up-empty,
-.up-empty__wrap,
-.up-tabs,
-.up-tabs__wrapper,
-.up-tabs__wrapper__scroll-view-wrapper,
-.up-tabs__wrapper__scroll-view,
-.up-tabs__wrapper__nav,
-.up-tabs__wrapper__nav__line {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
 .u-datetime-picker {
   flex: 1;
 }

package/uview-plus/components/u-datetime-picker/style.scss

@@ -1,4 +1,3 @@
-@import '../../libs/css/components.scss';
 .u-datetime-picker {
   flex: 1;
   &__has-input {

package/uview-plus/components/u-datetime-picker/u-datetime-picker.vue

@@ -3,12 +3,12 @@
     <view v-if="hasInput" class="u-datetime-picker__has-input" @click="onShowByClickInput">
       <slot name="trigger" :value="inputValue">
         <up-input :readonly="!!showByClickInput" v-model="inputValue" v-bind="inputPropsInner"></up-input>
-        <div class="input-cover"></div>
+        <cover-view class="input-cover"></cover-view>
       </slot>
     </view>
     <up-picker
       ref="picker"
-      :show="show || (hasInput && showByClickInput)"
+      :show="pageInline || show || (hasInput && showByClickInput)"
       :popupMode="popupMode"
       :closeOnClickOverlay="closeOnClickOverlay"
       :columns="columns"
@@ -22,6 +22,7 @@
       :cancelColor="cancelColor"
       :confirmColor="confirmColor"
       :toolbarRightSlot="toolbarRightSlot"
+      :pageInline="pageInline"
       @close="close"
       @cancel="cancel"
       @confirm="confirm"
@@ -48,13 +49,13 @@ function times(n, iteratee) {
 import { props } from './props';
 import { mpMixin } from '../../libs/mixin/mpMixin';
 import { mixin } from '../../libs/mixin/mixin';
-import dayjs from 'dayjs/esm/index';
+import dayjs from './dayjs.esm.min.js';
 import { range, error, padZero } from '../../libs/function/index';
 import test from '../../libs/function/test';
 /**
  * DatetimePicker 时间日期选择器
  * @description 此选择器用于时间日期
- * @tutorial https://ijry.github.io/uview-plus/components/datetimePicker.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/datetimePicker.html
  * @property {Boolean}			show				用于控制选择器的弹出与收起 ( 默认 false )
  * @property {Boolean}			showToolbar			是否显示顶部的操作栏  ( 默认 true )
  * @property {String | Number}	modelValue		    绑定值
@@ -99,6 +100,12 @@ export default {
   watch: {
     show(newValue, oldValue) {
       if (newValue) {
+        // #ifdef VUE3
+        this.innerValue = this.correctValue(this.modelValue);
+        // #endif
+        // #ifdef VUE2
+        this.innerValue = this.correctValue(this.value);
+        // #endif
         this.updateColumnValue(this.innerValue);
       }
     },
@@ -121,7 +128,17 @@ export default {
   computed: {
     // 如果以下这些变量发生了变化，意味着需要重新初始化各列的值
     propsChange() {
-      return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter];
+      return [
+        this.mode,
+        this.maxDate,
+        this.minDate,
+        this.minHour,
+        this.maxHour,
+        this.minMinute,
+        this.maxMinute,
+        this.filter,
+        this.modelValue
+      ];
     },
     // input的props
     inputPropsInner() {
@@ -160,6 +177,9 @@ export default {
             case 'year-month':
               format = 'YYYY-MM';
               break;
+            case 'datehour':
+              format = 'YYYY-MM-DD HH';
+              break;
             case 'datetime':
               format = 'YYYY-MM-DD HH:mm';
               break;
@@ -431,7 +451,10 @@ export default {
     },
     // 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
     getBoundary(type, innerValue) {
-      const value = new Date(innerValue);
+      let value = new Date(innerValue);
+      if (isNaN(value.getTime())) {
+        value = new Date();
+      }
       const boundary = new Date(this[`${type}Date`]);
       const year = dayjs(boundary).year();
       let month = 1;

package/uview-plus/components/u-divider/style.css

@@ -1,29 +1,3 @@
-/* #ifndef APP-NVUE */
-.u-empty,
-.u-empty__wrap,
-.u-tabs,
-.u-tabs__wrapper,
-.u-tabs__wrapper__scroll-view-wrapper,
-.u-tabs__wrapper__scroll-view,
-.u-tabs__wrapper__nav,
-.u-tabs__wrapper__nav__line,
-.up-empty,
-.up-empty__wrap,
-.up-tabs,
-.up-tabs__wrapper,
-.up-tabs__wrapper__scroll-view-wrapper,
-.up-tabs__wrapper__scroll-view,
-.up-tabs__wrapper__nav,
-.up-tabs__wrapper__nav__line {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
 .u-divider {
   /* #ifndef APP-NVUE */
   display: flex;

package/uview-plus/components/u-divider/style.scss

@@ -1,4 +1,3 @@
-@import '../../libs/css/components.scss';
 $u-divider-margin: 15px 0 !default;
 $u-divider-text-margin: 0 15px !default;
 $u-divider-dot-font-size: 12px !default;

package/uview-plus/components/u-divider/u-divider.vue

@@ -2,7 +2,9 @@
   <view class="u-divider" :style="[addStyle(customStyle)]" @tap="click">
     <up-line :color="lineColor" :customStyle="leftLineStyle" :hairline="hairline" :dashed="dashed"></up-line>
     <text v-if="dot" class="u-divider__dot">●</text>
-    <text v-else-if="text" class="u-divider__text" :style="[textStyle]">{{ text }}</text>
+    <slot>
+      <text v-if="!dot && text" class="u-divider__text" :style="[textStyle]">{{ text }}</text>
+    </slot>
     <up-line :color="lineColor" :customStyle="rightLineStyle" :hairline="hairline" :dashed="dashed"></up-line>
   </view>
 </template>
@@ -14,7 +16,7 @@ import { addStyle, addUnit } from '../../libs/function/index';
 /**
  * divider 分割线
  * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
- * @tutorial https://ijry.github.io/uview-plus/components/divider.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/divider.html
  * @property {Boolean}			dashed			是否虚线 （默认 false ）
  * @property {Boolean}			hairline		是否细线 （默认  true ）
  * @property {Boolean}			dot				是否以点替代文字，优先于text字段起作用 （默认 false ）

package/uview-plus/components/{u-drag-sort → u-dragsort}/_doc/readme.md

@@ -4,7 +4,7 @@
 
 拖拽排序组件，可以对任意元素进行拖拽排序。
 
-## [查看文档](https://ijry.github.io/uview-plus/components/dragSort.html)
+## [查看文档](https://uview-plus.jiangruyi.com/components/dragSort.html)
 
 ## [更多组件, 请查看 `u-ui` 组件库](https://ext.dcloud.net.cn/plugin?name=u--ui)
 (请勿下载插件zip)
@@ -13,4 +13,4 @@
 	<img src="https://wuui.cn/intr.png">
 </a>
 
-**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://ijry.github.io/uview-plus/components/qqFeedBack.html)**
+**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://uview-plus.jiangruyi.com/components/qqFeedBack.html)**

package/uview-plus/components/u-dragsort/style.css

@@ -0,0 +1,40 @@
+.u-dragsort {
+  width: 100%;
+}
+.u-dragsort .u-dragsort-area {
+  width: 100%;
+  position: relative;
+}
+.u-dragsort .u-dragsort-item {
+  position: absolute;
+  width: 100%;
+}
+.u-dragsort .u-dragsort-item.dragging {
+  z-index: 1000;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+}
+.u-dragsort .u-dragsort-item .u-dragsort-item-content {
+  padding: 0px;
+  text-align: center;
+  box-sizing: border-box;
+  padding-bottom: 6px;
+  border-radius: 8rpx;
+  transition: all 0.3s ease;
+}
+.u-dragsort.u-dragsort--horizontal .u-dragsort-area {
+  display: flex;
+  white-space: nowrap;
+  height: auto;
+}
+.u-dragsort.u-dragsort--horizontal .u-dragsort-item {
+  display: flex;
+  width: auto;
+  height: 100%;
+}
+.u-dragsort.u-dragsort--all .u-dragsort-area {
+  height: auto;
+}
+.u-dragsort.u-dragsort--all .u-dragsort-item {
+  width: auto;
+  height: auto;
+}

package/uview-plus/components/u-dragsort/style.scss

@@ -0,0 +1,52 @@
+.u-dragsort {
+  width: 100%;
+
+  .u-dragsort-area {
+    width: 100%;
+    position: relative;
+  }
+
+  .u-dragsort-item {
+    position: absolute;
+    width: 100%;
+
+    &.dragging {
+      z-index: 1000;
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    }
+
+    .u-dragsort-item-content {
+      padding: 0px;
+      text-align: center;
+      box-sizing: border-box;
+      padding-bottom: 6px;
+      border-radius: 8rpx;
+      transition: all 0.3s ease;
+    }
+  }
+
+  &.u-dragsort--horizontal {
+    .u-dragsort-area {
+      display: flex;
+      white-space: nowrap;
+      height: auto;
+    }
+
+    .u-dragsort-item {
+      display: flex;
+      width: auto;
+      height: 100%;
+    }
+  }
+
+  &.u-dragsort--all {
+    .u-dragsort-area {
+      height: auto;
+    }
+
+    .u-dragsort-item {
+      width: auto;
+      height: auto;
+    }
+  }
+}

package/uview-plus/components/u-dragsort/u-dragsort.vue

@@ -0,0 +1,310 @@
+<template>
+  <view
+    class="u-dragsort"
+    :class="[direction == 'horizontal' ? 'u-dragsort--horizontal' : '', direction == 'all' ? 'u-dragsort--all' : '']"
+  >
+    <movable-area class="u-dragsort-area" :style="movableAreaStyle">
+      <movable-view
+        v-for="(item, index) in list"
+        :key="item.id"
+        :id="`u-dragsort-item-${index}`"
+        class="u-dragsort-item"
+        :class="{ dragging: dragIndex === index }"
+        :direction="direction === 'all' ? 'all' : direction"
+        :x="item.x"
+        :y="item.y"
+        :inertia="false"
+        :disabled="!draggable || item.draggable === false"
+        @change="onChange(index, $event)"
+        @touchstart="onTouchStart(index)"
+        @touchend="onTouchEnd"
+        @touchcancel="onTouchEnd"
+      >
+        <view class="u-dragsort-item-content">
+          <slot :item="item" :index="index">
+            {{ item.label }}
+          </slot>
+        </view>
+      </movable-view>
+    </movable-area>
+  </view>
+</template>
+<script>
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, sleep } from '../../libs/function/index';
+export default {
+  name: 'u-dragsort',
+  // #ifdef MP
+  mixins: [mpMixin, mixin],
+  // #endif
+  // #ifndef MP
+  mixins: [mixin],
+  // #endif
+  props: {
+    initialList: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: (value) => ['vertical', 'horizontal', 'all'].includes(value)
+    },
+    // 新增列数属性，用于all模式
+    columns: {
+      type: Number,
+      default: 3
+    }
+  },
+  data() {
+    return {
+      list: [],
+      dragIndex: -1,
+      itemHeight: 40,
+      itemWidth: 80,
+      areaWidth: 0, // 可拖动区域宽度
+      areaHeight: 0, // 可拖动区域高度
+      originalPositions: [], // 保存原始位置
+      currentPosition: {
+        x: 0,
+        y: 0
+      }
+    };
+  },
+  computed: {
+    movableAreaStyle() {
+      if (this.direction === 'vertical') {
+        return {
+          height: `${this.list.length * this.itemHeight}px`,
+          width: '100%'
+        };
+      } else if (this.direction === 'horizontal') {
+        return {
+          height: '100%',
+          width: `${this.list.length * this.itemWidth}px`
+        };
+      } else {
+        // all模式，计算网格布局所需的高度
+        const rows = Math.ceil(this.list.length / this.columns);
+        return {
+          height: `${rows * this.itemHeight}px`,
+          width: '100%'
+        };
+      }
+    }
+  },
+  emits: ['drag-end'],
+  async mounted() {
+    await this.$nextTick();
+    this.initList();
+    this.calculateItemSize();
+    this.calculateAreaSize();
+  },
+  methods: {
+    initList() {
+      // 初始化列表项的位置
+      this.list = this.initialList.map((item, index) => {
+        let x = 0,
+          y = 0;
+        if (this.direction === 'horizontal') {
+          x = index * this.itemWidth;
+          y = 0;
+        } else if (this.direction === 'vertical') {
+          x = 0;
+          y = index * this.itemHeight;
+        } else {
+          // all模式，网格布局
+          const col = index % this.columns;
+          const row = Math.floor(index / this.columns);
+          x = col * this.itemWidth;
+          y = row * this.itemHeight;
+        }
+        return {
+          ...item,
+          x,
+          y
+        };
+      });
+      // 保存初始位置
+      this.saveOriginalPositions();
+    },
+    saveOriginalPositions() {
+      // 保存当前位置作为原始位置
+      this.originalPositions = this.list.map((item) => ({
+        x: item.x,
+        y: item.y
+      }));
+    },
+    async calculateItemSize() {
+      // 计算项目尺寸
+      await sleep(30);
+      return new Promise((resolve) => {
+        uni
+          .createSelectorQuery()
+          .in(this)
+          .select('.u-dragsort-item-content')
+          .boundingClientRect((res) => {
+            if (res) {
+              this.itemHeight = res.height || 40;
+              this.itemWidth = res.width || 80;
+              // 更新所有项目的位置
+              this.updatePositions();
+              // 保存原始位置
+              this.saveOriginalPositions();
+            }
+            resolve(res);
+          })
+          .exec();
+      });
+    },
+    async calculateAreaSize() {
+      // 计算可拖动区域尺寸
+      await sleep(30);
+      return new Promise((resolve) => {
+        uni
+          .createSelectorQuery()
+          .in(this)
+          .select('.u-dragsort-area')
+          .boundingClientRect((res) => {
+            if (res) {
+              this.areaWidth = res.width || 300;
+              this.areaHeight = res.height || 300;
+            }
+            resolve(res);
+          })
+          .exec();
+      });
+    },
+    updatePositions() {
+      // 更新所有项目的位置
+      this.list.forEach((item, index) => {
+        if (this.direction === 'vertical') {
+          item.y = index * this.itemHeight;
+          item.x = 0;
+        } else if (this.direction === 'horizontal') {
+          item.x = index * this.itemWidth;
+          item.y = 0;
+        } else {
+          // all模式，网格布局
+          const col = index % this.columns;
+          const row = Math.floor(index / this.columns);
+          item.x = col * this.itemWidth;
+          item.y = row * this.itemHeight;
+        }
+      });
+    },
+    onTouchStart(index) {
+      this.dragIndex = index;
+      // 保存当前位置作为原始位置
+      this.saveOriginalPositions();
+    },
+    onChange(index, event) {
+      if (!event.detail.source || event.detail.source !== 'touch') return;
+      this.currentPosition.x = event.detail.x;
+      this.currentPosition.y = event.detail.y;
+      // all模式下使用更智能的位置计算
+      if (this.direction === 'all') {
+        this.handleAllModeChange(index);
+      } else {
+        // 原有的垂直和水平模式逻辑
+        let itemSize = 0;
+        let targetIndex = -1;
+        if (this.direction === 'vertical') {
+          itemSize = this.itemHeight;
+          targetIndex = Math.max(0, Math.min(Math.round(this.currentPosition.y / itemSize), this.list.length - 1));
+        } else if (this.direction === 'horizontal') {
+          itemSize = this.itemWidth;
+          targetIndex = Math.max(0, Math.min(Math.round(this.currentPosition.x / itemSize), this.list.length - 1));
+        }
+        // 如果位置发生变化，则重新排序
+        if (targetIndex !== index) {
+          this.reorderItems(index, targetIndex);
+        }
+      }
+    },
+    handleAllModeChange(index) {
+      // 在all模式下，根据当前位置计算最近的网格位置
+      const col = Math.max(0, Math.min(Math.round(this.currentPosition.x / this.itemWidth), this.columns - 1));
+      const row = Math.max(0, Math.round(this.currentPosition.y / this.itemHeight));
+      // 计算目标索引
+      let targetIndex = row * this.columns + col;
+      targetIndex = Math.max(0, Math.min(targetIndex, this.list.length - 1));
+      // 如果位置发生变化，则重新排序
+      if (targetIndex !== index) {
+        this.reorderItems(index, targetIndex);
+      }
+    },
+    reorderItems(fromIndex, toIndex) {
+      const movedItem = this.list.splice(fromIndex, 1)[0];
+      this.list.splice(toIndex, 0, movedItem);
+      // 震动反馈
+      if (uni.vibrateShort) {
+        uni.vibrateShort();
+      }
+      // 更新当前拖拽项目的新索引
+      this.dragIndex = toIndex;
+      // 更新所有项目的位置
+      this.updatePositions();
+      // 保存当前位置作为原始位置
+      this.saveOriginalPositions();
+    },
+    onTouchEnd() {
+      // 0.001是为了解决拖动过快等某些极限场景下位置还原不生效问题
+      if (this.direction === 'horizontal') {
+        this.list[this.dragIndex].x = this.currentPosition.x + 0.001;
+      } else if (this.direction === 'vertical' || this.direction === 'all') {
+        this.list[this.dragIndex].y = this.currentPosition.y + 0.001;
+        this.list[this.dragIndex].x = this.currentPosition.x + 0.001;
+      }
+      // 重置到位置，需要延迟触发动，否则无效。
+      sleep(50).then(() => {
+        this.list.forEach((item, index) => {
+          item.x = this.originalPositions[index].x;
+          item.y = this.originalPositions[index].y;
+        });
+        this.dragIndex = -1;
+        this.$emit('drag-end', [...this.list]);
+      });
+    }
+  },
+  watch: {
+    initialList: {
+      handler() {
+        this.$nextTick(() => {
+          this.initList();
+        });
+      },
+      deep: true
+    },
+    direction: {
+      handler() {
+        this.$nextTick(() => {
+          this.initList();
+          this.calculateItemSize();
+          this.calculateAreaSize();
+        });
+      }
+    },
+    columns: {
+      handler() {
+        if (this.direction === 'all') {
+          this.$nextTick(() => {
+            this.initList();
+            this.updatePositions();
+            this.saveOriginalPositions();
+          });
+        }
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>