feat: taro h5 demo

wypbin · Jan 13, 2023 · a2404f9 · a2404f9
1 parent 90649b8
commit a2404f9
Show file tree

Hide file tree

Showing 14 changed files with 50 additions and 51 deletions.
diff --git a/src/sites/mobile-taro/vue/src/basic/pages/popup/index.vue b/src/sites/mobile-taro/vue/src/basic/pages/popup/index.vue
@@ -41,9 +41,6 @@
     <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="showTeleport = true"></nut-cell>
-    <nut-popup :style="{ padding: '30px 50px' }" teleport="#app" v-model:visible="showTeleport">app</nut-popup>
     <h2>多层堆叠</h2>
     <nut-cell title="多层堆叠" is-link @click="showPop1 = true"></nut-cell>
     <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="showPop1">

diff --git a/src/sites/mobile-taro/vue/src/business/pages/addresslist/index.vue b/src/sites/mobile-taro/vue/src/business/pages/addresslist/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo" :class="{ web: env === 'WEB' }">
+  <div class="demo addresslist-demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-address-list
@@ -113,7 +113,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.demo {
+.addresslist-demo {
   padding-right: 0 !important;
   padding-left: 0 !important;
 }

diff --git a/src/sites/mobile-taro/vue/src/business/pages/barrage/index.vue b/src/sites/mobile-taro/vue/src/business/pages/barrage/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo" :class="{ web: env === 'WEB' }">
+  <div class="demo barrage-demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-cell class="danmu-box">
@@ -38,12 +38,14 @@ export default {
 </script>
 
 <style lang="scss">
-.danmu-box,
-.nut-barrage {
-  padding: 20px 0;
-  height: 150px;
-}
-.nut-button {
-  width: 100%;
+.barrage-demo {
+  .danmu-box,
+  .nut-barrage {
+    padding: 20px 0;
+    height: 150px;
+  }
+  .nut-button {
+    width: 100%;
+  }
 }
 </style>
diff --git a/src/sites/mobile-taro/vue/src/business/pages/category/index.vue b/src/sites/mobile-taro/vue/src/business/pages/category/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo full" :class="{ web: env === 'WEB' }">
+  <div class="demo full category-demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>经典分类模式</h2>
     <nut-category :category="category" @change="change">
@@ -73,7 +73,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.demo {
+.category-demo {
   padding-left: 0 !important;
   padding-right: 0px !important;
 }

diff --git a/src/sites/mobile-taro/vue/src/business/pages/signature/index.vue b/src/sites/mobile-taro/vue/src/business/pages/signature/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo" :class="{ web: env === 'WEB' }">
+  <div class="demo signature-demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-signature @confirm="confirm" @clear="clear" custom-class="test" @start="start"></nut-signature>
@@ -73,7 +73,7 @@ export default {
 </script>
 
 <style lang="scss">
-#app .demo {
+#app .signature-demo {
   height: auto;
 }
 .test {

diff --git a/src/sites/mobile-taro/vue/src/components/header.vue b/src/sites/mobile-taro/vue/src/components/header.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="applets-demo-header">
     <div class="back" @click="navigateTo">
-      <Home />
+      <Left />
     </div>
     <div class="applets-icon">
       <img
@@ -14,19 +14,17 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
 import Taro from '@tarojs/taro';
-import { Home } from '@nutui/icons-vue';
+import { Left } from '@nutui/icons-vue-taro';
 import config from '../../../../../config.json';
 export default defineComponent({
   name: 'header',
   components: {
-    Home
+    Left
   },
   setup() {
     //返回demo页
     const navigateTo = () => {
-      Taro.navigateTo({
-        url: '/pages/index/index'
-      });
+      Taro.navigateBack();
     };
 
     const compName = computed(() => {

diff --git a/src/sites/mobile-taro/vue/src/dentry/pages/range/index.vue b/src/sites/mobile-taro/vue/src/dentry/pages/range/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo" :class="{ web: env === 'WEB' }">
+  <div class="demo range-demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-cell class="cell">
@@ -130,8 +130,10 @@ export default {
 </script>
 
 <style lang="scss">
-.cell {
-  padding: 40px 18px;
+.range-demo {
+  .cell {
+    padding: 40px 18px;
+  }
 }
 .custom-button {
   width: 26px;

diff --git a/src/sites/mobile-taro/vue/src/exhibition/pages/avatar/index.vue b/src/sites/mobile-taro/vue/src/exhibition/pages/avatar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo full" :class="{ web: env === 'WEB' }">
+  <div class="demo full avatar-demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>支持三种尺寸：small、normal、large</h2>
     <nut-cell>
@@ -111,14 +111,16 @@ export default {
 };
 </script>
 <style lang="scss">
-.nut-cell {
-  align-items: flex-end;
-  border-radius: 0;
-  & > view {
-    margin-right: 30px;
+.avatar-demo {
+  .nut-cell {
+    align-items: flex-end;
+    border-radius: 0;
+    & > view {
+      margin-right: 30px;
+    }
+  }
+  .demo-avatar {
+    color: #fff;
   }
-}
-.demo-avatar {
-  color: #fff;
 }
 </style>
diff --git a/src/sites/mobile-taro/vue/src/exhibition/pages/countup/index.vue b/src/sites/mobile-taro/vue/src/exhibition/pages/countup/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo" :class="{ web: env === 'WEB' }">
+  <div class="demo countup-demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <div class="show-demo">
@@ -109,7 +109,7 @@ export default {
 
 <style></style>
 <style lang="scss">
-#app .demo {
+#app .countup-demo {
   padding: 57px 0 0 0;
 }
 .show-demo {

diff --git a/src/sites/mobile-taro/vue/src/exhibition/pages/noticebar/index.vue b/src/sites/mobile-taro/vue/src/exhibition/pages/noticebar/index.vue
@@ -152,7 +152,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .demo {
   padding-bottom: 30px !important;
 }

diff --git a/src/sites/mobile-taro/vue/src/feedback/pages/actionsheet/index.vue b/src/sites/mobile-taro/vue/src/feedback/pages/actionsheet/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo" :class="{ web: env === 'WEB' }">
+  <div class="demo actionsheet" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>基础用法</h2>
     <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible1')">
@@ -177,8 +177,10 @@ export default {
   padding: 110px 0;
   text-align: center;
 }
-.nut-cell {
-  justify-content: space-between;
+.actionsheet {
+  .nut-cell {
+    justify-content: space-between;
+  }
 }
 .custom-content {
   padding: 10px 10px 160px;

diff --git a/src/sites/mobile-taro/vue/src/layout/pages/layout/index.vue b/src/sites/mobile-taro/vue/src/layout/pages/layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo full" :class="{ web: env === 'WEB' }">
+  <div class="demo full layout-demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <h2>基础布局</h2>
     <div class="box-item">
@@ -141,7 +141,7 @@ export default {
   margin-bottom: 20px;
   padding: 20px 0;
 }
-.demo .nut-row {
+.layout-demo .nut-row {
   overflow: hidden;
   &:not(:last-child) .nut-col {
     margin-bottom: 15px;

diff --git a/src/sites/mobile-taro/vue/src/nav/pages/navbar/index.vue b/src/sites/mobile-taro/vue/src/nav/pages/navbar/index.vue
@@ -84,17 +84,17 @@ export default defineComponent({
     const tab2value = ref(0);
     const methods = {
       back() {
-        alert('header头部， 点击返回');
+        console.log('header头部， 点击返回');
       },
       title() {
-        alert('header头部， 点击title');
+        console.log('header头部， 点击title');
       },
       icon() {
-        alert('icon');
+        console.log('icon');
       },
 
       rightClick() {
-        alert('右侧点击事件');
+        console.log('右侧点击事件');
       },
       changeTab(tab: any) {
         tab1value.value = tab.paneKey as number;

diff --git a/src/sites/mobile-taro/vue/src/pages/index/index.vue b/src/sites/mobile-taro/vue/src/pages/index/index.vue
@@ -67,10 +67,6 @@ export default {
       Taro.navigateTo({
         url: `/${enName}/pages/${name.toLowerCase()}/index`
       });
-
-      if (Taro.getEnv() === 'WEB' && parent.location.href.includes('zh-CN')) {
-        parent.location.href = `${parent.location.origin}/vue_taro/index.html#/zh-CN/component/${name.toLowerCase()}`;
-      }
     };
 
     return {