fix: drag 使用公共函数 (#2010)

* fix: popover

* fix: 代码回退

* feat: 文档修改

* feat: 修改Imagepreview

* feat: imagepreview文案修改

* feat: noticebar文案修改

* fix: noticebar小程序不能运行问题修改

* feat: 组件文档修改picker

* docs: 文案修改

* docs: countdown

* feat: image

* docs: 文本修改

* fix: imagepreview

* docs: 单位修改

* docs: 文档修噶

* docs: actionsheet文档修改

* docs: 文档修改

* fix: drag使用公共函数

src/packages/__VUE/actionsheet/doc.en-US.md

@@ -18,12 +18,10 @@ app.use(ActionSheet);
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
       @click="switchActionSheet('isVisible')"
-     
     >
       <span><label>Basic Usage</label></span>
       <div v-html="state.val"></div>
@@ -35,7 +33,6 @@ app.use(ActionSheet);
       @choose="chooseItem"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -78,7 +75,6 @@ export default {
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
@@ -95,7 +91,6 @@ export default {
       @choose="chooseItem"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -137,7 +132,6 @@ export default {
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
@@ -155,7 +149,6 @@ export default {
       @choose="chooseItem"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -200,12 +193,10 @@ export default {
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
       @click="switchActionSheet('isVisible')"
-     
     >
       <span><label>Option Status</label></span>
       <div v-html="state.val"></div>
@@ -219,7 +210,6 @@ export default {
        cancel-txt="cancel"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -261,7 +251,6 @@ export default {
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
@@ -273,7 +262,6 @@ export default {
      <nut-action-sheet v-model:visible="state.isVisible" title="title">
       <div class="custom-content">Custom Content</div>
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';

src/packages/__VUE/actionsheet/doc.md

@@ -15,16 +15,13 @@ app.use(ActionSheet);
 
 ### 基础用法
 
-默认
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
       @click="switchActionSheet('isVisible')"
-     
     >
       <span><label>基础用法</label></span>
       <div v-html="state.val"></div>
@@ -36,7 +33,6 @@ app.use(ActionSheet);
       @choose="chooseItem"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -79,7 +75,7 @@ export default {
 :::demo
 ``` html
 <template>
-  <div>
+
   <nut-cell
       :show-icon="true"
       :isLink="true"
@@ -96,7 +92,6 @@ export default {
       @choose="chooseItem"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -138,7 +133,7 @@ export default {
 :::demo
 ``` html
 <template>
-  <div>
+ 
   <nut-cell
       :show-icon="true"
       :isLink="true"
@@ -156,7 +151,6 @@ export default {
       @choose="chooseItem"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -201,7 +195,6 @@ export default {
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
@@ -220,7 +213,6 @@ export default {
        cancel-txt="取消"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -264,12 +256,10 @@ export default {
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
       @click="switchActionSheet('isVisible')"
-     
     >
       <span><label>自定义内容</label></span>
     </nut-cell>

src/packages/__VUE/actionsheet/doc.taro.md

@@ -15,16 +15,13 @@ app.use(ActionSheet);
 
 ### 基础用法
 
-默认
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
       @click="switchActionSheet('isVisible')"
-     
     >
       <span><label>基础用法</label></span>
       <div v-html="state.val"></div>
@@ -36,7 +33,6 @@ app.use(ActionSheet);
       @choose="chooseItem"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -79,7 +75,6 @@ export default {
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
@@ -96,7 +91,6 @@ export default {
       @choose="chooseItem"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -138,7 +132,6 @@ export default {
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
@@ -156,7 +149,6 @@ export default {
       @choose="chooseItem"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -201,12 +193,10 @@ export default {
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
       @click="switchActionSheet('isVisible')"
-     
     >
       <span><label>选项状态</label></span>
       <div v-html="state.val"></div>
@@ -220,7 +210,6 @@ export default {
        cancel-txt="取消"
     >
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';
@@ -258,25 +247,21 @@ export default {
 :::
 
 
-
 ### 自定义内容
 
 :::demo
 ``` html
 <template>
-  <div>
   <nut-cell
       :show-icon="true"
       :isLink="true"
       @click="switchActionSheet('isVisible')"
-     
     >
       <span><label>自定义内容</label></span>
     </nut-cell>
      <nut-action-sheet v-model:visible="state.isVisible" title="标题">
       <div class="custom-content">自定义内容</div>
     </nut-action-sheet>
-    </div>
 </template>
 <script>
 import { reactive } from 'vue';

src/packages/__VUE/drag/doc.taro.md

@@ -37,4 +37,4 @@ app.use(Drag);
 
 | 参数      | 说明                                              | 类型           | 默认值                              |
 | :-------- | :------------------------------------------------ | :------------- | :---------------------------------- |
-| direction | 拖拽元素的拖拽方向限制，**x**/**y**/**all**三选一 | string         | `'all'`                               |
+| direction | 拖拽元素的拖拽方向限制，**x**/**y**/**all** 三选一 | string         | `all`                               |

src/packages/__VUE/drag/index.taro.vue

@@ -2,7 +2,7 @@
   <view
     :class="classes"
     ref="myDrag"
-    :id="'drag-' + refRandomId"
+    :id="'myDrag' + refRandomId"
     class="myDrag"
     @touchstart="touchStart($event)"
     @touchmove.prevent="touchMove($event)"
@@ -21,6 +21,7 @@
 import { onMounted, onDeactivated, onActivated, reactive, ref, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import requestAniFrame from '@/packages/utils/raf';
+import { useTaroRect } from '@/packages/utils/useTaroRect';
 const { componentName, create } = createComponent('drag');
 import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
 export default create({
@@ -81,18 +82,12 @@ export default create({
       };
     });
     const domElem = Taro.getSystemInfoSync();
-    function getInfo() {
-      const query = Taro.createSelectorQuery();
-      query
-        .select('#drag-' + refRandomId)
-        .boundingClientRect((rec: any) => {
-          state.elWidth = rec.width;
-          state.elHeight = rec.height;
-          state.initTop = rec.top;
-          state.initLeft = rec.left;
-        })
-        .exec();
-      // console.log(domElem.windowWidth);
+    async function getInfo() {
+      const rec = await useTaroRect(myDrag, Taro);
+      state.elWidth = rec.width;
+      state.elHeight = rec.height;
+      state.initTop = rec.top;
+      state.initLeft = rec.left;
 
       state.screenWidth = domElem.screenWidth;
       state.screenHeight = domElem.screenHeight;

src/sites/mobile-taro/vue/src/app.config.ts

@@ -110,7 +110,7 @@ const subPackages = [
 ];
 
 export default {
-  pages: ['pages/index/index', 'pages/index/layout'],
+  pages: ['pages/index/index'],
   subPackages,
   window: {
     backgroundTextStyle: 'light',