chore(popup): 优化文档与演示代码 (#2498)

jdf2e · Aug 24, 2023 · 05528d7 · 05528d7
1 parent 4226dfb
commit 05528d7
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 312 deletions.
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/index.vue b/packages/nutui-taro-demo/src/basic/pages/popup/index.vue
@@ -3,21 +3,27 @@
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-cell title="展示弹出层" is-link @click="showBasic = true"></nut-cell>
-    <nut-popup pop-class="popclass" :style="{ padding: '30px 50px' }" v-model:visible="showBasic" :z-index="100"
-      >正文</nut-popup
-    >
+    <nut-popup pop-class="popclass" :style="{ padding: '30px 50px' }" v-model:visible="showBasic" :z-index="100">
+      正文
+    </nut-popup>
+
     <h2>弹出位置</h2>
     <nut-cell title="顶部弹出" is-link @click="showTop = true"></nut-cell>
     <nut-popup position="top" :style="{ height: '10%' }" v-model:visible="showTop"></nut-popup>
+
     <nut-cell title="底部弹出" is-link @click="showBottom = true"></nut-cell>
     <nut-popup position="bottom" :style="{ height: '20%' }" v-model:visible="showBottom"></nut-popup>
+
     <nut-cell title="左侧弹出" is-link @click="showLeft = true"></nut-cell>
     <nut-popup position="left" :style="{ width: '20%', height: '100%' }" v-model:visible="showLeft"></nut-popup>
+
     <nut-cell title="右侧弹出" is-link @click="showRight = true"></nut-cell>
     <nut-popup position="right" :style="{ width: '20%', height: '100%' }" v-model:visible="showRight"></nut-popup>
+
     <h2>关闭图标</h2>
     <nut-cell title="关闭图标" is-link @click="showIcon = true"></nut-cell>
     <nut-popup position="bottom" closeable :style="{ height: '20%' }" v-model:visible="showIcon"></nut-popup>
+
     <nut-cell title="图标位置" is-link @click="showIconPosition = true"></nut-cell>
     <nut-popup
       position="bottom"
@@ -26,6 +32,7 @@
       :style="{ height: '20%' }"
       v-model:visible="showIconPosition"
     ></nut-popup>
+
     <nut-cell title="自定义图标" is-link @click="showCloseIcon = true"></nut-cell>
     <nut-popup
       position="bottom"
@@ -38,9 +45,11 @@
         <Heart></Heart>
       </template>
     </nut-popup>
+
     <h2>圆角弹框</h2>
     <nut-cell title="圆角弹框" is-link @click="showRound = true"></nut-cell>
     <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="showRound"></nut-popup>
+
     <h2>多层堆叠</h2>
     <nut-cell title="多层堆叠" is-link @click="showPop1 = true"></nut-cell>
     <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop1">
@@ -50,35 +59,21 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { Heart } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: { Heart, Header },
-  props: {},
-  setup() {
-    const env = Taro.getEnv();
-
-    const state = reactive({
-      showBasic: false,
-      showTop: false,
-      showBottom: false,
-      showLeft: false,
-      showRight: false,
-      showIcon: false,
-      showIconPosition: false,
-      showCloseIcon: false,
-      showRound: false,
-      showCombination: false,
-      showPop1: false,
-      showPop2: false,
-      showTeleport: false
-    });
-    return { ...toRefs(state), env };
-  }
-};
+const env = Taro.getEnv();
+const showBasic = ref(false);
+const showTop = ref(false);
+const showBottom = ref(false);
+const showLeft = ref(false);
+const showRight = ref(false);
+const showIcon = ref(false);
+const showIconPosition = ref(false);
+const showCloseIcon = ref(false);
+const showRound = ref(false);
+const showPop1 = ref(false);
+const showPop2 = ref(false);
 </script>
-
-<style lang="scss"></style>
diff --git a/src/packages/__VUE/popup/demo.vue b/src/packages/__VUE/popup/demo.vue
@@ -3,21 +3,27 @@
     <div id="test"></div>
     <h2>{{ translate('basic') }}</h2>
     <nut-cell :title="translate('cell1')" is-link @click="showBasic = true"></nut-cell>
-    <nut-popup pop-class="popclass" :style="{ padding: '30px 50px' }" v-model:visible="showBasic" :z-index="100">{{
-      translate('text')
-    }}</nut-popup>
+    <nut-popup pop-class="popclass" :style="{ padding: '30px 50px' }" v-model:visible="showBasic" :z-index="100">
+      {{ translate('text') }}
+    </nut-popup>
+
     <h2>{{ translate('position') }}</h2>
     <nut-cell :title="translate('cell2')" is-link @click="showTop = true"></nut-cell>
     <nut-popup position="top" :style="{ height: '20%' }" v-model:visible="showTop"></nut-popup>
+
     <nut-cell :title="translate('cell3')" is-link @click="showBottom = true"></nut-cell>
     <nut-popup position="bottom" :style="{ height: '20%' }" v-model:visible="showBottom"></nut-popup>
+
     <nut-cell :title="translate('cell4')" is-link @click="showLeft = true"></nut-cell>
     <nut-popup position="left" :style="{ width: '20%', height: '100%' }" v-model:visible="showLeft"></nut-popup>
+
     <nut-cell :title="translate('cell5')" is-link @click="showRight = true"></nut-cell>
     <nut-popup position="right" :style="{ width: '20%', height: '100%' }" v-model:visible="showRight"></nut-popup>
+
     <h2>{{ translate('close') }}</h2>
     <nut-cell :title="translate('close')" is-link @click="showIcon = true"></nut-cell>
     <nut-popup position="bottom" closeable :style="{ height: '20%' }" v-model:visible="showIcon"></nut-popup>
+
     <nut-cell :title="translate('iposition')" is-link @click="showIconPosition = true"></nut-cell>
     <nut-popup
       position="bottom"
@@ -26,6 +32,7 @@
       :style="{ height: '20%' }"
       v-model:visible="showIconPosition"
     ></nut-popup>
+
     <nut-cell :title="translate('cicon')" is-link @click="showCloseIcon = true"></nut-cell>
     <nut-popup
       position="bottom"
@@ -38,14 +45,17 @@
         <Heart></Heart>
       </template>
     </nut-popup>
+
     <h2>{{ translate('circle') }}</h2>
     <nut-cell :title="translate('circle')" is-link @click="showRound = true"></nut-cell>
     <nut-popup position="bottom" closeable round :style="{ height: '30%' }" v-model:visible="showRound"></nut-popup>
+
     <h2>{{ translate('teleport') }}</h2>
     <nut-cell :title="translate('teleport')" is-link @click="showTeleport = true"></nut-cell>
-    <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable v-model:visible="showTeleport"
-      >app</nut-popup
-    >
+    <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" teleport-disable v-model:visible="showTeleport">
+      app
+    </nut-popup>
+
     <h2>{{ translate('muti') }}</h2>
     <nut-cell :title="translate('muti')" is-link @click="showPop1 = true"></nut-cell>
     <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop1">
@@ -55,8 +65,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('popup');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -98,29 +108,17 @@ const initTranslate = () =>
       click: 'Click it'
     }
   });
-export default defineComponent({
-  components: { Heart },
-  props: {},
-  setup() {
-    initTranslate();
-    const state = reactive({
-      showBasic: false,
-      showTop: false,
-      showBottom: false,
-      showLeft: false,
-      showRight: false,
-      showIcon: false,
-      showIconPosition: false,
-      showCloseIcon: false,
-      showRound: false,
-      showCombination: false,
-      showPop1: false,
-      showPop2: false,
-      showTeleport: false
-    });
-    return { ...toRefs(state), translate };
-  }
-});
+initTranslate();
+const showBasic = ref(false);
+const showTop = ref(false);
+const showBottom = ref(false);
+const showLeft = ref(false);
+const showRight = ref(false);
+const showIcon = ref(false);
+const showIconPosition = ref(false);
+const showCloseIcon = ref(false);
+const showRound = ref(false);
+const showPop1 = ref(false);
+const showPop2 = ref(false);
+const showTeleport = ref(false);
 </script>
-
-<style lang="scss" scoped></style>