feat: 调整示例展示

pages.json

@@ -201,7 +201,6 @@
         "navigationBarTitleText": "v-pre"
       }
     },
-    // #ifdef APP
     {
       "path": "pages/directive/v-once/v-once-options",
       "style": {
@@ -226,7 +225,6 @@
         "navigationBarTitleText": "v-memo 组合式 API"
       }
     },
-    // #endif
     // #ifdef WEB
     {
       "path": "pages/directive/v-text/v-text-options",

pages/component-instance/mixins/components/Comp1.uvue

 <template>
   <view class="mt-10" ref="mixin-comp-root">
-    <text class="bold">Comp1:</text>
-    <text class="mt-10"
-      >inheritAttrs: false, rootElementTitle should be null</text
+    <text class="bold">Comp1: inheritAttrs: false</text>
+    <text class="mt-10" style="color:#ccc;"
+      >rootElementTitle should be null</text
     >
     <text class="mt-10 root-element-title-1">rootElementTitle: {{ rootElementTitle }}</text>
+    <!-- #ifdef APP -->
     <text class="mt-10 bold">trigger emitter:</text>
     <button class="mt-10 global-mixin-emit-1" @click="triggerEmitter('globalMixinEmit1')">
       trigger globalMixinEmit1
@@ -29,6 +30,7 @@
       trigger childMixinEmit
     </button>
     <MixinComp />
+    <!-- #endif -->
   </view>
 </template>
 
@@ -48,7 +50,7 @@ export default {
   },
   mounted(){
     const rootElement = this.$refs['mixin-comp-root'] as UniElement
-    this.rootElementTitle = rootElement.getAttribute('title')
+    this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))
   },
   methods: {
     triggerEmitter(emit: string){

pages/component-instance/mixins/components/Comp2.uvue

 <template>
   <view class="mt-10" ref="mixin-comp-root">
-    <text class="bold">Comp2:</text>
-    <text class="mt-10"
-      >inheritAttrs: true, rootElementTitle should not be null</text
-    >
+    <text class="bold">Comp2: inheritAttrs: true</text>
+    <text class="mt-10" style="color:#ccc;">rootElementTitle should not be null</text >
     <text class="mt-10 root-element-title-2"
       >rootElementTitle: {{ rootElementTitle }}</text
     >
@@ -49,7 +47,7 @@ export default {
   },
   mounted(){
     const rootElement = this.$refs['mixin-comp-root'] as UniElement
-    this.rootElementTitle = rootElement.getAttribute('title')
+    this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))
   },
   watch: {
     globalMixinOnloadMsg1(newVal: string) {

pages/component-instance/mixins/mixins-web.uvue

 <template>
   <!-- #ifdef APP -->
   <scroll-view style="flex: 1">
-  <!-- #endif -->
+    <!-- #endif -->
     <view class="page">
       <text id="mixin-prop" class="mb-10">mixinProp: {{mixinProp}}</text>
       <text id="mixin-data-msg" class="mb-10">mixinDataMsg: {{mixinDataMsg}}</text>
       <text id="mixin-onload-msg" class="mb-10">mixinOnloadMsg: {{mixinOnloadMsg}}</text>
       <text id="mixin-computed" class="mb-10">mixinComputed: {{mixinComputed}}</text>
+
+      <Comp1 title="title" @globalMixinEmit1="(arg: string) => handleMixinEmitter('globalMixinEmit1', arg)"
+        @globalChildMixinEmit1="(arg: string) => handleMixinEmitter('globalChildMixinEmit1', arg)"
+        @globalMixinEmit2="(arg: string) => handleMixinEmitter('globalMixinEmit2', arg)"
+        @globalChildMixinEmit2="(arg: string) => handleMixinEmitter('globalChildMixinEmit2', arg)"
+        @mixinEmit="(arg: string) => handleMixinEmitter('mixinEmit', arg)"
+        @childMixinEmit="(arg: string) => handleMixinEmitter('childMixinEmit', arg)" />
+      <text v-if="handleMixinEmitterMsg" class="mt-10 handle-mixin-emitter-msg">
+        handleMixinEmitterMsg: {{ handleMixinEmitterMsg }}
+      </text>
+      <Comp2 class='comp2' title="title" />
     </view>
-  <!-- #ifdef APP -->
+    <!-- #ifdef APP -->
   </scroll-view>
   <!-- #endif -->
 </template>
 
 <script lang="uts">
+  import Comp1 from './components/Comp1.uvue'
+  import Comp2 from './components/Comp2.uvue'
   export default {
+    components: {
+      Comp1,
+      Comp2,
+    },
     mixins: [defineMixin({
       props: {
         mixinProp: {
@@ -24,12 +41,13 @@
       },
       data() {
         return {
+          handleMixinEmitterMsg: '',
           mixinDataMsg: '通过字面量定义非全局 mixin data',
           mixinOnloadMsg: ''
         }
       },
       computed: {
-        mixinComputed() : string {
+        mixinComputed(): string {
           const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg: ${this.mixinOnloadMsg}`
           console.log(res)
           return res
@@ -39,12 +57,16 @@
         this.mixinOnloadMsg = 'mixin onLoad msg in onLoad'
       },
       methods: {
-        mixinMethod() : string {
+        mixinMethod(): string {
           const res = '通过字面量定义非全局 mixin method'
           console.log(res)
           return res
+        },
+        handleMixinEmitter(emit: string, arg: string) {
+          this.handleMixinEmitterMsg = `触发 ${emit}, 参数为 ${arg}`
+          console.log(this.handleMixinEmitterMsg)
         }
       },
     })]
   }
-</script>
\ No newline at end of file
+</script>

pages/component-instance/props/array-literal-composition.uvue

@@ -25,5 +25,11 @@
 </template>
 
 <script setup lang="uts">
-defineProps(['str', 'num', 'bool', 'obj', 'arr'])
+const props = defineProps(['str', 'num', 'bool', 'obj', 'arr'])
+
+console.log('props.str: ',props.str);
+console.log('props.num: ',props.num);
+console.log('props.obj: ',props.obj);
+console.log('props.bool: ',props.bool);
+console.log('props.arr: ',props.arr);
 </script>

pages/component-instance/props/array-literal-options.uvue

 <template>
-  <view>
+  <view>
     <text class="mb-10 bold">array literal</text>
     <view class="mb-10 flex justify-between flex-row">
       <text>str: </text>
@@ -27,5 +27,13 @@
 <script lang="uts">
 export default {
   props: ['str', 'num', 'bool', 'obj', 'arr'],
+  mounted() {
+    console.log('this.$props is Map', this.$props, this.$props instanceof Map);
+    console.log('this.$props.str: ',this.$props['str']);
+    console.log('this.$props.num: ',this.$props['num']);
+    console.log('this.$props.bool: ',this.$props['bool']);
+    console.log('this.$props.arr: ',this.$props['arr']);
+    console.log('this.$props.obj: ',this.$props['obj']);
+  }
 };
 </script>

pages/directive/v-bind/v-bind-options.uvue

-<template>
-  <view class="page">
-    <!-- v-bind attribute -->
-    <button id="disabled-btn" class="mb-10" :disabled="true">
-      :disabled true
-    </button>
-    <button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">
-      v-bind:disabled false
-    </button>
-
-    <!-- v-bind style -->
-    <view class="flex justify-between flex-row mb-10">
-      <text>bind object style fontSize:</text>
-      <text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
-        {{ dataInfo.fontSize }}
-      </text>
-    </view>
-    <view id="bind-array-style" class="mb-10 p-10" :style="[dataInfo.backgroundColor, dataInfo.border]">
-      <view>bind arr style</view>
-      <view class="my-10">{{ dataInfo.backgroundColor }}</view>
-      <view>{{ dataInfo.border }}</view>
-    </view>
-
-    <!-- v-bind props -->
-    <Foo :title="dataInfo.fooProps.title" :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />
-
-    <!-- v-bind in style -->
-    <!-- #ifdef WEB -->
-    <view class="mb-10 v-bind-css"></view>
-    <!-- #endif -->
-  </view>
-</template>
-
-<script lang="uts">
-  import Foo from './Foo-options.uvue'
-
-  type FooPropsObj = {
-    name : string
-  }
-  type FooProps = {
-    title : string
-    num : number
-    obj : FooPropsObj
-  }
-  type DataInfo = {
-    fontSize : string
-    backgroundColor : string
-    border : string
-    fooProps : FooProps
-    vBindClassBackgroundColor : string,
-  }
-
-  export default {
-    components: { Foo },
-    data() {
-      return {
-        dataInfo: {
-          fontSize: '20px',
-          backgroundColor: 'background-color: green',
-          border: 'border: 2px solid red',
-          fooProps: {
-            title: 'foo title',
-            num: 1,
-            obj: {
-              name: 'foo obj name',
-            }
-          },
-          vBindClassBackgroundColor: 'red',
-        } as DataInfo
-      }
-    },
-  }
-</script>
-
-<style>
-  /* #ifdef WEB */
-  .v-bind-css {
-    background-color: v-bind(dataInfo.vBindClassBackgroundColor);
-    height: 20px;
-  }
-  /* #endif */
-</style>
\ No newline at end of file
+<template>
+  <view class="page">
+    <!-- v-bind attribute -->
+    <button id="disabled-btn" class="mb-10" :disabled="true">:disabled true</button>
+    <button id="v-bind-disabled-btn" class="mb-10" v-bind:disabled="false">v-bind:disabled false</button>
+
+    <!-- v-bind style -->
+    <view class="flex justify-between flex-row mb-10">
+      <text>bind object style fontSize:</text>
+      <text id="bind-object-style" :style="{ fontSize: dataInfo.fontSize }">
+        {{ dataInfo.fontSize }}
+      </text>
+    </view>
+    <view id="bind-array-style" class="mb-10 p-10" :style="[dataInfo.backgroundColor, dataInfo.border]">
+      <view>bind arr style</view>
+      <view class="my-10">{{ dataInfo.backgroundColor }}</view>
+      <view>{{ dataInfo.border }}</view>
+    </view>
+
+    <!-- v-bind props -->
+    <Foo :title :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />
+
+    <!-- v-bind in style -->
+    <!-- #ifdef WEB -->
+    <view class="mb-10 v-bind-css"></view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script lang="uts">
+import Foo from './Foo-options.uvue'
+
+type FooPropsObj = {
+  name: string
+}
+type FooProps = {
+  title: string
+  num: number
+  obj: FooPropsObj
+}
+type DataInfo = {
+  fontSize: string
+  backgroundColor: string
+  border: string
+  fooProps: FooProps
+  vBindClassBackgroundColor: string
+}
+
+export default {
+  components: { Foo },
+  data() {
+    return {
+      title: 'foo title',
+      dataInfo: {
+        fontSize: '20px',
+        backgroundColor: 'background-color: green',
+        border: 'border: 2px solid red',
+        fooProps: {
+          title: '',
+          num: 1,
+          obj: {
+            name: 'foo obj name'
+          }
+        },
+        vBindClassBackgroundColor: 'red'
+      } as DataInfo
+    }
+  }
+}
+</script>
+
+<style>
+/* #ifdef WEB */
+.v-bind-css {
+  background-color: v-bind(dataInfo.vBindClassBackgroundColor);
+  height: 20px;
+}
+/* #endif */
+</style>

pages/index/index.uvue

@@ -725,18 +725,12 @@ export default {
                 {
                   id: 'v-once-options',
                   name: 'v-once 选项式 API',
-                  url: 'v-once-options',
-                  // #ifdef WEB
-                  enable: false
-                  // #endif
+                  url: 'v-once-options'
                 },
                 {
                   id: 'v-once-composition',
                   name: 'v-once 组合式 API',
-                  url: 'v-once-composition',
-                  // #ifdef WEB
-                  enable: false
-                  // #endif
+                  url: 'v-once-composition'
                 },
               ]
             },
@@ -747,18 +741,12 @@ export default {
                 {
                   id: 'v-memo-options',
                   name: 'v-memo 选项式 API',
-                  url: 'v-memo-options',
-                  // #ifdef WEB
-                  enable: false
-                  // #endif
+                  url: 'v-memo-options'
                 },
                 {
                   id: 'v-memo-composition',
                   name: 'v-memo 组合式 API',
-                  url: 'v-memo-composition',
-                  // #ifdef WEB
-                  enable: false
-                  // #endif
+                  url: 'v-memo-composition'
                 },
               ]
             },