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

@@ -7,6 +7,17 @@
       <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 -->
   </scroll-view>
@@ -14,7 +25,13 @@
 </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,10 +57,14 @@
         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)
         }
       },
     })]

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

@@ -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>
+    <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">
@@ -22,7 +18,7 @@
     </view>
 
     <!-- v-bind props -->
-    <Foo :title="dataInfo.fooProps.title" :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />
+    <Foo :title :num="dataInfo.fooProps.num" :obj="dataInfo.fooProps.obj" />
 
     <!-- v-bind in style -->
     <!-- #ifdef WEB -->
@@ -32,51 +28,52 @@
 </template>
 
 <script lang="uts">
-  import Foo from './Foo-options.uvue'
+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,
-  }
+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 {
+export default {
   components: { Foo },
   data() {
     return {
+      title: 'foo title',
       dataInfo: {
         fontSize: '20px',
         backgroundColor: 'background-color: green',
         border: 'border: 2px solid red',
         fooProps: {
-            title: 'foo title',
+          title: '',
           num: 1,
           obj: {
-              name: 'foo obj name',
+            name: 'foo obj name'
           }
         },
-          vBindClassBackgroundColor: 'red',
+        vBindClassBackgroundColor: 'red'
       } as DataInfo
     }
-    },
   }
+}
 </script>
 
 <style>
-  /* #ifdef WEB */
-  .v-bind-css {
+/* #ifdef WEB */
+.v-bind-css {
   background-color: v-bind(dataInfo.vBindClassBackgroundColor);
   height: 20px;
-  }
-  /* #endif */
+}
+/* #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'
                 },
               ]
             },