chore(feedback): move to setup sugar (#2548)

* chore: action-sheet * chore: backtop * chore: audio * chore: dialog * chore: dialog * chore: dialog * chore: drag * chore: infinite-loading * chore: notify * chore: swipe * chore: switch * chore: toast * chore: pull-refresh
jdf2e · Sep 7, 2023 · d4470ef · d4470ef
1 parent 7019fe6
commit d4470ef
Show file tree

Hide file tree

Showing 31 changed files with 1,344 additions and 1,907 deletions.
diff --git a/packages/nutui-taro-demo/src/feedback/pages/backtop/index.vue b/packages/nutui-taro-demo/src/feedback/pages/backtop/index.vue
@@ -32,24 +32,12 @@
   </view>
 </template>
 
-<script>
+<script setup lang="ts">
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const click = () => {
-      console.log('click');
-    };
-
-    return {
-      click,
-      env
-    };
-  }
+const env = Taro.getEnv();
+const click = () => {
+  console.log('click');
 };
 </script>
 

diff --git a/packages/nutui-taro-demo/src/feedback/pages/dialog/index.vue b/packages/nutui-taro-demo/src/feedback/pages/dialog/index.vue
@@ -30,85 +30,60 @@
     <nut-dialog title="异步关闭" :content="closeContent" :visible="visible4" @cancel="onCancel" @ok="onOkAsync" />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-    const visible1 = ref(false);
-    const visible2 = ref(false);
-    const visible3 = ref(false);
-    const visible4 = ref(false);
-    const visible5 = ref(false);
-    const closeContent = ref('');
-    const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));
-    const countDown = (second: number) => `倒计时 ${second} 秒`;
+const env = Taro.getEnv();
+const visible1 = ref(false);
+const visible2 = ref(false);
+const visible3 = ref(false);
+const visible4 = ref(false);
+const visible5 = ref(false);
+const closeContent = ref('');
+const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));
+const countDown = (second: number) => `倒计时 ${second} 秒`;
 
-    const onCancel = () => {
-      console.log('event cancel');
-    };
-    const onOk = () => {
-      console.log('event ok');
-    };
-    const onOkAsync = () => {
-      sleep()
-        .then(() => {
-          closeContent.value = countDown(2);
-          return sleep();
-        })
-        .then(() => {
-          closeContent.value = countDown(1);
-          return sleep();
-        })
-        .then(() => {
-          closeContent.value = countDown(0);
-        })
-        .then(() => {
-          visible4.value = false;
-        });
-    };
-
-    const baseClick = (): void => {
-      visible1.value = true;
-    };
-    const noTitleClick = () => {
-      visible2.value = true;
-    };
-    const tipsClick = () => {
-      visible3.value = true;
-    };
+const onCancel = () => {
+  console.log('event cancel');
+};
+const onOk = () => {
+  console.log('event ok');
+};
+const onOkAsync = () => {
+  sleep()
+    .then(() => {
+      closeContent.value = countDown(2);
+      return sleep();
+    })
+    .then(() => {
+      closeContent.value = countDown(1);
+      return sleep();
+    })
+    .then(() => {
+      closeContent.value = countDown(0);
+    })
+    .then(() => {
+      visible4.value = false;
+    });
+};
 
-    const componentClick = () => {
-      closeContent.value = `点击确定时3s后关闭`;
-      visible4.value = true;
-    };
+const baseClick = (): void => {
+  visible1.value = true;
+};
+const noTitleClick = () => {
+  visible2.value = true;
+};
+const tipsClick = () => {
+  visible3.value = true;
+};
 
-    const verticalClick = () => {
-      visible5.value = true;
-    };
+const componentClick = () => {
+  closeContent.value = `点击确定时3s后关闭`;
+  visible4.value = true;
+};
 
-    return {
-      visible1,
-      visible2,
-      visible3,
-      visible4,
-      visible5,
-      onCancel,
-      onOk,
-      closeContent,
-      onOkAsync,
-      baseClick,
-      noTitleClick,
-      componentClick,
-      tipsClick,
-      verticalClick,
-      env
-    };
-  }
+const verticalClick = () => {
+  visible5.value = true;
 };
 </script>
diff --git a/packages/nutui-taro-demo/src/feedback/pages/drag/index.vue b/packages/nutui-taro-demo/src/feedback/pages/drag/index.vue
@@ -16,22 +16,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-
-export default {
-  components: {
-    Header
-  },
-  setup() {
-    const env = Taro.getEnv();
-
-    return {
-      env
-    };
-  }
-};
+const env = Taro.getEnv();
 </script>
 
 <style lang="scss">

diff --git a/packages/nutui-taro-demo/src/feedback/pages/infiniteloading/index.vue b/packages/nutui-taro-demo/src/feedback/pages/infiniteloading/index.vue
@@ -13,63 +13,47 @@
           @load-more="loadMore"
           @refresh="refresh"
         >
-          <view class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{ item }}</view>
+          <view class="infiniteLi" v-for="(item, index) in defaultList" :key="index">{{ item }}</view>
         </nut-infinite-loading>
       </view>
     </nut-cell>
   </view>
 </template>
 
-<script lang="ts">
-import { onMounted, ref, reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+const hasMore = ref(true);
+const defaultList = ref(['']);
 
-export default {
-  props: {},
-  setup() {
-    const hasMore = ref(true);
+const loadMore = (done) => {
+  setTimeout(() => {
+    const curLen = defaultList.value.length;
 
-    const data = reactive({
-      defultList: ['']
-    });
+    for (let i = curLen; i < curLen + 10; i++) {
+      defaultList.value.push(`${i}`);
+    }
 
-    const loadMore = (done) => {
-      setTimeout(() => {
-        const curLen = data.defultList.length;
+    if (defaultList.value.length > 30) hasMore.value = false;
 
-        for (let i = curLen; i < curLen + 10; i++) {
-          data.defultList.push(`${i}`);
-        }
-
-        if (data.defultList.length > 30) hasMore.value = false;
-
-        done();
-      }, 500);
-    };
-
-    const refresh = (done) => {
-      setTimeout(() => {
-        console.log('刷新成功');
-        done();
-      }, 1000);
-    };
+    done();
+  }, 500);
+};
 
-    const init = () => {
-      for (let i = 0; i < 20; i++) {
-        data.defultList.push(`${i}`);
-      }
-    };
-    onMounted(() => {
-      init();
-    });
+const refresh = (done) => {
+  setTimeout(() => {
+    console.log('刷新成功');
+    done();
+  }, 1000);
+};
 
-    return {
-      loadMore,
-      hasMore,
-      refresh,
-      ...toRefs(data)
-    };
+const init = () => {
+  for (let i = 0; i < 20; i++) {
+    defaultList.value.push(`${i}`);
   }
 };
+onMounted(() => {
+  init();
+});
 </script>
 
 <style>