Skip to content

U
unidocs-uni-app-x-zh

DCloud / unidocs-uni-app-x-zh

通知 144
Star 2
Fork 33
U
unidocs-uni-app-x-zh
提交 78226013 编写于 作者: D DCloud_LXH
浏览文件
操作

feat: merge master

上级 b355ed57
显示空白变更内容
内联 并排
Showing with 63 addition and 63 deletion
docs/.vuepress/utils/vueJson.json
浏览文件 @ 78226013
......@@ -160,7 +160,7 @@
"E_App": {
"example": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/App.uvue",
"code": "```vue\n<script lang=\"uts\">\r\n import { state, setLifeCycleNum, setAppLaunchPath, setAppShowPath } from './store/index.uts'\r\n\r\n let firstBackTime = 0\r\n export default {\r\n onLaunch: function (options) {\r\n console.log(options)\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1000)\r\n setAppLaunchPath(options.path)\r\n console.log('App Launch')\r\n // #ifdef UNI-APP-X && APP-ANDROID\r\n const performance = uni.getPerformance()\r\n const observer : PerformanceObserver = performance.createObserver((entryList : PerformanceObserverEntryList) => {\r\n console.log('observer:entryList.getEntries()')\r\n console.log(entryList.getEntries())\r\n })\r\n observer.observe({\r\n entryTypes: ['render', 'navigation'],\r\n } as PerformanceObserverOptions)\r\n // #endif\r\n },\r\n onShow: function (options) {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 100)\r\n setAppShowPath(options.path)\r\n console.log('App Show')\r\n },\r\n onHide: function () {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 100)\r\n console.log('App Hide')\r\n },\r\n // #ifdef APP-ANDROID\r\n onLastPageBackPress: function () {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 1000)\r\n console.log('App LastPageBackPress')\r\n if (firstBackTime == 0) {\r\n uni.showToast({\r\n title: '再按一次退出应用',\r\n position: 'bottom',\r\n })\r\n firstBackTime = Date.now()\r\n setTimeout(() => {\r\n firstBackTime = 0\r\n }, 2000)\r\n } else if (Date.now() - firstBackTime < 2000) {\r\n firstBackTime = Date.now()\r\n uni.exit()\r\n }\r\n },\r\n // #endif\r\n onExit() {\r\n console.log('App Exit')\r\n },\r\n methods: {\r\n checkLaunchPath() : boolean {\r\n const HOME_PATH = 'pages/tab-bar/options-api'\r\n if (state.appLaunchPath != HOME_PATH) {\r\n return false\r\n }\r\n if (state.appShowPath != HOME_PATH) {\r\n return false\r\n }\r\n return true\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n @import \"./styles/common.css\";\r\n\r\n .list-item-text {\r\n line-height: 36px;\r\n }\r\n\r\n .split-title {\r\n margin: 20px 0 5px;\r\n padding: 5px 0;\r\n border-bottom: 1px solid #dfdfdf;\r\n }\r\n\r\n .btn-view {\r\n margin: 10px 0;\r\n padding: 10px;\r\n border: 1px solid #dfdfdf;\r\n border-radius: 3px;\r\n }\r\n</style>\n```",
"code": "```vue\n<script lang=\"uts\">\r\n import { state, setLifeCycleNum, setAppLaunchPath, setAppShowPath } from './store/index.uts'\r\n\r\n let firstBackTime = 0\r\n export default {\r\n onLaunch: function (options) {\r\n console.log(options)\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 1000)\r\n setAppLaunchPath(options.path)\r\n console.log('App Launch')\r\n // #ifdef UNI-APP-X && APP-ANDROID\r\n const performance = uni.getPerformance()\r\n const observer : PerformanceObserver = performance.createObserver((entryList : PerformanceObserverEntryList) => {\r\n console.log('observer:entryList.getEntries()')\r\n console.log(entryList.getEntries())\r\n })\r\n observer.observe({\r\n entryTypes: ['render', 'navigation'],\r\n } as PerformanceObserverOptions)\r\n // #endif\r\n },\r\n onShow: function (options) {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum + 100)\r\n setAppShowPath(options.path)\r\n console.log('App Show')\r\n },\r\n onHide: function () {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 100)\r\n console.log('App Hide')\r\n },\r\n // #ifdef APP-ANDROID\r\n onLastPageBackPress: function () {\r\n // 自动化测试\r\n setLifeCycleNum(state.lifeCycleNum - 1000)\r\n console.log('App LastPageBackPress')\r\n if (firstBackTime == 0) {\r\n uni.showToast({\r\n title: '再按一次退出应用',\r\n position: 'bottom',\r\n })\r\n firstBackTime = Date.now()\r\n setTimeout(() => {\r\n firstBackTime = 0\r\n }, 2000)\r\n } else if (Date.now() - firstBackTime < 2000) {\r\n firstBackTime = Date.now()\r\n uni.exit()\r\n }\r\n },\r\n // #endif\r\n onExit() {\r\n console.log('App Exit')\r\n },\r\n methods: {\r\n checkLaunchPath() : boolean {\r\n const HOME_PATH = 'pages/index/index'\r\n if (state.appLaunchPath != HOME_PATH) {\r\n return false\r\n }\r\n if (state.appShowPath != HOME_PATH) {\r\n return false\r\n }\r\n return true\r\n }\r\n }\r\n }\r\n</script>\r\n\r\n<style>\r\n@import './styles/common.css';\r\n\r\n.list-item-text {\r\n line-height: 36px;\r\n}\r\n\r\n.split-title {\r\n margin: 20px 0 5px;\r\n padding: 5px 0;\r\n border-bottom: 1px solid #dfdfdf;\r\n}\r\n\r\n.btn-view {\r\n margin: 10px 0;\r\n padding: 10px;\r\n border: 1px solid #dfdfdf;\r\n border-radius: 3px;\r\n}\r\n</style>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#"
}
},
......@@ -451,7 +451,7 @@
},
"props_array-literal-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/array-literal-options.uvue",
"code": "```vue\n<template>\r\n <view>\r\n <text class=\"mb-10 bold\">array literal</text>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>str: </text>\r\n <text id=\"array-literal-str\">{{ str }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>num: </text>\r\n <text id=\"array-literal-num\">{{ num }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>bool: </text>\r\n <text id=\"array-literal-bool\">{{ bool }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>obj: </text>\r\n <text id=\"array-literal-obj\">{{ JSON.stringify(obj) }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>arr: </text>\r\n <text id=\"array-literal-arr\">{{ JSON.stringify(arr) }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n props: ['str', 'num', 'bool', 'obj', 'arr'],\r\n mounted() {\r\n console.log('this.$props is Map', this.$props, this.$props instanceof Map);\r\n console.log('this.$props.str: ',this.$props['str']);\r\n console.log('this.$props.num: ',this.$props['num']);\r\n console.log('this.$props.bool: ',this.$props['bool']);\r\n console.log('this.$props.arr: ',this.$props['arr']);\r\n console.log('this.$props.obj: ',this.$props['obj']);\r\n }\r\n};\r\n</script>\r\n\n```",
"code": "```vue\n<template>\r\n <view>\r\n <text class=\"mb-10 bold\">array literal</text>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>str: </text>\r\n <text id=\"array-literal-str\">{{ str }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>num: </text>\r\n <text id=\"array-literal-num\">{{ num }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>bool: </text>\r\n <text id=\"array-literal-bool\">{{ bool }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>obj: </text>\r\n <text id=\"array-literal-obj\">{{ JSON.stringify(obj) }}</text>\r\n </view>\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>arr: </text>\r\n <text id=\"array-literal-arr\">{{ JSON.stringify(arr) }}</text>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n props: ['str', 'num', 'bool', 'obj', 'arr'],\r\n mounted() {\r\n console.log('this.$props.str: ',this.$props['str']);\r\n console.log('this.$props.num: ',this.$props['num']);\r\n console.log('this.$props.bool: ',this.$props['bool']);\r\n console.log('this.$props.arr: ',this.$props['arr']);\r\n console.log('this.$props.obj: ',this.$props['obj']);\r\n }\r\n};\r\n</script>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/array-literal-options"
},
"props_object-type-composition": {
......@@ -521,7 +521,7 @@
},
"root_child-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/child-composition.uvue",
"code": "```vue\n<template>\r\n <view class=\"flex justify-between flex-row\">\r\n <text>root str in parent component: </text>\r\n <text id=\"root-str-child\">{{ rootStr }}</text>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst str = ref('child component str')\r\nconst rootStr = ref('')\r\n\r\nonMounted(() => {\r\n const instance = getCurrentInstance()!.proxy!\r\n rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n})\r\n</script>\r\n\n```",
"code": "```vue\n<template>\r\n <view class=\"flex justify-between flex-row\">\r\n <text>root str in parent component: </text>\r\n <text id=\"root-str-child\">{{ rootStr }}</text>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst str = ref('child component str')\r\nconst rootStr = ref('')\r\n\r\nonMounted(() => {\r\n const instance = getCurrentInstance()!.proxy!\r\n // #ifdef APP-ANDROID\r\n rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n rootStr.value = instance.$root!['str'] as string\r\n // #endif\r\n})\r\n</script>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/child-composition"
},
"root_child-options": {
......@@ -531,7 +531,7 @@
},
"root_root-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/root-composition.uvue",
"code": "```vue\n\r\n<template>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>root str in parent component: </text>\r\n <text id=\"root-str-parent\">{{ rootStr }}</text>\r\n </view>\r\n <child />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport Child from './child-composition.uvue'\r\n\r\nconst str = ref('root component str')\r\nconst rootStr = ref('')\r\n\r\nonReady(() => {\r\n const instance = getCurrentInstance()!.proxy!\r\n rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n})\r\n\r\ndefineExpose({\r\n str\r\n})\r\n</script>\r\n\n```",
"code": "```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"mb-10 flex justify-between flex-row\">\r\n <text>root str in parent component: </text>\r\n <text id=\"root-str-parent\">{{ rootStr }}</text>\r\n </view>\r\n <Child />\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n import Child from './child-composition.uvue'\r\n\r\n const str = ref('root component str')\r\n const rootStr = ref('')\r\n\r\n onReady(() => {\r\n const instance = getCurrentInstance()!.proxy!\n // TODO: 确认 android 与 ios 的差异， ios 与标准 vue 相同\n // #ifdef APP-ANDROID\r\n rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n // #endif\r\n // #ifndef APP-ANDROID\r\n rootStr.value = instance.$root!['str'] as string\r\n // #endif\r\n })\r\n\r\n defineExpose({\r\n str\r\n })\r\n</script>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/root-composition"
},
"root_root-options": {
......@@ -606,12 +606,12 @@
},
"mixins_components_Comp1": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/Comp1.uvue",
"code": "```vue\n<template>\r\n <view class=\"mt-10\" ref=\"mixin-comp-root\">\r\n <text class=\"bold\">Comp1: inheritAttrs: false</text>\r\n <text class=\"mt-10\" style=\"color:#ccc;\"\r\n >rootElementTitle should be null</text\r\n >\r\n <text class=\"mt-10 root-element-title-1\">rootElementTitle: {{ rootElementTitle }}</text>\n <!-- #ifdef APP -->\r\n <text class=\"mt-10 bold\">trigger emitter:</text>\r\n <button class=\"mt-10 global-mixin-emit-1\" @click=\"triggerEmitter('globalMixinEmit1')\">\r\n trigger globalMixinEmit1\r\n </button>\r\n <button\r\n class=\"mt-10 global-child-mixin-emit-1\"\r\n @click=\"triggerEmitter('globalChildMixinEmit1')\">\r\n trigger globalChildMixinEmit1\r\n </button>\r\n <button class=\"mt-10 global-mixin-emit-2\" @click=\"triggerEmitter('globalMixinEmit2')\">\r\n trigger globalMixinEmit2\r\n </button>\r\n <button\r\n class=\"mt-10 global-child-mixin-emit-2\"\r\n @click=\"triggerEmitter('globalChildMixinEmit2')\">\r\n trigger globalChildMixinEmit2\r\n </button>\r\n <button class=\"mt-10 mixin-emit\" @click=\"triggerEmitter('mixinEmit')\">\r\n trigger mixinEmit\r\n </button>\r\n <button class=\"mt-10 child-mixin-emit\" @click=\"triggerEmitter('childMixinEmit')\">\r\n trigger childMixinEmit\r\n </button>\r\n <MixinComp />\n <!-- #endif -->\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n mixins:[{\r\n mixins: [{\r\n emits: ['childMixinEmit']\r\n }],\r\n inheritAttrs: false,\r\n emits:['mixinEmit']\r\n }],\r\n data(){\r\n return {\r\n rootElementTitle: '' as string | null\r\n }\r\n },\r\n mounted(){\r\n const rootElement = this.$refs['mixin-comp-root'] as UniElement\r\n this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))\r\n },\r\n methods: {\r\n triggerEmitter(emit: string){\r\n this.$emit(emit, emit)\r\n },\r\n }\r\n}\r\n</script>\r\n\n```",
"code": "```vue\n<template>\r\n <view class=\"mt-10\" ref=\"mixin-comp-root\">\r\n <text class=\"bold\">Comp1: inheritAttrs: false</text>\r\n <text class=\"mt-10\" style=\"color:#ccc;\"\r\n >rootElementTitle should be null</text\r\n >\r\n <text class=\"mt-10 root-element-title-1\">rootElementTitle: {{ rootElementTitle }}</text>\r\n <!-- #ifdef APP -->\r\n <text class=\"mt-10 bold\">trigger emitter:</text>\r\n <button class=\"mt-10 global-mixin-emit-1\" @click=\"triggerEmitter('globalMixinEmit1')\">\r\n trigger globalMixinEmit1\r\n </button>\r\n <button\r\n class=\"mt-10 global-child-mixin-emit-1\"\r\n @click=\"triggerEmitter('globalChildMixinEmit1')\">\r\n trigger globalChildMixinEmit1\r\n </button>\r\n <button class=\"mt-10 global-mixin-emit-2\" @click=\"triggerEmitter('globalMixinEmit2')\">\r\n trigger globalMixinEmit2\r\n </button>\r\n <button\r\n class=\"mt-10 global-child-mixin-emit-2\"\r\n @click=\"triggerEmitter('globalChildMixinEmit2')\">\r\n trigger globalChildMixinEmit2\r\n </button>\r\n <button class=\"mt-10 mixin-emit\" @click=\"triggerEmitter('mixinEmit')\">\r\n trigger mixinEmit\r\n </button>\r\n <button class=\"mt-10 child-mixin-emit\" @click=\"triggerEmitter('childMixinEmit')\">\r\n trigger childMixinEmit\r\n </button>\r\n <MixinComp />\r\n <!-- #endif -->\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n mixins:[{\r\n mixins: [{\r\n emits: ['childMixinEmit']\r\n }],\r\n inheritAttrs: false,\r\n emits:['mixinEmit']\r\n }],\r\n data(){\r\n return {\r\n rootElementTitle: '' as string | null\r\n }\r\n },\r\n mounted(){\r\n const rootElement = this.$refs['mixin-comp-root'] as UniElement\r\n this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))\r\n },\r\n methods: {\r\n triggerEmitter(emit: string){\r\n this.$emit(emit, emit)\r\n },\r\n }\r\n}\r\n</script>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/Comp1"
},
"mixins_components_Comp2": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/Comp2.uvue",
"code": "```vue\n<template>\r\n <view class=\"mt-10\" ref=\"mixin-comp-root\">\r\n <text class=\"bold\">Comp2: inheritAttrs: true</text>\r\n <text class=\"mt-10\" style=\"color:#ccc;\">rootElementTitle should not be null</text >\r\n <text class=\"mt-10 root-element-title-2\"\r\n >rootElementTitle: {{ rootElementTitle }}</text\r\n >\r\n <text class=\"mt-10\">{{ namesakeMixinProp }}</text>\r\n <text class=\"mt-10\">{{ namesakeMixinDataMsg }}</text>\r\n <text class=\"mt-10\">{{ namesakeMixinComputed }}</text>\r\n <text class=\"mt-10 mixin-watch-msg\">{{ mixinWatchMsg }}</text>\r\n <text class=\"mt-10\">{{ namesakeMixinMethod() }}</text>\r\n <button class=\"mt-10\" @click=\"changeGlobalMixinOnloadMsg1\">\r\n change globalMixinOnloadMsg1\r\n </button>\r\n <MixinComp />\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport CompForComp from './CompForComp.uvue'\r\n\r\nexport default {\r\n mixins:[{\r\n inheritAttrs: true,\r\n }],\r\n components: {MixinComp: CompForComp},\r\n props: {\r\n namesakeMixinProp: {\r\n type: String,\r\n default: '组件内部的同名 props'\r\n }\r\n },\r\n data(){\r\n return {\r\n namesakeMixinDataMsg: '组件内部的同名 data',\r\n mixinWatchMsg: '',\r\n rootElementTitle: '' as string | null\r\n }\r\n },\r\n computed: {\r\n namesakeMixinComputed(): string {\r\n const res = '组件内部的同名 computed'\r\n console.log(res)\r\n return res\r\n }\r\n },\r\n mounted(){\r\n const rootElement = this.$refs['mixin-comp-root'] as UniElement\r\n this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))\r\n },\r\n watch: {\r\n globalMixinOnloadMsg1(newVal: string) {\r\n this.mixinWatchMsg = `组件内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\r\n console.log(this.mixinWatchMsg)\r\n },\r\n },\r\n methods: {\r\n namesakeMixinMethod(): string {\r\n const res = '组件内部的同名 method'\r\n console.log(res)\r\n return res\r\n },\r\n changeGlobalMixinOnloadMsg1(){\r\n this.globalMixinOnloadMsg1 = 'new globalMixinOnloadMsg1 changed in comp2'\r\n }\r\n }\r\n}\r\n</script>\r\n\n```",
"code": "```vue\n<template>\r\n <view class=\"mt-10\" ref=\"mixin-comp-root\">\r\n <text class=\"bold\">Comp2: inheritAttrs: true</text>\r\n <text class=\"mt-10\" style=\"color:#ccc;\">rootElementTitle should not be null</text >\r\n <text class=\"mt-10 root-element-title-2\"\r\n >rootElementTitle: {{ rootElementTitle }}</text\r\n >\r\n <text class=\"mt-10\">{{ namesakeMixinProp }}</text>\r\n <text class=\"mt-10\">{{ namesakeMixinDataMsg }}</text>\r\n <text class=\"mt-10\">{{ namesakeMixinComputed }}</text>\r\n <text class=\"mt-10 mixin-watch-msg\">{{ mixinWatchMsg }}</text>\r\n <text class=\"mt-10\">{{ namesakeMixinMethod() }}</text>\r\n <button class=\"mt-10\" @click=\"changeGlobalMixinOnloadMsg1\">\r\n change globalMixinOnloadMsg1\r\n </button>\r\n <MixinComp />\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport CompForComp from './CompForComp.uvue'\r\n\r\nexport default {\r\n mixins:[{\r\n inheritAttrs: true,\r\n }],\r\n components: {MixinComp: CompForComp},\r\n props: {\r\n namesakeMixinProp: {\r\n type: String,\r\n default: '组件内部的同名 props'\r\n }\r\n },\r\n data(){\r\n return {\r\n namesakeMixinDataMsg: '组件内部的同名 data',\r\n mixinWatchMsg: '',\r\n rootElementTitle: '' as string | null\r\n }\r\n },\r\n computed: {\r\n namesakeMixinComputed(): string {\r\n const res = '组件内部的同名 computed'\r\n console.log(res)\r\n return res\r\n }\r\n },\r\n mounted(){\r\n const rootElement = this.$refs['mixin-comp-root'] as UniElement\r\n this.rootElementTitle = rootElement.getAttribute('title')\r\n },\r\n watch: {\r\n globalMixinOnloadMsg1(newVal: string) {\r\n this.mixinWatchMsg = `组件内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\r\n console.log(this.mixinWatchMsg)\r\n },\r\n },\r\n methods: {\r\n namesakeMixinMethod(): string {\r\n const res = '组件内部的同名 method'\r\n console.log(res)\r\n return res\r\n },\r\n changeGlobalMixinOnloadMsg1(){\r\n this.globalMixinOnloadMsg1 = 'new globalMixinOnloadMsg1 changed in comp2'\r\n }\r\n }\r\n}\r\n</script>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/Comp2"
},
"mixins_components_CompForComp": {
......@@ -693,7 +693,7 @@
},
"v-bind_v-bind-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-bind/v-bind-options.uvue",
"code": "```vue\n<template>\n <view class=\"page\">\n <!-- v-bind attribute -->\n <button id=\"disabled-btn\" class=\"mb-10\" :disabled=\"true\">:disabled true</button>\n <button id=\"v-bind-disabled-btn\" class=\"mb-10\" v-bind:disabled=\"false\">v-bind:disabled false</button>\n\n <!-- v-bind style -->\n <view class=\"flex justify-between flex-row mb-10\">\n <text>bind object style fontSize:</text>\n <text id=\"bind-object-style\" :style=\"{ fontSize: dataInfo.fontSize }\">\n {{ dataInfo.fontSize }}\n </text>\n </view>\n <view id=\"bind-array-style\" class=\"mb-10 p-10\" :style=\"[dataInfo.backgroundColor, dataInfo.border]\">\n <view>bind arr style</view>\n <view class=\"my-10\">{{ dataInfo.backgroundColor }}</view>\n <view>{{ dataInfo.border }}</view>\n </view>\n\n <!-- v-bind props -->\n <Foo :title :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\n\n <!-- v-bind in style -->\n <!-- #ifdef WEB -->\n <view class=\"mb-10 v-bind-css\"></view>\n <!-- #endif -->\n </view>\n</template>\n\n<script lang=\"uts\">\nimport Foo from './Foo-options.uvue'\n\ntype FooPropsObj = {\n name: string\n}\ntype FooProps = {\n title: string\n num: number\n obj: FooPropsObj\n}\ntype DataInfo = {\n fontSize: string\n backgroundColor: string\n border: string\n fooProps: FooProps\n vBindClassBackgroundColor: string\n}\n\nexport default {\n components: { Foo },\n data() {\n return {\n title: 'foo title',\n dataInfo: {\n fontSize: '20px',\n backgroundColor: 'background-color: green',\n border: 'border: 2px solid red',\n fooProps: {\n title: '',\n num: 1,\n obj: {\n name: 'foo obj name'\n }\n },\n vBindClassBackgroundColor: 'red'\n } as DataInfo\n }\n }\n}\n</script>\n\n<style>\n/* #ifdef WEB */\n.v-bind-css {\n background-color: v-bind(dataInfo.vBindClassBackgroundColor);\n height: 20px;\n}\n/* #endif */\n</style>\n\n```",
"code": "```vue\n<template>\r\n <view class=\"page\">\r\n <!-- v-bind attribute -->\r\n <button id=\"disabled-btn\" class=\"mb-10\" :disabled=\"true\">:disabled true</button>\r\n <button id=\"v-bind-disabled-btn\" class=\"mb-10\" v-bind:disabled=\"false\">v-bind:disabled false</button>\r\n\r\n <!-- v-bind style -->\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>bind object style fontSize:</text>\r\n <text id=\"bind-object-style\" :style=\"{ fontSize: dataInfo.fontSize }\">\r\n {{ dataInfo.fontSize }}\r\n </text>\r\n </view>\r\n <view id=\"bind-array-style\" class=\"mb-10 p-10\" :style=\"[dataInfo.backgroundColor, dataInfo.border]\">\r\n <view>bind arr style</view>\r\n <view class=\"my-10\">{{ dataInfo.backgroundColor }}</view>\r\n <view>{{ dataInfo.border }}</view>\r\n </view>\r\n\r\n <!-- v-bind props -->\r\n <Foo :title=\"dataInfo.fooProps.title\" :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\r\n\r\n <!-- v-bind in style -->\r\n <!-- #ifdef WEB -->\r\n <view class=\"mb-10 v-bind-css\"></view>\r\n <!-- #endif -->\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from './Foo-options.uvue'\r\n\r\ntype FooPropsObj = {\r\n name: string\r\n}\r\ntype FooProps = {\r\n title: string\r\n num: number\r\n obj: FooPropsObj\r\n}\r\ntype DataInfo = {\r\n fontSize: string\r\n backgroundColor: string\r\n border: string\r\n fooProps: FooProps\r\n vBindClassBackgroundColor: string\r\n}\r\n\r\nexport default {\r\n components: { Foo },\r\n data() {\r\n return {\r\n dataInfo: {\r\n fontSize: '20px',\r\n backgroundColor: 'background-color: green',\r\n border: 'border: 2px solid red',\r\n fooProps: {\r\n title: 'foo title',\r\n num: 1,\r\n obj: {\r\n name: 'foo obj name'\r\n }\r\n },\r\n vBindClassBackgroundColor: 'red'\r\n } as DataInfo\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n/* #ifdef WEB */\r\n.v-bind-css {\r\n background-color: v-bind(dataInfo.vBindClassBackgroundColor);\r\n height: 20px;\r\n}\r\n/* #endif */\r\n</style>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/v-bind-options"
},
"v-for_v-for-composition": {
......@@ -911,16 +911,6 @@
}
},
"E_built-in": {
"component_component_component-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/component/component-composition.uvue",
"code": "```vue\n<template>\r\n <view class=\"container\">\r\n <component :is=\"currentComponentStr\" />\r\n <component :is=\"currentComponentInstance\" />\r\n <button @click=\"changeCurrentComponent\">change current component</button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from '../../../../components/Foo.uvue'\r\nimport Bar from '../../../../components/Bar.uvue'\r\nexport default {\r\n components: {\r\n Foo,\r\n Bar\r\n },\r\n data() {\r\n return {\r\n currentComponentStr: 'Foo',\r\n currentComponentInstance: Foo\r\n }\r\n },\r\n methods: {\r\n changeCurrentComponent() {\r\n if (this.currentComponentStr === 'Foo') {\r\n this.currentComponentStr = 'Bar'\r\n this.currentComponentInstance = Bar\r\n } else {\r\n this.currentComponentStr = 'Foo'\r\n this.currentComponentInstance = Foo\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\n</style>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/component/component-composition"
},
"component_component_component-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/component/component-options.uvue",
"code": "```vue\n<template>\r\n <view class=\"container\">\r\n <component :is=\"currentComponentStr\" />\r\n <component :is=\"currentComponentInstance\" />\r\n <button @click=\"changeCurrentComponent\">change current component</button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from '../../../../components/Foo.uvue'\r\nimport Bar from '../../../../components/Bar.uvue'\r\nexport default {\r\n components: {\r\n Foo,\r\n Bar\r\n },\r\n data() {\r\n return {\r\n currentComponentStr: 'Foo',\r\n currentComponentInstance: Foo\r\n }\r\n },\r\n methods: {\r\n changeCurrentComponent() {\r\n if (this.currentComponentStr === 'Foo') {\r\n this.currentComponentStr = 'Bar'\r\n this.currentComponentInstance = Bar\r\n } else {\r\n this.currentComponentStr = 'Foo'\r\n this.currentComponentInstance = Foo\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\n</style>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/component/component-options"
},
"component_keep-alive_keep-alive-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/keep-alive/keep-alive-composition.uvue",
"code": "```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <text class=\"bold mb-10\">include=\"Counter,Message\"</text>\r\n <KeepAlive include=\"Counter,Message\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">:include=\"/Counter|Message/\"</text>\r\n <KeepAlive :include=\"/Counter|Message/\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mb-10 mb-10\">:include=\"['Counter', 'Message']\"</text>\r\n <KeepAlive :include=\"['Counter', 'Message']\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">exclude=\"ShouldExclude\"</text>\r\n <KeepAlive exclude=\"ShouldExclude\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">:max=\"2\"</text>\r\n <KeepAlive :max=\"2\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <button class=\"mt-10 show-counter\" @click=\"changeComponent('Counter')\">show Counter</button>\r\n <button class=\"mt-10 show-message\" @click=\"changeComponent('Message')\">show Message</button>\r\n <button class=\"mt-10 show-should-exclude\" @click=\"changeComponent('ShouldExclude')\">show ShouldExclude</button>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport Counter from '@/components/keep-alive/Counter.uvue'\r\nimport Message from '@/components/keep-alive/Message.uvue'\r\nimport ShouldExclude from '@/components/keep-alive/ShouldExclude.uvue'\r\n\r\ndefineOptions({\r\n components: {\r\n Counter,\r\n Message,\r\n ShouldExclude\r\n }\r\n})\r\n\r\nconst currentComponent = ref<string>('ShouldExclude')\r\n\r\nconst changeComponent = (componentName: string) => {\r\n currentComponent.value = componentName\r\n}\r\n</script>\r\n\r\n<style>\r\n.hr {\r\n margin: 30rpx 0;\r\n border-bottom: 1px solid #ccc;\r\n}\r\n</style>\n```",
......@@ -931,26 +921,6 @@
"code": "```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view class=\"page\">\r\n <text class=\"bold mb-10\">include \"Counter,Message\"</text>\r\n <KeepAlive include=\"Counter,Message\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">include \"/Counter|Message/\"</text>\r\n <KeepAlive :include=\"/Counter|Message/\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">include \"['Counter', 'Message']\"</text>\r\n <KeepAlive :include=\"['Counter', 'Message']\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">exclude \"ShouldExclude\"</text>\r\n <KeepAlive exclude=\"ShouldExclude\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <text class=\"bold mt-10 mb-10\">max 2</text>\r\n <KeepAlive :max=\"2\">\r\n <component :is=\"currentComponent\"></component>\r\n </KeepAlive>\r\n <view class=\"hr\"></view>\r\n <button class=\"mt-10 show-counter\" @click=\"changeComponent('Counter')\">show Counter</button>\r\n <button class=\"mt-10 show-message\" @click=\"changeComponent('Message')\">show Message</button>\r\n <button class=\"mt-10 show-should-exclude\" @click=\"changeComponent('ShouldExclude')\">show ShouldExclude</button>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Counter from '@/components/keep-alive/Counter.uvue'\r\nimport Message from '@/components/keep-alive/Message.uvue'\r\nimport ShouldExclude from '@/components/keep-alive/ShouldExclude.uvue'\r\nexport default {\r\n components: {\r\n Counter,\r\n Message,\r\n ShouldExclude\r\n },\r\n data() {\r\n return {\r\n currentComponent: 'ShouldExclude'\r\n }\r\n },\r\n methods: {\r\n changeComponent(componentName: string) {\r\n this.currentComponent = componentName\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.hr {\r\n margin-top: 30rpx;\r\n border-bottom: 1px solid #ccc;\r\n}\r\n</style>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/keep-alive/keep-alive-options"
},
"component_slots_child-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/slots/child-composition.uvue",
"code": "```vue\n<template>\r\n <view class=\"container\">\r\n <view>\r\n <slot name=\"header\" msg=\"Here might be a page title\"></slot>\r\n </view>\r\n <view>\r\n <slot msg=\"A paragraph for the main content.\"></slot>\r\n </view>\r\n <view>\r\n <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ndefineOptions({\r\n name: 'child'\r\n})\r\n\r\ndefineSlots<{\r\n default(props: { msg: string }): any\r\n header(props: { msg: string }): any\r\n footer(props: { msg: string }): any\r\n}>()\r\n</script>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/slots/child-composition"
},
"component_slots_child-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/slots/child-options.uvue",
"code": "```vue\n<template>\r\n <view class=\"container\">\r\n <view>\r\n <slot name=\"header\" msg=\"Here might be a page title\"></slot>\r\n </view>\r\n <view>\r\n <slot msg=\"A paragraph for the main content.\"></slot>\r\n </view>\r\n <view>\r\n <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport { SlotsType } from 'vue'\r\nexport default {\r\n name: 'child',\r\n slots: Object as SlotsType<{\r\n header: { msg: string }\r\n default: { msg: string }\r\n footer: { msg: string }\r\n }>\r\n}\r\n</script>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/slots/child-options"
},
"component_slots_slots-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/slots/slots-composition.uvue",
"code": "```vue\n<template>\r\n <view class=\"content\">\r\n <child>\r\n <template v-slot:header=\"slotProps\">\r\n <view class=\"header\">{{ slotProps.msg }}</view>\r\n </template>\r\n <template v-slot:default=\"{ msg }\">\r\n <view class=\"main\">{{ msg }}</view>\r\n </template>\r\n <template #footer=\"{ msg: text }\">\r\n <view class=\"footer\">{{ text }}</view>\r\n </template>\r\n </child>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport child from './child-composition.uvue'\r\n</script>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/slots/slots-composition"
},
"component_slots_slots-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/slots/slots-options.uvue",
"code": "```vue\n<template>\r\n <view class=\"content\">\r\n <child>\r\n <template v-slot:header=\"slotProps\">\r\n <view class=\"header\">{{ slotProps.msg }}</view>\r\n </template>\r\n <template v-slot:default=\"{ msg }\">\r\n <view class=\"main\">{{ msg }}</view>\r\n </template>\r\n <template #footer=\"{ msg: text }\">\r\n <view class=\"footer\">{{ text }}</view>\r\n </template>\r\n </child>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport child from './child-options.uvue'\r\nexport default {\r\n components: { child }\r\n}\r\n</script>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/slots/slots-options"
},
"component_teleport_teleport-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/teleport/teleport-composition.uvue",
"code": "```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view id=\"container\" class=\"container\">\r\n <text class=\"text\">.container 区域</text>\r\n <view id=\"content1\" class=\"content content-1\">\r\n <text class=\"text\">content1 区域</text>\r\n </view>\r\n <view id=\"content2\" class=\"content content-2\">\r\n <text class=\"text\">content2 区域</text>\r\n </view>\r\n <teleport v-if=\"show\" to=\"#content1\" :disabled=\"disabled\">\r\n <view class=\"send-content\">\r\n <text class=\"send-content-text\">内容在.container中，使用teleport在#content1元素中展示</text>\r\n </view>\r\n </teleport>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst to = ref<string>('content1')\r\nconst showingString = ref<string>('穿梭内容在 body 中')\r\nconst disabled = ref<boolean>(false)\r\nconst show = ref<boolean>(false)\r\n\r\nonReady(() => {\r\n // 需要等内容挂载后，teleport才生效\r\n show.value = true\r\n})\r\nconst changePosition = () => {\r\n to.value = '#content1'\r\n}\r\n\r\ndefineExpose({\r\n changePosition\r\n})\r\n</script>\r\n\r\n<style>\r\n.container {\r\n background-color: #f5f5f5;\r\n border: 1px #ccc solid;\r\n margin: 5px;\r\n padding: 10px;\r\n}\r\n\r\n.text {\r\n margin: 5px 0;\r\n}\r\n\r\n.content {\r\n height: 120px;\r\n border: 1px #ccc solid;\r\n margin: 5px;\r\n padding: 10px;\r\n}\r\n\r\n.send-content {\r\n padding: 5px;\r\n background-color: #ff5a5f;\r\n height: 50px;\r\n}\r\n\r\n.send-content-text {\r\n color: #fff;\r\n font-size: 12px;\r\n}\r\n</style>\n```",
......@@ -961,25 +931,55 @@
"code": "```vue\n<template>\r\n <!-- #ifdef APP -->\r\n <scroll-view style=\"flex: 1\">\r\n <!-- #endif -->\r\n <view id=\"container\" class=\"container\">\r\n <text class=\"text\">.container 区域</text>\r\n <view id=\"content1\" class=\"content content-1\">\r\n <text class=\"text\">content1 区域</text>\r\n </view>\r\n <view id=\"content2\" class=\"content content-2\">\r\n <text class=\"text\">content2 区域</text>\r\n </view>\r\n <teleport v-if=\"show\" to=\"#content1\" :disabled=\"disabled\">\r\n <view class=\"send-content\">\r\n <text class=\"send-content-text\">内容在.container中，使用teleport在#content1元素中展示</text>\r\n </view>\r\n </teleport>\r\n </view>\r\n <!-- #ifdef APP -->\r\n </scroll-view>\r\n <!-- #endif -->\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n data() {\r\n return {\r\n to: 'content1',\r\n disabled: false,\r\n showingString: '穿梭内容在 body 中',\r\n show: false\r\n }\r\n },\r\n onReady() {\r\n // 需要等内容挂载后，teleport才生效\r\n this.show = true\r\n },\r\n methods: {\r\n changePosition() {\r\n this.to = '#content1'\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.container {\r\n background-color: #f5f5f5;\r\n border: 1px #ccc solid;\r\n margin: 5px;\r\n padding: 10px;\r\n}\r\n.text {\r\n margin: 5px 0;\r\n}\r\n\r\n.content {\r\n height: 120px;\r\n border: 1px #ccc solid;\r\n margin: 5px;\r\n padding: 10px;\r\n}\r\n\r\n.send-content {\r\n padding: 5px;\r\n background-color: #ff5a5f;\r\n height: 50px;\r\n}\r\n\r\n.send-content-text {\r\n color: #fff;\r\n font-size: 12px;\r\n}\r\n</style>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/teleport/teleport-options"
},
"component_template_template-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/template/template-composition.uvue",
"code": "```vue\n<template>\r\n <view class=\"page\">\r\n <template v-if=\"isShow\">\r\n <view class=\"title\">{{ title }}</view>\r\n </template>\r\n <view class=\"show-botton\" @click=\"handleShow\">{{ isShow ? '点击隐藏' : '点击显示' }}</view>\r\n <template v-for=\"(item, index) in list\" :key=\"index\">\r\n <view class=\"item\">{{ index + 1 }}.{{ item.name }}</view>\r\n </template>\r\n <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype ListItem = {\r\n name: string\r\n}\r\n\r\n// 自动化测试拿不到 ref\r\ndefineOptions({\r\n data() {\r\n return {\r\n isShow: false\r\n }\r\n },\r\n methods: {\r\n handleShow() {\r\n this.isShow = !this.isShow\r\n }\r\n }\r\n})\r\n\r\nconst title = ref<string>('hello')\r\nconst list = ref<ListItem[]>([\r\n {\r\n name: 'foo1'\r\n },\r\n {\r\n name: 'foo2'\r\n }\r\n] as ListItem[])\r\n\r\nconst goMapStyle = () => {\r\n uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-composition' })\r\n}\r\n\r\ndefineExpose({\r\n goMapStyle\r\n})\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\n</style>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/template/template-composition"
"special-elements_component_component-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/component/component-composition.uvue",
"code": "```vue\n<template>\r\n <view class=\"container\">\r\n <component :is=\"currentComponentStr\" />\r\n <component :is=\"currentComponentInstance\" />\r\n <button @click=\"changeCurrentComponent\">change current component</button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from '../../../../components/Foo.uvue'\r\nimport Bar from '../../../../components/Bar.uvue'\r\nexport default {\r\n components: {\r\n Foo,\r\n Bar\r\n },\r\n data() {\r\n return {\r\n currentComponentStr: 'Foo',\r\n currentComponentInstance: Foo\r\n }\r\n },\r\n methods: {\r\n changeCurrentComponent() {\r\n if (this.currentComponentStr === 'Foo') {\r\n this.currentComponentStr = 'Bar'\r\n this.currentComponentInstance = Bar\r\n } else {\r\n this.currentComponentStr = 'Foo'\r\n this.currentComponentInstance = Foo\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\n</style>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/component/component-composition"
},
"special-elements_component_component-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/component/component-options.uvue",
"code": "```vue\n<template>\r\n <view class=\"container\">\r\n <component :is=\"currentComponentStr\" />\r\n <component :is=\"currentComponentInstance\" />\r\n <button @click=\"changeCurrentComponent\">change current component</button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from '../../../../components/Foo.uvue'\r\nimport Bar from '../../../../components/Bar.uvue'\r\nexport default {\r\n components: {\r\n Foo,\r\n Bar\r\n },\r\n data() {\r\n return {\r\n currentComponentStr: 'Foo',\r\n currentComponentInstance: Foo\r\n }\r\n },\r\n methods: {\r\n changeCurrentComponent() {\r\n if (this.currentComponentStr === 'Foo') {\r\n this.currentComponentStr = 'Bar'\r\n this.currentComponentInstance = Bar\r\n } else {\r\n this.currentComponentStr = 'Foo'\r\n this.currentComponentInstance = Foo\r\n }\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\n</style>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/component/component-options"
},
"special-elements_slots_child-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/child-composition.uvue",
"code": "```vue\n<template>\r\n <view class=\"container\">\r\n <view>\r\n <slot name=\"header\" msg=\"Here might be a page title\"></slot>\r\n </view>\r\n <view>\r\n <slot msg=\"A paragraph for the main content.\"></slot>\r\n </view>\r\n <view>\r\n <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ndefineOptions({\r\n name: 'child'\r\n})\r\n\r\ndefineSlots<{\r\n default(props: { msg: string }): any\r\n header(props: { msg: string }): any\r\n footer(props: { msg: string }): any\r\n}>()\r\n</script>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/child-composition"
},
"special-elements_slots_child-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/child-options.uvue",
"code": "```vue\n<template>\r\n <view class=\"container\">\r\n <view>\r\n <slot name=\"header\" msg=\"Here might be a page title\"></slot>\r\n </view>\r\n <view>\r\n <slot msg=\"A paragraph for the main content.\"></slot>\r\n </view>\r\n <view>\r\n <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport { SlotsType } from 'vue'\r\nexport default {\r\n name: 'child',\r\n slots: Object as SlotsType<{\r\n header: { msg: string }\r\n default: { msg: string }\r\n footer: { msg: string }\r\n }>\r\n}\r\n</script>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/child-options"
},
"special-elements_slots_slots-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/slots-composition.uvue",
"code": "```vue\n<template>\r\n <view class=\"content\">\r\n <child>\r\n <template v-slot:header=\"slotProps\">\r\n <view class=\"header\">{{ slotProps.msg }}</view>\r\n </template>\r\n <template v-slot:default=\"{ msg }\">\r\n <view class=\"main\">{{ msg }}</view>\r\n </template>\r\n <template #footer=\"{ msg: text }\">\r\n <view class=\"footer\">{{ text }}</view>\r\n </template>\r\n </child>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport child from './child-composition.uvue'\r\n</script>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/slots-composition"
},
"special-elements_slots_slots-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/slots-options.uvue",
"code": "```vue\n<template>\r\n <view class=\"content\">\r\n <child>\r\n <template v-slot:header=\"slotProps\">\r\n <view class=\"header\">{{ slotProps.msg }}</view>\r\n </template>\r\n <template v-slot:default=\"{ msg }\">\r\n <view class=\"main\">{{ msg }}</view>\r\n </template>\r\n <template #footer=\"{ msg: text }\">\r\n <view class=\"footer\">{{ text }}</view>\r\n </template>\r\n </child>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport child from './child-options.uvue'\r\nexport default {\r\n components: { child }\r\n}\r\n</script>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/slots-options"
},
"special-elements_template_template-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-composition.uvue",
"code": "```vue\n<template>\r\n <view class=\"page\">\r\n <template v-if=\"dataInfo.isShow\">\r\n <view class=\"title\">{{ title }}</view>\r\n </template>\r\n <view class=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>\r\n <template v-for=\"(item, index) in list\" :key=\"index\">\r\n <view class=\"item\">{{ index + 1 }}.{{ item.name }}</view>\r\n </template>\r\n <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype DataInfo = {\r\n isShow: boolean\r\n}\r\ntype ListItem = {\r\n name: string\r\n}\r\n\r\nconst dataInfo = reactive({\r\n isShow: false\r\n} as DataInfo)\r\n\r\nconst title = ref<string>('hello')\r\nconst list = ref<ListItem[]>([\r\n {\r\n name: 'foo1'\r\n },\r\n {\r\n name: 'foo2'\r\n }\r\n] as ListItem[])\r\n\r\nconst handleShow = () => {\r\n dataInfo.isShow = !dataInfo.isShow\r\n}\r\n\r\nconst goMapStyle = () => {\r\n uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-composition' })\r\n}\r\n\r\ndefineExpose({\r\n dataInfo,\r\n goMapStyle\r\n})\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\n</style>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-composition"
},
"component_template_template-map-style-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/template/template-map-style-composition.uvue",
"special-elements_template_template-map-style-composition": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-map-style-composition.uvue",
"code": "```vue\n<template>\r\n <view class=\"page\">\r\n <view :style=\"[styleW200, styleRounded, styleBorder]\" :class=\"[classPadding10, classBgRed]\">\r\n <text>width:200px;</text>\r\n <text>padding:10px;</text>\r\n <text>border-radius:8px;</text>\r\n <text>border:1px solid #ccc;</text>\r\n <text>background-color: red;</text>\r\n <text class=\"text-white\">this text color: #fff;</text>\r\n </view>\r\n <view :style=\"[stylePadding10, styleBgGreen, styleMargin10]\" :class=\"[classH200, classRounded, classBorder, classBorderRed]\">\r\n <text>height:200px;</text>\r\n <text>margin:10px;</text>\r\n <text>padding:10px;</text>\r\n <text>border-radius:8px;</text>\r\n <text>border:1px solid #ccc;</text>\r\n <text>border-color:red;</text>\r\n <text>background-color: green;</text>\r\n <text class=\"text-blue\">this text color: blue;</text>\r\n </view>\r\n <view :style=\"styleBgBlue\" :class=\"classPadding10\">\r\n <text>padding:10px;</text>\r\n <text>background-color: blue;</text>\r\n <text class=\"text-red\">this text color: red;</text>\r\n </view>\r\n <button class=\"mt-10\" id=\"btn\" @click=\"toggleIsClassValid\">toggle isClassValid</button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst styleW200 = ref(new Map<string, string>([['width', '200px']]))\r\nconst styleH200 = ref(new Map<string, string>([['height', '200px']]))\r\nconst stylePadding10 = ref(new Map<string, string>([['padding', '10px']]))\r\nconst styleMargin10 = ref(new Map<string, string>([['margin', '10px']]))\r\nconst styleRounded = ref(new Map<string, string>([['border-radius', '8px']]))\r\nconst styleBorder = ref(new Map<string, string>([['border', '1px solid #ccc']]))\r\nconst styleBorderRed = ref(new Map<string, string>([['border-color', 'red']]))\r\nconst styleBorderBlue = ref(new Map<string, string>([['border-color', 'blue']]))\r\nconst styleBorderGreen = ref(new Map<string, string>([['border-color', 'green']]))\r\nconst styleBgGreen = ref(new Map<string, string>([['background-color', 'green']]))\r\nconst styleBgBlue = ref(new Map<string, string>([['background-color', 'blue']]))\r\nconst styleBgRed = ref(new Map<string, string>([['background-color', 'red']]))\r\nconst styleTextWhite = ref(new Map<string, string>([['color', '#fff']]))\r\nconst styleTextBlack = ref(new Map<string, string>([['color', '#000']]))\r\nconst styleTextRed = ref(new Map<string, string>([['color', 'red']]))\r\nconst styleTextBlue = ref(new Map<string, string>([['color', 'blue']]))\r\nconst styleTextGreen = ref(new Map<string, string>([['color', 'green']]))\r\nconst isClassValid = ref(true)\r\nconst classW200 = ref(new Map<string, boolean>([['w-200', true]]))\r\nconst classH200 = ref(new Map<string, boolean>([['h-200', true]]))\r\nconst classPadding10 = ref(new Map<string, boolean>([['padding-10', true]]))\r\nconst classMargin10 = ref(new Map<string, boolean>([['margin-10', true]]))\r\nconst classRounded = ref(new Map<string, boolean>([['rounded', true]]))\r\nconst classBorder = ref(new Map<string, boolean>([['border', true]]))\r\nconst classBorderRed = ref(new Map<string, boolean>([['border-red', true]]))\r\nconst classBorderBlue = ref(new Map<string, boolean>([['border-blue', true]]))\r\nconst classBorderGreen = ref(new Map<string, boolean>([['border-green', true]]))\r\nconst classBgGreen = ref(new Map<string, boolean>([['bg-green', true]]))\r\nconst classBgBlue = ref(new Map<string, boolean>([['bg-blue', true]]))\r\nconst classBgRed = ref(new Map<string, boolean>([['bg-red', true]]))\r\nconst classTextWhite = ref(new Map<string, boolean>([['text-white', true]]))\r\nconst classTextBlack = ref(new Map<string, boolean>([['text-black', true]]))\r\nconst classTextRed = ref(new Map<string, boolean>([['text-red', true]]))\r\nconst classTextBlue = ref(new Map<string, boolean>([['text-blue', true]]))\r\nconst classTextGreen = ref(new Map<string, boolean>([['text-green', true]]))\r\nconst toggleIsClassValid = () => {\r\n isClassValid.value = !isClassValid.value\r\n classW200.value = new Map<string, boolean>([['w-200', isClassValid.value]])\r\n classH200.value = new Map<string, boolean>([['h-200', isClassValid.value]])\r\n classPadding10.value = new Map<string, boolean>([['padding-10', isClassValid.value]])\r\n classMargin10.value = new Map<string, boolean>([['margin-10', isClassValid.value]])\r\n classRounded.value = new Map<string, boolean>([['rounded', isClassValid.value]])\r\n classBorder.value = new Map<string, boolean>([['border', isClassValid.value]])\r\n classBorderRed.value = new Map<string, boolean>([['border-red', isClassValid.value]])\r\n classBorderBlue.value = new Map<string, boolean>([['border-blue', isClassValid.value]])\r\n classBorderGreen.value = new Map<string, boolean>([['border-green', isClassValid.value]])\r\n classBgGreen.value = new Map<string, boolean>([['bg-green', isClassValid.value]])\r\n classBgBlue.value = new Map<string, boolean>([['bg-blue', isClassValid.value]])\r\n classBgRed.value = new Map<string, boolean>([['bg-red', isClassValid.value]])\r\n classTextWhite.value = new Map<string, boolean>([['text-white', isClassValid.value]])\r\n classTextBlack.value = new Map<string, boolean>([['text-black', isClassValid.value]])\r\n classTextRed.value = new Map<string, boolean>([['text-red', isClassValid.value]])\r\n classTextBlue.value = new Map<string, boolean>([['text-blue', isClassValid.value]])\r\n classTextGreen.value = new Map<string, boolean>([['text-green', isClassValid.value]])\r\n}\r\n</script>\r\n\r\n<style>\r\n.w-200 {\r\n width: 200px;\r\n}\r\n\r\n.h-200 {\r\n height: 200px;\r\n}\r\n\r\n.padding-10 {\r\n padding: 10px;\r\n}\r\n\r\n.margin-10 {\r\n margin: 10px;\r\n}\r\n\r\n.rounded {\r\n border-radius: 8px;\r\n}\r\n\r\n.border {\r\n border: 1px solid #ccc;\r\n}\r\n\r\n.border-red {\r\n border-color: red;\r\n}\r\n\r\n.border-green {\r\n border-color: green;\r\n}\r\n\r\n.border-blue {\r\n border-color: blue;\r\n}\r\n\r\n.bg-green {\r\n background-color: green;\r\n}\r\n\r\n.bg-red {\r\n background-color: red;\r\n}\r\n\r\n.bg-blue {\r\n background-color: blue;\r\n}\r\n\r\n.text-white {\r\n color: #fff;\r\n}\r\n\r\n.text-black {\r\n color: #000;\r\n}\r\n\r\n.text-green {\r\n color: green;\r\n}\r\n\r\n.text-red {\r\n color: red;\r\n}\r\n\r\n.text-blue {\r\n color: blue;\r\n}\r\n</style>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/template/template-map-style-composition"
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-map-style-composition"
},
"component_template_template-map-style-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/template/template-map-style-options.uvue",
"special-elements_template_template-map-style-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-map-style-options.uvue",
"code": "```vue\n<template>\r\n <view class=\"page\">\r\n <view :style=\"[styleW200, styleRounded, styleBorder]\" :class=\"[classPadding10, classBgRed]\">\r\n <text>width:200px;</text>\r\n <text>padding:10px;</text>\r\n <text>border-radius:8px;</text>\r\n <text>border:1px solid #ccc;</text>\r\n <text>background-color: red;</text>\r\n <text class=\"text-white\">this text color: #fff;</text>\r\n </view>\r\n <view :style=\"[stylePadding10, styleBgGreen, styleMargin10]\" :class=\"[classH200, classRounded, classBorder, classBorderRed]\">\r\n <text>height:200px;</text>\r\n <text>margin:10px;</text>\r\n <text>padding:10px;</text>\r\n <text>border-radius:8px;</text>\r\n <text>border:1px solid #ccc;</text>\r\n <text>border-color:red;</text>\r\n <text>background-color: green;</text>\r\n <text class=\"text-blue\">this text color: blue;</text>\r\n </view>\r\n <view :style=\"styleBgBlue\" :class=\"classPadding10\">\r\n <text>padding:10px;</text>\r\n <text>background-color: blue;</text>\r\n <text class=\"text-red\">this text color: red;</text>\r\n </view>\r\n <button class=\"mt-10\" id=\"btn\" @click=\"toggleIsClassValid\">toggle isClassValid</button>\r\n </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n data() {\r\n return {\r\n styleW200: new Map<string, string>([['width', '200px']]),\r\n styleH200: new Map<string, string>([['height', '200px']]),\r\n stylePadding10: new Map<string, string>([['padding', '10px']]),\r\n styleMargin10: new Map<string, string>([['margin', '10px']]),\r\n styleRounded: new Map<string, string>([['border-radius', '8px']]),\r\n styleBorder: new Map<string, string>([['border', '1px solid #ccc']]),\r\n styleBorderRed: new Map<string, string>([['border-color', 'red']]),\r\n styleBorderBlue: new Map<string, string>([['border-color', 'blue']]),\r\n styleBorderGreen: new Map<string, string>([['border-color', 'green']]),\r\n styleBgGreen: new Map<string, string>([['background-color', 'green']]),\r\n styleBgBlue: new Map<string, string>([['background-color', 'blue']]),\r\n styleBgRed: new Map<string, string>([['background-color', 'red']]),\r\n styleTextWhite: new Map<string, string>([['color', '#fff']]),\r\n styleTextBlack: new Map<string, string>([['color', '#000']]),\r\n styleTextRed: new Map<string, string>([['color', 'red']]),\r\n styleTextBlue: new Map<string, string>([['color', 'blue']]),\r\n styleTextGreen: new Map<string, string>([['color', 'green']]),\r\n isClassValid: true,\r\n classW200: new Map<string, boolean>([['w-200', true]]),\r\n classH200: new Map<string, boolean>([['h-200', true]]),\r\n classPadding10: new Map<string, boolean>([['padding-10', true]]),\r\n classMargin10: new Map<string, boolean>([['margin-10', true]]),\r\n classRounded: new Map<string, boolean>([['rounded', true]]),\r\n classBorder: new Map<string, boolean>([['border', true]]),\r\n classBorderRed: new Map<string, boolean>([['border-red', true]]),\r\n classBorderBlue: new Map<string, boolean>([['border-blue', true]]),\r\n classBorderGreen: new Map<string, boolean>([['border-green', true]]),\r\n classBgGreen: new Map<string, boolean>([['bg-green', true]]),\r\n classBgBlue: new Map<string, boolean>([['bg-blue', true]]),\r\n classBgRed: new Map<string, boolean>([['bg-red', true]]),\r\n classTextWhite: new Map<string, boolean>([['text-white', true]]),\r\n classTextBlack: new Map<string, boolean>([['text-black', true]]),\r\n classTextRed: new Map<string, boolean>([['text-red', true]]),\r\n classTextBlue: new Map<string, boolean>([['text-blue', true]]),\r\n classTextGreen: new Map<string, boolean>([['text-green', true]])\r\n }\r\n },\r\n methods: {\r\n toggleIsClassValid() {\r\n this.isClassValid = !this.isClassValid\r\n this.classW200 = new Map<string, boolean>([['w-200', this.isClassValid]])\r\n this.classH200 = new Map<string, boolean>([['h-200', this.isClassValid]])\r\n this.classPadding10 = new Map<string, boolean>([['padding-10', this.isClassValid]])\r\n this.classMargin10 = new Map<string, boolean>([['margin-10', this.isClassValid]])\r\n this.classRounded = new Map<string, boolean>([['rounded', this.isClassValid]])\r\n this.classBorder = new Map<string, boolean>([['border', this.isClassValid]])\r\n this.classBorderRed = new Map<string, boolean>([['border-red', this.isClassValid]])\r\n this.classBorderBlue = new Map<string, boolean>([['border-blue', this.isClassValid]])\r\n this.classBorderGreen = new Map<string, boolean>([['border-green', this.isClassValid]])\r\n this.classBgGreen = new Map<string, boolean>([['bg-green', this.isClassValid]])\r\n this.classBgBlue = new Map<string, boolean>([['bg-blue', this.isClassValid]])\r\n this.classBgRed = new Map<string, boolean>([['bg-red', this.isClassValid]])\r\n this.classTextWhite = new Map<string, boolean>([['text-white', this.isClassValid]])\r\n this.classTextBlack = new Map<string, boolean>([['text-black', this.isClassValid]])\r\n this.classTextRed = new Map<string, boolean>([['text-red', this.isClassValid]])\r\n this.classTextBlue = new Map<string, boolean>([['text-blue', this.isClassValid]])\r\n this.classTextGreen = new Map<string, boolean>([['text-green', this.isClassValid]])\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.w-200 {\r\n width: 200px;\r\n}\r\n\r\n.h-200 {\r\n height: 200px;\r\n}\r\n\r\n.padding-10 {\r\n padding: 10px;\r\n}\r\n\r\n.margin-10 {\r\n margin: 10px;\r\n}\r\n\r\n.rounded {\r\n border-radius: 8px;\r\n}\r\n\r\n.border {\r\n border: 1px solid #ccc;\r\n}\r\n\r\n.border-red {\r\n border-color: red;\r\n}\r\n\r\n.border-green {\r\n border-color: green;\r\n}\r\n\r\n.border-blue {\r\n border-color: blue;\r\n}\r\n\r\n.bg-green {\r\n background-color: green;\r\n}\r\n\r\n.bg-red {\r\n background-color: red;\r\n}\r\n\r\n.bg-blue {\r\n background-color: blue;\r\n}\r\n\r\n.text-white {\r\n color: #fff;\r\n}\r\n\r\n.text-black {\r\n color: #000;\r\n}\r\n\r\n.text-green {\r\n color: green;\r\n}\r\n\r\n.text-red {\r\n color: red;\r\n}\r\n\r\n.text-blue {\r\n color: blue;\r\n}\r\n</style>\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/template/template-map-style-options"
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-map-style-options"
},
"component_template_template-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/template/template-options.uvue",
"code": "```vue\n<template>\r\n <view class=\"page\">\r\n <template v-if=\"isShow\">\r\n <view class=\"title\">{{ title }}</view>\r\n </template>\r\n <view class=\"show-botton\" @click=\"handleShow\">{{ isShow ? '点击隐藏' : '点击显示' }}</view>\r\n <template v-for=\"(item, index) in list\" :key=\"index\">\r\n <view class=\"item\">{{ index + 1 }}.{{ item.name }}</view>\r\n </template>\r\n <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\r\n </view>\r\n</template>\r\n\r\n<script>\r\ntype objType = {\r\n name : string\r\n}\r\nexport default {\r\n data() {\r\n return {\r\n title: \"hello\",\r\n isShow: false,\r\n list: [{\r\n name: 'foo1'\r\n },\r\n {\r\n name: 'foo2'\r\n }\r\n ] as objType[]\r\n }\r\n },\r\n methods: {\r\n handleShow() {\r\n this.isShow = !this.isShow\r\n },\r\n goMapStyle() {\r\n uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-options' })\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\n</style>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/template/template-options"
"special-elements_template_template-options": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-options.uvue",
"code": "```vue\n<template>\r\n <view class=\"page\">\r\n <template v-if=\"dataInfo.isShow\">\r\n <view class=\"title\">{{ title }}</view>\r\n </template>\r\n <view class=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>\r\n <template v-for=\"(item, index) in list\" :key=\"index\">\r\n <view class=\"item\">{{ index + 1 }}.{{ item.name }}</view>\r\n </template>\r\n <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\r\n </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\ntype DataInfo = {\r\n isShow: boolean\r\n}\r\ntype objType = {\r\n name : string\r\n}\r\nexport default {\r\n data() {\r\n return {\r\n title: \"hello\",\r\n dataInfo: {\r\n isShow: false,\r\n } as DataInfo,\r\n list: [{\r\n name: 'foo1'\r\n },\r\n {\r\n name: 'foo2'\r\n }\r\n ] as objType[]\r\n }\r\n },\r\n methods: {\r\n handleShow() {\r\n this.dataInfo.isShow = !this.dataInfo.isShow\r\n },\r\n goMapStyle() {\r\n uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-options' })\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n display: flex;\r\n flex-direction: row;\r\n margin: 15px;\r\n border: #eee solid 1px;\r\n}\r\n</style>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-options"
}
},
"E_reactivity": {
......@@ -1115,7 +1115,7 @@
},
"utilities_to-value_to-value": {
"gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/to-value/to-value.uvue",
"code": "```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>ref count:</text>\r\n <text id=\"ref-count\">{{ refCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isRef ref count:</text>\r\n <text id=\"is-ref-ref-count\">{{ isRefRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isRef count:</text>\r\n <text id=\"is-ref-count\">{{ isRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.num:</text>\r\n <text id=\"obj-num\">{{ obj.num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>toValue(() => obj.num):</text>\r\n <text id=\"to-value-obj-num\">{{ toValueObjNum }}</text>\r\n </view>\r\n <button class=\"mt-10\" id=\"increment-btn\" @click=\"increment\">\r\n increment obj.num\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst refCount = ref<number>(0);;\r\nconst isRefRefCount = isRef(refCount);\r\nconst count = toValue(refCount);\r\nconst isRefCount = isRef(count);\r\n\r\ntype Obj = {\r\n num : number\r\n}\r\nconst obj = reactive({\r\n num: 0\r\n} as Obj)\r\n\r\nlet toValueObjNum = toValue(() : number => obj.num)\r\n\r\nconst increment = () => {\r\n obj.num++;\r\n toValueObjNum++;\r\n}\r\n</script>\r\n\n```",
"code": "```vue\n<template>\r\n <view class=\"page\">\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>ref count:</text>\r\n <text id=\"ref-count\">{{ refCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isRef ref count:</text>\r\n <text id=\"is-ref-ref-count\">{{ isRefRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>count:</text>\r\n <text id=\"count\">{{ count }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>isRef count:</text>\r\n <text id=\"is-ref-count\">{{ isRefCount }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>obj.num:</text>\r\n <text id=\"obj-num\">{{ obj.num }}</text>\r\n </view>\r\n <view class=\"flex justify-between flex-row mb-10\">\r\n <text>toValue(() => obj.num):</text>\r\n <text id=\"to-value-obj-num\">{{ toValueObjNum }}</text>\r\n </view>\r\n <button class=\"mt-10\" id=\"increment-btn\" @click=\"increment\">\r\n increment obj.num\r\n </button>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst refCount = ref<number>(0);;\r\nconst isRefRefCount = isRef(refCount);\r\nconst count = toValue(refCount);\r\nconst isRefCount = isRef(count);\r\n\r\ntype Obj = {\r\n num : number\r\n}\r\nconst obj = reactive({\r\n num: 0\r\n} as Obj)\r\n\r\nlet toValueObjNum = toValue(() : number => 0)\r\n\r\nconst increment = () => {\r\n obj.num++;\r\n toValueObjNum++;\r\n}\r\n</script>\r\n\n```",
"webUrl": "https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/to-value/to-value"
},
"utilities_un-ref_un-ref": {
......
docs/vue/component.md
浏览文件 @ 78226013
......@@ -463,17 +463,17 @@ Uni`组件名(驼峰)`Element
## 作用域插槽的类型 @scoped-slot-type
示例 [详情](<!-- VUEJSON.E_built-in.component_slots_child-options.gitUrl -->)
示例 [详情](<!-- VUEJSON.E_built-in.special-elements_slots_child-options.gitUrl -->)
作用域插槽需在组件中指定插槽数据类型
::: preview <!-- VUEJSON.E_built-in.component_slots_child-options.webUrl -->
::: preview <!-- VUEJSON.E_built-in.special-elements_slots_child-options.webUrl -->
> 选项式 API
<!-- VUEJSON.E_built-in.component_slots_child-options.code -->
<!-- VUEJSON.E_built-in.special-elements_slots_child-options.code -->
> 组合式 API
<!-- VUEJSON.E_built-in.component_slots_child-composition.code -->
<!-- VUEJSON.E_built-in.special-elements_slots_child-composition.code -->
:::
......
docs/vue/data-bind.md
浏览文件 @ 78226013
......@@ -70,15 +70,15 @@
- `v-if`、`v-else-if` 或 `v-else`
- `v-for`
示例 [详情](<!-- VUEJSON.E_built-in.component_template_template-options.gitUrl -->)
示例 [详情](<!-- VUEJSON.E_built-in.special-elements_template_template-options.gitUrl -->)
::: preview <!-- VUEJSON.E_built-in.component_template_template-options.webUrl -->
::: preview <!-- VUEJSON.E_built-in.special-elements_template_template-options.webUrl -->
> 选项式 API
<!-- VUEJSON.E_built-in.component_template_template-options.code -->
<!-- VUEJSON.E_built-in.special-elements_template_template-options.code -->
> 组合式 API
<!-- VUEJSON.E_built-in.component_template_template-composition.code -->
<!-- VUEJSON.E_built-in.special-elements_template_template-composition.code -->
:::
### 在样式里绑定 @v-bind-css-data
......
docs/vue/options-api.md
浏览文件 @ 78226013
......@@ -86,10 +86,10 @@
用于声明组件的字符串模板。
示例 [详情](<!-- VUEJSON.E_built-in.component_template_template-options.gitUrl -->)
示例 [详情](<!-- VUEJSON.E_built-in.special-elements_template_template-options.gitUrl -->)
::: preview <!-- VUEJSON.E_built-in.component_template_template-options.webUrl -->
<!-- VUEJSON.E_built-in.component_template_template-options.code -->
::: preview <!-- VUEJSON.E_built-in.special-elements_template_template-options.webUrl -->
<!-- VUEJSON.E_built-in.special-elements_template_template-options.code -->
:::
#### render
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或