chore(popup): split demo (#2899)

jdf2e · Jan 30, 2024 · 2f641f0 · 2f641f0
1 parent 90c902b
commit 2f641f0
Show file tree

Hide file tree

Showing 19 changed files with 279 additions and 554 deletions.
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/basic.vue b/packages/nutui-taro-demo/src/basic/pages/popup/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-cell title="Center" is-link @click="show = true"></nut-cell>
+  <nut-popup v-model:visible="show" :style="{ padding: '30px 50px' }"> 正文 </nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/close.vue b/packages/nutui-taro-demo/src/basic/pages/popup/close.vue
@@ -0,0 +1,27 @@
+<template>
+  <nut-cell title="Closeable" is-link @click="show1 = true"></nut-cell>
+  <nut-popup v-model:visible="show1" position="bottom" closeable :style="{ height: '20%' }"></nut-popup>
+
+  <nut-cell title="Close Icon Position" is-link @click="show2 = true"></nut-cell>
+  <nut-popup
+    v-model:visible="show2"
+    position="bottom"
+    closeable
+    close-icon-position="top-left"
+    :style="{ height: '20%' }"
+  ></nut-popup>
+
+  <nut-cell title="Close Icon Slot" is-link @click="show3 = true"></nut-cell>
+  <nut-popup v-model:visible="show3" position="bottom" closeable :style="{ height: '20%' }">
+    <template #close-icon>
+      <Heart></Heart>
+    </template>
+  </nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Heart } from '@nutui/icons-vue';
+const show1 = ref(false);
+const show2 = ref(false);
+const show3 = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/index.vue b/packages/nutui-taro-demo/src/basic/pages/popup/index.vue
@@ -1,75 +1,46 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell title="展示弹出层" is-link @click="showBasic = true"></nut-cell>
-    <nut-popup v-model:visible="showBasic" pop-class="popclass" :style="{ padding: '30px 50px' }" :z-index="100">
-      正文
-    </nut-popup>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>弹出位置</h2>
-    <nut-cell title="顶部弹出" is-link @click="showTop = true"></nut-cell>
-    <nut-popup v-model:visible="showTop" position="top" :style="{ height: '10%' }"></nut-popup>
+    <h2>{{ t('position') }}</h2>
+    <Position />
 
-    <nut-cell title="底部弹出" is-link @click="showBottom = true"></nut-cell>
-    <nut-popup v-model:visible="showBottom" position="bottom" :style="{ height: '20%' }"></nut-popup>
+    <h2>{{ t('close') }}</h2>
+    <Close />
 
-    <nut-cell title="左侧弹出" is-link @click="showLeft = true"></nut-cell>
-    <nut-popup v-model:visible="showLeft" position="left" :style="{ width: '20%', height: '100%' }"></nut-popup>
+    <h2>{{ t('round') }}</h2>
+    <Round />
 
-    <nut-cell title="右侧弹出" is-link @click="showRight = true"></nut-cell>
-    <nut-popup v-model:visible="showRight" position="right" :style="{ width: '20%', height: '100%' }"></nut-popup>
-
-    <h2>关闭图标</h2>
-    <nut-cell title="关闭图标" is-link @click="showIcon = true"></nut-cell>
-    <nut-popup v-model:visible="showIcon" position="bottom" closeable :style="{ height: '20%' }"></nut-popup>
-
-    <nut-cell title="图标位置" is-link @click="showIconPosition = true"></nut-cell>
-    <nut-popup
-      v-model:visible="showIconPosition"
-      position="bottom"
-      closeable
-      close-icon-position="top-left"
-      :style="{ height: '20%' }"
-    ></nut-popup>
-
-    <nut-cell title="自定义图标" is-link @click="showCloseIcon = true"></nut-cell>
-    <nut-popup
-      v-model:visible="showCloseIcon"
-      position="bottom"
-      closeable
-      close-icon-position="top-left"
-      :style="{ height: '20%' }"
-    >
-      <template #close-icon>
-        <Heart></Heart>
-      </template>
-    </nut-popup>
-
-    <h2>圆角弹框</h2>
-    <nut-cell title="圆角弹框" is-link @click="showRound = true"></nut-cell>
-    <nut-popup v-model:visible="showRound" position="bottom" closeable round :style="{ height: '30%' }"></nut-popup>
-
-    <h2>多层堆叠</h2>
-    <nut-cell title="多层堆叠" is-link @click="showPop1 = true"></nut-cell>
-    <nut-popup v-model:visible="showPop1" :style="{ padding: '30px 50px' }">
-      <div @click="showPop2 = true">点击它</div>
-    </nut-popup>
-    <nut-popup v-model:visible="showPop2" :style="{ padding: '30px 50px' }">正文</nut-popup>
+    <h2>{{ t('muti') }}</h2>
+    <Multi />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { Heart } from '@nutui/icons-vue-taro';
-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);
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Position from './position.vue';
+import Close from './close.vue';
+import Round from './round.vue';
+import Multi from './multi.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    position: '弹出位置',
+    close: '关闭图标',
+    round: '圆角弹框',
+    muti: '多层堆叠',
+    teleport: '指定挂载节点'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    position: 'Position',
+    close: 'Close Icon',
+    round: 'Round Popup',
+    muti: 'Multi Layers',
+    teleport: 'Teleport'
+  }
+});
 </script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/multi.vue b/packages/nutui-taro-demo/src/basic/pages/popup/multi.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-cell title="Layers" is-link @click="show1 = true"></nut-cell>
+  <nut-popup v-model:visible="show1" :style="{ padding: '30px 50px' }">
+    <div @click="show2 = true">点击它</div>
+  </nut-popup>
+  <nut-popup v-model:visible="show2" :style="{ padding: '30px 50px' }">正文</nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show1 = ref(false);
+const show2 = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/position.vue b/packages/nutui-taro-demo/src/basic/pages/popup/position.vue
@@ -0,0 +1,20 @@
+<template>
+  <nut-cell title="Top" is-link @click="showTop = true"></nut-cell>
+  <nut-popup v-model:visible="showTop" position="top" :style="{ height: '20%' }"></nut-popup>
+
+  <nut-cell title="Bottom" is-link @click="showBottom = true"></nut-cell>
+  <nut-popup v-model:visible="showBottom" position="bottom" :style="{ height: '20%' }"></nut-popup>
+
+  <nut-cell title="Left" is-link @click="showLeft = true"></nut-cell>
+  <nut-popup v-model:visible="showLeft" position="left" :style="{ width: '20%', height: '100%' }"></nut-popup>
+
+  <nut-cell title="Right" is-link @click="showRight = true"></nut-cell>
+  <nut-popup v-model:visible="showRight" position="right" :style="{ width: '20%', height: '100%' }"></nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const showTop = ref(false);
+const showBottom = ref(false);
+const showLeft = ref(false);
+const showRight = ref(false);
+</script>
diff --git a/packages/nutui-taro-demo/src/basic/pages/popup/round.vue b/packages/nutui-taro-demo/src/basic/pages/popup/round.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-cell title="Round" is-link @click="show = true"></nut-cell>
+  <nut-popup v-model:visible="show" position="bottom" closeable round :style="{ height: '30%' }"></nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/src/packages/__VUE/popup/demo.vue b/src/packages/__VUE/popup/demo.vue
diff --git a/src/packages/__VUE/popup/demo/basic.vue b/src/packages/__VUE/popup/demo/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-cell title="Center" is-link @click="show = true"></nut-cell>
+  <nut-popup v-model:visible="show" :style="{ padding: '30px 50px' }"> 正文 </nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+</script>
diff --git a/src/packages/__VUE/popup/demo/close.vue b/src/packages/__VUE/popup/demo/close.vue
@@ -0,0 +1,27 @@
+<template>
+  <nut-cell title="Closeable" is-link @click="show1 = true"></nut-cell>
+  <nut-popup v-model:visible="show1" position="bottom" closeable :style="{ height: '20%' }"></nut-popup>
+
+  <nut-cell title="Close Icon Position" is-link @click="show2 = true"></nut-cell>
+  <nut-popup
+    v-model:visible="show2"
+    position="bottom"
+    closeable
+    close-icon-position="top-left"
+    :style="{ height: '20%' }"
+  ></nut-popup>
+
+  <nut-cell title="Close Icon Slot" is-link @click="show3 = true"></nut-cell>
+  <nut-popup v-model:visible="show3" position="bottom" closeable :style="{ height: '20%' }">
+    <template #close-icon>
+      <Heart></Heart>
+    </template>
+  </nut-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Heart } from '@nutui/icons-vue';
+const show1 = ref(false);
+const show2 = ref(false);
+const show3 = ref(false);
+</script>
diff --git a/src/packages/__VUE/popup/demo/index.vue b/src/packages/__VUE/popup/demo/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+
+    <h2>{{ t('close') }}</h2>
+    <Close />
+
+    <h2>{{ t('round') }}</h2>
+    <Round />
+
+    <h2>{{ t('muti') }}</h2>
+    <Multi />
+
+    <h2>{{ t('port') }}</h2>
+    <Port />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Position from './position.vue';
+import Close from './close.vue';
+import Round from './round.vue';
+import Multi from './multi.vue';
+import Port from './port.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    position: '弹出位置',
+    close: '关闭图标',
+    round: '圆角弹框',
+    muti: '多层堆叠',
+    port: '指定挂载节点'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    position: 'Position',
+    close: 'Close Icon',
+    round: 'Round Popup',
+    muti: 'Multi Layers',
+    port: 'Teleport'
+  }
+});
+</script>