Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 402
Star 3
Fork 10
H
hello-uvue
提交 318c2ef8 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬
浏览文件
操作

feat(render function): mergeProps

上级 f17af7cf
隐藏空白更改
内联 并排
Showing with 1264 addition and 1107 deletion
pages.json
浏览文件 @ 318c2ef8
...@@ -716,6 +716,18 @@ ...@@ -716,6 +716,18 @@
"navigationBarTitleText": "render function" "navigationBarTitleText": "render function"
} }
}, },
{
"path": "pages/render-function/mergeProps/mergeProps-options",
"style": {
"navigationBarTitleText": "mergeProps 选项式 API"
}
},
{
"path": "pages/render-function/mergeProps/mergeProps-composition",
"style": {
"navigationBarTitleText": "mergeProps 组合式 API"
}
},
{ {
"path": "pages/examples/unrecognized-component/unrecognized-component", "path": "pages/examples/unrecognized-component/unrecognized-component",
"style": { "style": {
......
pages/index/index.uvue
浏览文件 @ 318c2ef8
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view> <view>
<uni-collapse> <uni-collapse>
<uni-collapse-item <uni-collapse-item
v-for="menu in menus" v-for="menu in menus"
:key="menu.id" :key="menu.id"
:title="menu.name" :title="menu.name"
class="menu"> class="menu">
<view v-for="(page, index) in menu.pages" :key="page.name"> <view v-for="(page, index) in menu.pages" :key="page.name">
<view <view
v-if="page.url" v-if="page.url"
class="page-item" class="page-item"
:class="{ 'first-child': index == 0 }" :class="{ 'first-child': index == 0 }"
@click="goDetailPage(menu.id, page)"> @click="goDetailPage(menu.id, page)">
<text <text
:class="{ 'text-disabled': page.enable == false }" :class="{ 'text-disabled': page.enable == false }"
class="text" class="text"
>{{ page.name }}</text >{{ page.name }}</text
> >
</view> </view>
<template v-if="page.children"> <template v-if="page.children">
<uni-collapse style="flex: 1"> <uni-collapse style="flex: 1">
<uni-collapse-item :title="page.name" class="menu"> <uni-collapse-item :title="page.name" class="menu">
<view <view
v-for="(child, index) in page.children" v-for="(child, index) in page.children"
:key="`${child.id}-${index}`"> :key="`${child.id}-${index}`">
<view <view
v-if="child.url" v-if="child.url"
class="page-item" class="page-item"
:class="{ 'first-child': index == 0 }" :class="{ 'first-child': index == 0 }"
@click="goDetailPage(`${menu.id}/${page.id}`, child)"> @click="goDetailPage(`${menu.id}/${page.id}`, child)">
<text <text
:class="{ 'text-disabled': child.enable == false }" :class="{ 'text-disabled': child.enable == false }"
class="text" class="text"
>{{ child.name }}</text >{{ child.name }}</text
> >
</view> </view>
<template v-else> <template v-else>
<uni-collapse style="flex: 1"> <uni-collapse style="flex: 1">
<uni-collapse-item :title="child.name" class="menu"> <uni-collapse-item :title="child.name" class="menu">
<view <view
v-for="(childChild, index) in child.children" v-for="(childChild, index) in child.children"
:key="`${childChild.id}-${index}`"> :key="`${childChild.id}-${index}`">
<view <view
class="page-item" class="page-item"
:class="{ 'first-child': index == 0 }" :class="{ 'first-child': index == 0 }"
@click=" @click="
goDetailPage( goDetailPage(
`${menu.id}/${page.id}/${child.id}`, `${menu.id}/${page.id}/${child.id}`,
childChild childChild
) )
"> ">
<text <text
:class="{ :class="{
'text-disabled': childChild.enable == false, 'text-disabled': childChild.enable == false,
}" }"
class="text" class="text"
>{{ childChild.name }}</text >{{ childChild.name }}</text
> >
</view> </view>
</view> </view>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse> </uni-collapse>
</template> </template>
</view> </view>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse> </uni-collapse>
</template> </template>
</view> </view>
</uni-collapse-item> </uni-collapse-item>
</uni-collapse> </uni-collapse>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script lang="uts"> <script lang="uts">
import { setLifeCycleNum, state } from '@/store/index.uts' import { setLifeCycleNum, state } from '@/store/index.uts'
type Page = { type Page = {
id: string id : string
name: string name : string
enable?: boolean enable ?: boolean
url?: string url ?: string
children?: Page[] children ?: Page[]
} }
type Menu = { type Menu = {
id: string id : string
name: string name : string
pages: Page[] pages : Page[]
url?: string url ?: string
enable?: boolean enable ?: boolean
} }
export default { export default {
data() { data() {
return { return {
menus: [ menus: [
{ {
id: 'app-instance', id: 'app-instance',
name: 'App 实例', name: 'App 实例',
pages: [ pages: [
{ {
id: 'component', id: 'component',
name: 'component', name: 'component',
url: 'component/component' url: 'component/component'
}, },
{ {
id: 'globalProperties', id: 'globalProperties',
name: 'globalProperties', name: 'globalProperties',
children: [ children: [
{ {
id: 'globalProperties-options', id: 'globalProperties-options',
name: 'globalProperties 选项式 API', name: 'globalProperties 选项式 API',
url: 'globalProperties-options' url: 'globalProperties-options'
}, },
{ {
id: 'globalProperties-composition', id: 'globalProperties-composition',
name: 'globalProperties 组合式 API', name: 'globalProperties 组合式 API',
url: 'globalProperties-composition' url: 'globalProperties-composition'
} }
] ]
}, },
{ {
id: 'use', id: 'use',
name: 'use', name: 'use',
children: [ children: [
{ {
id: 'use-options', id: 'use-options',
name: 'use 选项式 API', name: 'use 选项式 API',
url: 'use-composition' url: 'use-composition'
}, },
{ {
id: 'use-composition', id: 'use-composition',
name: 'use 组合式 API', name: 'use 组合式 API',
url: 'use-composition' url: 'use-composition'
} }
] ]
} }
] as Page[] ] as Page[]
}, },
{ {
id: 'component-instance', id: 'component-instance',
name: '组件实例', name: '组件实例',
pages: [ pages: [
{ {
id: 'attrs', id: 'attrs',
name: 'attrs', name: 'attrs',
children: [ children: [
{ {
id: 'attrs-options', id: 'attrs-options',
name: 'attrs 选项式 API', name: 'attrs 选项式 API',
url: 'attrs-options' url: 'attrs-options'
}, },
{ {
id: 'attrs-composition', id: 'attrs-composition',
name: 'attrs 组合式 API', name: 'attrs 组合式 API',
url: 'attrs-composition' url: 'attrs-composition'
} }
] ]
}, },
{ {
id: 'data', id: 'data',
name: 'data', name: 'data',
children: [ children: [
{ {
id: 'data-options', id: 'data-options',
name: 'data 选项式 API', name: 'data 选项式 API',
url: 'data-options' url: 'data-options'
}, },
{ {
id: 'data-composition', id: 'data-composition',
name: 'data 组合式 API', name: 'data 组合式 API',
url: 'data-composition' url: 'data-composition'
} }
] ]
}, },
{ {
id: 'props', id: 'props',
name: 'props', name: 'props',
children: [ children: [
{ {
id: 'props-options', id: 'props-options',
name: 'props 选项式 API', name: 'props 选项式 API',
url: 'props-options' url: 'props-options'
}, },
{ {
id: 'props-composition', id: 'props-composition',
name: 'props 组合式 API', name: 'props 组合式 API',
url: 'props-composition' url: 'props-composition'
} }
] ]
}, },
{ {
id: 'el', id: 'el',
name: '$el', name: '$el',
children: [ children: [
{ {
id: 'el-options', id: 'el-options',
name: '$el 选项式 API', name: '$el 选项式 API',
url: 'el-options' url: 'el-options'
}, },
{ {
id: 'el-composition', id: 'el-composition',
name: '$el 组合式 API', name: '$el 组合式 API',
url: 'el-composition' url: 'el-composition'
} }
] ]
}, },
{ {
id: 'options', id: 'options',
name: '$options', name: '$options',
children: [ children: [
{ {
id: 'options-options', id: 'options-options',
name: '$options 选项式 API', name: '$options 选项式 API',
url: 'options-options' url: 'options-options'
}, },
{ {
id: 'options-composition', id: 'options-composition',
name: '$options 组合式 API', name: '$options 组合式 API',
url: 'options-composition' url: 'options-composition'
} }
] ]
}, },
{ {
id: 'parent', id: 'parent',
name: '$parent', name: '$parent',
children: [ children: [
{ {
id: 'parent-options', id: 'parent-options',
name: '$parent 选项式 API', name: '$parent 选项式 API',
url: 'parent-options' url: 'parent-options'
}, },
{ {
id: 'parent-composition', id: 'parent-composition',
name: '$parent 组合式 API', name: '$parent 组合式 API',
url: 'parent-composition' url: 'parent-composition'
} }
] ]
}, },
// #ifdef APP // #ifdef APP
{ {
id: 'root', id: 'root',
name: '$root', name: '$root',
children: [ children: [
{ {
id: 'root-options', id: 'root-options',
name: '$root 选项式 API', name: '$root 选项式 API',
url: 'root-options' url: 'root-options'
}, },
{ {
id: 'root-composition', id: 'root-composition',
name: '$root 组合式 API', name: '$root 组合式 API',
url: 'root-composition' url: 'root-composition'
} }
] ]
}, },
// #endif // #endif
{ {
id: 'slots', id: 'slots',
name: '$slots', name: '$slots',
children: [ children: [
{ {
id: 'slots-options', id: 'slots-options',
name: '$slots 选项式 API', name: '$slots 选项式 API',
url: 'slots-options' url: 'slots-options'
}, },
{ {
id: 'slots-composition', id: 'slots-composition',
name: '$slots 组合式 API', name: '$slots 组合式 API',
url: 'slots-composition' url: 'slots-composition'
} }
] ]
}, },
{ {
id: 'refs', id: 'refs',
name: '$refs', name: '$refs',
children: [ children: [
{ {
id: 'refs-options', id: 'refs-options',
name: '$refs 选项式 API', name: '$refs 选项式 API',
url: 'refs-options' url: 'refs-options'
}, },
{ {
id: 'refs-composition', id: 'refs-composition',
name: '$refs 组合式 API', name: '$refs 组合式 API',
url: 'refs-composition' url: 'refs-composition'
} }
] ]
}, },
{ {
id: 'emit-function', id: 'emit-function',
name: '$emit', name: '$emit',
children: [ children: [
{ {
id: 'emit-options', id: 'emit-options',
name: '$emit 选项式 API', name: '$emit 选项式 API',
url: 'emit-function-options' url: 'emit-function-options'
}, },
{ {
id: 'emit-composition', id: 'emit-composition',
name: 'defineEmits 组合式 API', name: 'defineEmits 组合式 API',
url: 'emit-function-composition' url: 'emit-function-composition'
} }
] ]
}, },
{ {
id: 'force-update', id: 'force-update',
name: '$force-update', name: '$force-update',
children: [ children: [
{ {
id: 'force-update-options', id: 'force-update-options',
name: '$forceUpdate 选项式 API', name: '$forceUpdate 选项式 API',
url: 'force-update-options' url: 'force-update-options'
}, },
{ {
id: 'force-update-composition', id: 'force-update-composition',
name: '$forceUpdate 组合式 API', name: '$forceUpdate 组合式 API',
url: 'force-update-composition' url: 'force-update-composition'
} }
] ]
}, },
{ {
id: 'methods', id: 'methods',
name: '$methods', name: '$methods',
children: [ children: [
{ {
id: 'call-method-easycom-uni-modules-options', id: 'call-method-easycom-uni-modules-options',
name: '调用 uni_modules easycom 组件方法 选项式 API', name: '调用 uni_modules easycom 组件方法 选项式 API',
url: 'call-method-easycom-uni-modules-options' url: 'call-method-easycom-uni-modules-options'
}, },
{ {
id: 'call-method-easycom-uni-modules-composition', id: 'call-method-easycom-uni-modules-composition',
name: '调用 uni_modules easycom 组件方法 组合式 API', name: '调用 uni_modules easycom 组件方法 组合式 API',
url: 'call-method-easycom-uni-modules-composition' url: 'call-method-easycom-uni-modules-composition'
}, },
{ {
id: 'call-method-uni-element-options', id: 'call-method-uni-element-options',
name: '调用内置组件方法 选项式 API', name: '调用内置组件方法 选项式 API',
url: 'call-method-uni-element-options' url: 'call-method-uni-element-options'
}, },
{ {
id: 'call-method-uni-element-composition', id: 'call-method-uni-element-composition',
name: '调用内置组件方法 组合式 API', name: '调用内置组件方法 组合式 API',
url: 'call-method-uni-element-composition' url: 'call-method-uni-element-composition'
}, },
{ {
id: 'call-method-other-options', id: 'call-method-other-options',
name: '调用自定义组件方法 选项式 API', name: '调用自定义组件方法 选项式 API',
url: 'call-method-other-options' url: 'call-method-other-options'
}, },
{ {
id: 'call-method-other-composition', id: 'call-method-other-composition',
name: '调用自定义组件方法 组合式 API', name: '调用自定义组件方法 组合式 API',
url: 'call-method-other-composition' url: 'call-method-other-composition'
}, },
{ {
id: 'call-method-define-expose', id: 'call-method-define-expose',
name: '调用 defineExpose 暴露的方法', name: '调用 defineExpose 暴露的方法',
url: 'call-method-define-expose' url: 'call-method-define-expose'
} }
] ]
}, },
{ {
id: 'provide', id: 'provide',
name: 'provide', name: 'provide',
children: [ children: [
{ {
id: 'provide-options-1', id: 'provide-options-1',
name: 'provide 选项式 API 字面量方式', name: 'provide 选项式 API 字面量方式',
url: 'provide-options-1' url: 'provide-options-1'
}, },
{ {
id: 'provide-options-2', id: 'provide-options-2',
name: 'provide 选项式 API 函数方式', name: 'provide 选项式 API 函数方式',
url: 'provide-options-2' url: 'provide-options-2'
}, },
{ {
id: 'provide-composition', id: 'provide-composition',
name: 'provide 组合式 API', name: 'provide 组合式 API',
url: 'provide-composition' url: 'provide-composition'
}, },
] ]
}, },
{ {
id: 'nextTick', id: 'nextTick',
name: 'nextTick', name: 'nextTick',
children: [ children: [
{ {
id: 'nextTick-options', id: 'nextTick-options',
name: 'nextTick 选项式 API', name: 'nextTick 选项式 API',
url: 'nextTick-options' url: 'nextTick-options'
}, },
{ {
id: 'nextTick-composition', id: 'nextTick-composition',
name: 'nextTick 组合式 API', name: 'nextTick 组合式 API',
url: 'nextTick-composition' url: 'nextTick-composition'
}, },
] ]
}, },
{ {
id: 'setup-function', id: 'setup-function',
name: 'setup()', name: 'setup()',
url: 'setup-function/setup-function' url: 'setup-function/setup-function'
}, },
{ {
id: 'define-expose', id: 'define-expose',
name: 'defineExpose', name: 'defineExpose',
url: 'define-expose/define-expose' url: 'define-expose/define-expose'
}, },
{ {
id: 'circular-reference', id: 'circular-reference',
name: 'circular reference', name: 'circular reference',
children: [ children: [
{ {
id: 'circular-reference-options', id: 'circular-reference-options',
name: '循环引用 选项式 API', name: '循环引用 选项式 API',
url: 'circular-reference-options' url: 'circular-reference-options'
}, },
{ {
id: 'circular-reference-composition', id: 'circular-reference-composition',
name: '循环引用 组合式 API', name: '循环引用 组合式 API',
url: 'circular-reference-composition' url: 'circular-reference-composition'
}, },
] ]
}, },
{ {
id: 'mixins', id: 'mixins',
name: 'mixins', name: 'mixins',
children: [ children: [
// #ifdef APP // #ifdef APP
{ {
id: 'mixins-app', id: 'mixins-app',
name: 'mixins', name: 'mixins',
url: 'mixins-app' url: 'mixins-app'
}, },
{ {
id: 'mixins-app-page-namesake', id: 'mixins-app-page-namesake',
name: 'mixins page namesake', name: 'mixins page namesake',
url: 'mixins-app-page-namesake' url: 'mixins-app-page-namesake'
}, },
// #endif // #endif
// #ifdef WEB // #ifdef WEB
{ {
id: 'mixins-web', id: 'mixins-web',
name: 'mixins', name: 'mixins',
url: 'mixins-web' url: 'mixins-web'
}, },
// #endif // #endif
] ]
} }
] as Page[] ] as Page[]
}, },
{ {
id: 'reactivity', id: 'reactivity',
name: '响应式', name: '响应式',
pages: [ pages: [
{ {
id: 'core', id: 'core',
name: '核心', name: '核心',
children: [ children: [
{ {
id: 'ref', id: 'ref',
name: 'ref', name: 'ref',
url: 'ref/ref' url: 'ref/ref'
}, },
{ {
id: 'computed', id: 'computed',
name: 'computed', name: 'computed',
children: [ children: [
{ {
id: 'computed-options', id: 'computed-options',
name: 'computed 选项式 API', name: 'computed 选项式 API',
url: 'computed-options' url: 'computed-options'
}, },
{ {
id: 'computed-composition', id: 'computed-composition',
name: 'computed 组合式 API', name: 'computed 组合式 API',
url: 'computed-composition' url: 'computed-composition'
}, },
] ]
}, },
{ {
id: 'reactive', id: 'reactive',
name: 'reactive', name: 'reactive',
url: 'reactive/reactive' url: 'reactive/reactive'
}, },
{ {
id: 'readonly', id: 'readonly',
name: 'readonly', name: 'readonly',
url: 'readonly/readonly' url: 'readonly/readonly'
}, },
{ {
id: 'watch', id: 'watch',
name: 'watch', name: 'watch',
children: [ children: [
{ {
id: 'watch-options', id: 'watch-options',
name: 'watch 选项式 API', name: 'watch 选项式 API',
url: 'watch-options' url: 'watch-options'
}, },
{ {
id: 'watch-composition', id: 'watch-composition',
name: 'watch 组合式 API', name: 'watch 组合式 API',
url: 'watch-composition' url: 'watch-composition'
}, },
] ]
}, },
{ {
id: 'watch-effect', id: 'watch-effect',
name: 'watchEffect', name: 'watchEffect',
url: 'watch-effect/watch-effect' url: 'watch-effect/watch-effect'
}, },
{ {
id: 'watch-post-effect', id: 'watch-post-effect',
name: 'watchPostEffect', name: 'watchPostEffect',
url: 'watch-post-effect/watch-post-effect' url: 'watch-post-effect/watch-post-effect'
}, },
{ {
id: 'watch-sync-effect', id: 'watch-sync-effect',
name: 'watchSyncEffect', name: 'watchSyncEffect',
url: 'watch-sync-effect/watch-sync-effect' url: 'watch-sync-effect/watch-sync-effect'
}, },
] ]
}, },
{ {
id: 'utilities', id: 'utilities',
name: '工具', name: '工具',
children: [ children: [
{ {
id: 'is-proxy', id: 'is-proxy',
name: 'isProxy', name: 'isProxy',
url: 'is-proxy/is-proxy' url: 'is-proxy/is-proxy'
}, },
{ {
id: 'is-reactive', id: 'is-reactive',
name: 'isReactive', name: 'isReactive',
url: 'is-reactive/is-reactive' url: 'is-reactive/is-reactive'
}, },
{ {
id: 'is-readonly', id: 'is-readonly',
name: 'isReadonly', name: 'isReadonly',
url: 'is-readonly/is-readonly' url: 'is-readonly/is-readonly'
}, },
{ {
id: 'is-ref', id: 'is-ref',
name: 'isRef', name: 'isRef',
url: 'is-ref/is-ref' url: 'is-ref/is-ref'
}, },
{ {
id: 'to-ref', id: 'to-ref',
name: 'toRef', name: 'toRef',
url: 'to-ref/to-ref' url: 'to-ref/to-ref'
}, },
{ {
id: 'to-refs', id: 'to-refs',
name: 'toRefs', name: 'toRefs',
url: 'to-refs/to-refs', url: 'to-refs/to-refs',
}, },
{ {
id: 'to-value', id: 'to-value',
name: 'toValue', name: 'toValue',
url: 'to-value/to-value', url: 'to-value/to-value',
}, },
{ {
id: 'un-ref', id: 'un-ref',
name: 'unRef', name: 'unRef',
url: 'un-ref/un-ref' url: 'un-ref/un-ref'
}, },
] ]
}, },
{ {
id: 'advanced', id: 'advanced',
name: '进阶', name: '进阶',
children: [ children: [
{ {
id: 'custom-ref', id: 'custom-ref',
name: 'customRef', name: 'customRef',
url: 'custom-ref/custom-ref' url: 'custom-ref/custom-ref'
}, },
{ {
id: 'effect-scope', id: 'effect-scope',
name: 'effectScope', name: 'effectScope',
url: 'effect-scope/effect-scope' url: 'effect-scope/effect-scope'
}, },
{ {
id: 'get-current-scope', id: 'get-current-scope',
name: 'getCurrentScope', name: 'getCurrentScope',
url: 'get-current-scope/get-current-scope' url: 'get-current-scope/get-current-scope'
}, },
{ {
id: 'mark-raw', id: 'mark-raw',
name: 'markRaw', name: 'markRaw',
url: 'mark-raw/mark-raw', url: 'mark-raw/mark-raw',
enable: false enable: false
}, },
{ {
id: 'on-scope-dispose', id: 'on-scope-dispose',
name: 'onScopeDispose', name: 'onScopeDispose',
url: 'on-scope-dispose/on-scope-dispose' url: 'on-scope-dispose/on-scope-dispose'
}, },
{ {
id: 'shallow-reactive', id: 'shallow-reactive',
name: 'shallowReactive', name: 'shallowReactive',
url: 'shallow-reactive/shallow-reactive' url: 'shallow-reactive/shallow-reactive'
}, },
{ {
id: 'shallow-readonly', id: 'shallow-readonly',
name: 'shallowReadonly', name: 'shallowReadonly',
url: 'shallow-readonly/shallow-readonly' url: 'shallow-readonly/shallow-readonly'
}, },
{ {
id: 'shallow-ref', id: 'shallow-ref',
name: 'shallowRef', name: 'shallowRef',
url: 'shallow-ref/shallow-ref' url: 'shallow-ref/shallow-ref'
}, },
{ {
id: 'to-raw', id: 'to-raw',
name: 'toRaw', name: 'toRaw',
url: 'to-raw/to-raw' url: 'to-raw/to-raw'
}, },
{ {
id: 'trigger-ref', id: 'trigger-ref',
name: 'triggerRef', name: 'triggerRef',
url: 'trigger-ref/trigger-ref' url: 'trigger-ref/trigger-ref'
}, },
] ]
} }
] as Page[] ] as Page[]
}, },
{ {
id: 'directive', id: 'directive',
name: '指令', name: '指令',
pages: [ pages: [
{ {
id: 'v-html', id: 'v-html',
name: 'v-html', name: 'v-html',
children: [ children: [
{ {
id: 'v-html-options', id: 'v-html-options',
name: 'v-html 选项式 API', name: 'v-html 选项式 API',
url: 'v-html-options' url: 'v-html-options'
}, },
{ {
id: 'v-html-composition', id: 'v-html-composition',
name: 'v-html 组合式 API', name: 'v-html 组合式 API',
url: 'v-html-composition' url: 'v-html-composition'
}, },
] ]
}, },
{ {
id: 'v-show', id: 'v-show',
name: 'v-show', name: 'v-show',
children: [ children: [
{ {
id: 'v-show-options', id: 'v-show-options',
name: 'v-show 选项式 API', name: 'v-show 选项式 API',
url: 'v-show-options' url: 'v-show-options'
}, },
{ {
id: 'v-show-composition', id: 'v-show-composition',
name: 'v-show 组合式 API', name: 'v-show 组合式 API',
url: 'v-show-composition' url: 'v-show-composition'
}, },
] ]
}, },
{ {
id: 'v-if', id: 'v-if',
name: 'v-if', name: 'v-if',
children: [ children: [
{ {
id: 'v-if-options', id: 'v-if-options',
name: 'v-if 选项式 API', name: 'v-if 选项式 API',
url: 'v-if-options' url: 'v-if-options'
}, },
{ {
id: 'v-if-composition', id: 'v-if-composition',
name: 'v-if 组合式 API', name: 'v-if 组合式 API',
url: 'v-if-composition' url: 'v-if-composition'
}, },
] ]
}, },
{ {
id: 'v-for', id: 'v-for',
name: 'v-for', name: 'v-for',
children: [ children: [
{ {
id: 'v-for-options', id: 'v-for-options',
name: 'v-for 选项式 API', name: 'v-for 选项式 API',
url: 'v-for-options' url: 'v-for-options'
}, },
{ {
id: 'v-for-composition', id: 'v-for-composition',
name: 'v-for 组合式 API', name: 'v-for 组合式 API',
url: 'v-for-composition' url: 'v-for-composition'
}, },
] ]
}, },
{ {
id: 'v-on', id: 'v-on',
name: 'v-on', name: 'v-on',
children: [ children: [
{ {
id: 'v-on-options', id: 'v-on-options',
name: 'v-on 选项式 API', name: 'v-on 选项式 API',
url: 'v-on-options' url: 'v-on-options'
}, },
{ {
id: 'v-on-composition', id: 'v-on-composition',
name: 'v-on 组合式 API', name: 'v-on 组合式 API',
url: 'v-on-composition' url: 'v-on-composition'
}, },
] ]
}, },
{ {
id: 'v-pre', id: 'v-pre',
name: 'v-pre', name: 'v-pre',
url: 'v-pre/v-pre' url: 'v-pre/v-pre'
}, },
{ {
id: 'v-once', id: 'v-once',
name: 'v-once', name: 'v-once',
children: [ children: [
{ {
id: 'v-once-options', id: 'v-once-options',
name: 'v-once 选项式 API', name: 'v-once 选项式 API',
url: 'v-once-options' url: 'v-once-options'
}, },
{ {
id: 'v-once-composition', id: 'v-once-composition',
name: 'v-once 组合式 API', name: 'v-once 组合式 API',
url: 'v-once-composition' url: 'v-once-composition'
}, },
] ]
}, },
{ {
id: 'v-memo', id: 'v-memo',
name: 'v-memo', name: 'v-memo',
children: [ children: [
{ {
id: 'v-memo-options', id: 'v-memo-options',
name: 'v-memo 选项式 API', name: 'v-memo 选项式 API',
url: 'v-memo-options' url: 'v-memo-options'
}, },
{ {
id: 'v-memo-composition', id: 'v-memo-composition',
name: 'v-memo 组合式 API', name: 'v-memo 组合式 API',
url: 'v-memo-composition' url: 'v-memo-composition'
}, },
] ]
}, },
{ {
id: 'v-text', id: 'v-text',
name: 'v-text', name: 'v-text',
children: [ children: [
{ {
id: 'v-text-options', id: 'v-text-options',
name: 'v-text 选项式 API', name: 'v-text 选项式 API',
url: 'v-text-options', url: 'v-text-options',
// #ifdef APP // #ifdef APP
enable: false enable: false
// #endif // #endif
}, },
{ {
id: 'v-text-composition', id: 'v-text-composition',
name: 'v-text 组合式 API', name: 'v-text 组合式 API',
url: 'v-text-composition', url: 'v-text-composition',
// #ifdef APP // #ifdef APP
enable: false enable: false
// #endif // #endif
}, },
] ]
}, },
{ {
id: 'v-bind', id: 'v-bind',
name: 'v-bind', name: 'v-bind',
children: [ children: [
{ {
id: 'v-bind-options', id: 'v-bind-options',
name: 'v-bind 选项式 API', name: 'v-bind 选项式 API',
url: 'v-bind-options', url: 'v-bind-options',
}, },
{ {
id: 'v-bind-composition', id: 'v-bind-composition',
name: 'v-bind 组合式 API', name: 'v-bind 组合式 API',
url: 'v-bind-composition', url: 'v-bind-composition',
}, },
] ]
}, },
{ {
id: 'v-model', id: 'v-model',
name: 'v-model', name: 'v-model',
children: [ children: [
{ {
id: 'v-model-options', id: 'v-model-options',
name: 'v-model', name: 'v-model',
url: 'v-model-options', url: 'v-model-options',
}, },
{ {
id: 'v-model-composition', id: 'v-model-composition',
name: 'defineModel', name: 'defineModel',
url: 'v-model-composition', url: 'v-model-composition',
}, },
] ]
}, },
{ {
id: 'v-slot', id: 'v-slot',
name: 'v-slot', name: 'v-slot',
children: [ children: [
{ {
id: 'v-model-options', id: 'v-model-options',
name: 'v-slot', name: 'v-slot',
url: 'v-slot-options', url: 'v-slot-options',
}, },
{ {
id: 'v-slot-composition', id: 'v-slot-composition',
name: 'defineSlots', name: 'defineSlots',
url: 'v-slot-composition', url: 'v-slot-composition',
}, },
] ]
}, },
] ]
}, },
{ {
id: 'lifecycle', id: 'lifecycle',
name: '生命周期', name: '生命周期',
pages: [ pages: [
{ {
id: 'page', id: 'page',
name: '页面生命周期', name: '页面生命周期',
children: [ children: [
{ {
id: 'page-options', id: 'page-options',
name: '页面生命周期 选项式 API', name: '页面生命周期 选项式 API',
url: 'page-options' url: 'page-options'
}, },
{ {
id: 'page-composition', id: 'page-composition',
name: '页面生命周期 组合式 API', name: '页面生命周期 组合式 API',
url: 'page-composition' url: 'page-composition'
} }
] ]
}, { }, {
id: 'component', id: 'component',
name: '组件生命周期', name: '组件生命周期',
children: [ children: [
{ {
id: 'component-options', id: 'component-options',
name: '组件生命周期 选项式 API', name: '组件生命周期 选项式 API',
url: 'component-options' url: 'component-options'
}, },
{ {
id: 'component-composition', id: 'component-composition',
name: '组件生命周期 组合式 API', name: '组件生命周期 组合式 API',
url: 'component-composition' url: 'component-composition'
} }
] ]
} }
] as Page[] ] as Page[]
}, },
{ {
id: 'built-in', id: 'built-in',
name: '内置', name: '内置',
pages: [ pages: [
{ {
id:'component', id: 'component',
name: '组件', name: '组件',
children: [ children: [
{ {
id: 'keep-alive', id: 'keep-alive',
name: 'keepAlive', name: 'keepAlive',
children: [ children: [
{ {
id: 'keep-alive-options', id: 'keep-alive-options',
name: 'keepAlive 选项式 API', name: 'keepAlive 选项式 API',
url: 'keep-alive-options' url: 'keep-alive-options'
}, },
{ {
id: 'keep-alive-composition', id: 'keep-alive-composition',
name: 'keepAlive 组合式 API', name: 'keepAlive 组合式 API',
url: 'keep-alive-composition' url: 'keep-alive-composition'
} }
] ]
}, },
{ {
id: 'teleport', id: 'teleport',
name: 'Teleport', name: 'Teleport',
children: [ children: [
{ {
id: 'teleport-options', id: 'teleport-options',
name: 'Teleport 选项式 API', name: 'Teleport 选项式 API',
url: 'teleport-options' url: 'teleport-options'
}, },
{ {
id: 'teleport-composition', id: 'teleport-composition',
name: 'Teleport 组合式 API', name: 'Teleport 组合式 API',
url: 'teleport-composition' url: 'teleport-composition'
} }
] ]
}, },
] ]
}, },
{ {
id:'special-elements', id: 'special-elements',
name: '特殊元素', name: '特殊元素',
children: [ children: [
{ {
id: 'component', id: 'component',
name: 'component', name: 'component',
children: [ children: [
{ {
id: 'component-options', id: 'component-options',
name: 'component 选项式 API', name: 'component 选项式 API',
url: 'component-options' url: 'component-options'
}, },
{ {
id: 'component-composition', id: 'component-composition',
name: 'component 组合式 API', name: 'component 组合式 API',
url: 'component-composition' url: 'component-composition'
} }
] ]
}, },
{ {
id: 'slots', id: 'slots',
name: 'slot', name: 'slot',
children: [ children: [
{ {
id: 'slots-options', id: 'slots-options',
name: 'slots 选项式 API', name: 'slots 选项式 API',
url: 'slots-options' url: 'slots-options'
}, },
{ {
id: 'slots-composition', id: 'slots-composition',
name: 'slots 组合式 API', name: 'slots 组合式 API',
url: 'slots-composition' url: 'slots-composition'
} }
] ]
}, },
{ {
id: 'template', id: 'template',
name: 'template', name: 'template',
children: [ children: [
{ {
id: 'template-options', id: 'template-options',
name: 'template 选项式 API', name: 'template 选项式 API',
url: 'template-options' url: 'template-options'
}, },
{ {
id: 'template-composition', id: 'template-composition',
name: 'template 组合式 API', name: 'template 组合式 API',
url: 'template-composition' url: 'template-composition'
} }
] ]
} }
] ]
}, },
] as Page[] ] as Page[]
}, },
{ {
id: 'render-function', id: 'render-function',
name: '渲染函数', name: '渲染函数',
pages: [ pages: [
{ {
id: 'render', id: 'render',
name: 'render & h()', name: 'render & h()',
url: 'render/render' url: 'render/render'
} },
] as Page[] {
}, id: 'mergeProps',
{ name: 'mergeProps',
id: 'examples', children: [
name: '示例', {
pages: [ id: 'mergeProps-options',
{ name: 'mergeProps 选项式 API',
id: 'nested-component-communication', url: 'mergeProps-options'
name: '嵌套组件通讯', },
children: [ {
{ id: 'mergeProps-composition',
id: 'nested-component-communication-options', name: 'mergeProps 组合式 API',
name: '选项式', url: 'mergeProps-composition'
url: 'nested-component-communication-options' },
}, ]
{ }
id: 'nested-component-communication-composition', ] as Page[]
name: '组合式', },
url: 'nested-component-communication-composition' {
} id: 'examples',
] name: '示例',
}, pages: [
{ {
id: 'set-custom-child-component-root-node-class', id: 'nested-component-communication',
name: '自定义组件中使用 class 定制另一个自定义组件根节点样式', name: '嵌套组件通讯',
children: [ children: [
{ {
id: 'set-custom-child-component-root-node-class-options', id: 'nested-component-communication-options',
name: '选项式', name: '选项式',
url: 'set-custom-child-component-root-node-class-options' url: 'nested-component-communication-options'
}, },
{ {
id: 'set-custom-child-component-root-node-class-composition', id: 'nested-component-communication-composition',
name: '组合式', name: '组合式',
url: 'set-custom-child-component-root-node-class-composition' url: 'nested-component-communication-composition'
} }
] ]
}, },
{ {
id: 'unrecognized-component', id: 'set-custom-child-component-root-node-class',
name: 'unrecognized-component', name: '自定义组件中使用 class 定制另一个自定义组件根节点样式',
url: 'unrecognized-component/unrecognized-component' children: [
} {
] as Page[] id: 'set-custom-child-component-root-node-class-options',
}, name: '选项式',
{ url: 'set-custom-child-component-root-node-class-options'
id: 'error', },
name: '异常示例', {
pages: [ id: 'set-custom-child-component-root-node-class-composition',
{ name: '组合式',
id: 'runtime-error', url: 'set-custom-child-component-root-node-class-composition'
name: '运行时异常', }
children: [ ]
{ },
id: 'runtime-error-options', {
name: '运行时异常 选项式 API', id: 'unrecognized-component',
url: 'runtime-error-options' name: 'unrecognized-component',
}, url: 'unrecognized-component/unrecognized-component'
{ }
id: 'runtime-error-composition', ] as Page[]
name: '运行时异常 组合式 API', },
url: 'runtime-error-composition' {
}, id: 'error',
] name: '异常示例',
} pages: [
] {
} id: 'runtime-error',
] as Menu[] name: '运行时异常',
} children: [
}, {
methods: { id: 'runtime-error-options',
goDetailPage(parentUrl: string, page: Page) { name: '运行时异常 选项式 API',
if (page.enable == false) { url: 'runtime-error-options'
uni.showToast({ },
icon: 'none', {
title: '暂不支持' id: 'runtime-error-composition',
}) name: '运行时异常 组合式 API',
return url: 'runtime-error-composition'
} },
uni.navigateTo({ ]
url: `/pages/${parentUrl}/${page.url}` }
}) ]
}, }
// 自动化测试 ] as Menu[]
setLifeCycleNum(num: number) { }
setLifeCycleNum(num) },
}, methods: {
// 自动化测试 goDetailPage(parentUrl : string, page : Page) {
getLifeCycleNum(): number { if (page.enable == false) {
return state.lifeCycleNum uni.showToast({
}, icon: 'none',
// 自动化测试 title: '暂不支持'
checkLaunchPath(): boolean { })
const app = getApp() return
return app.checkLaunchPath() }
} uni.navigateTo({
} url: `/pages/${parentUrl}/${page.url}`
} })
</script> },
// 自动化测试
<style lang="scss"> setLifeCycleNum(num : number) {
.menu { setLifeCycleNum(num)
border-bottom: 1px solid #dbd9d9; },
// 自动化测试
&.open { getLifeCycleNum() : number {
border-bottom: none; return state.lifeCycleNum
} },
} // 自动化测试
checkLaunchPath() : boolean {
.page-item { const app = getApp()
padding: 12px 10px; return app.checkLaunchPath()
border-bottom: 1px solid #dbd9d9; }
}
&.first-child { }
border-top: 1px solid #dbd9d9; </script>
}
<style lang="scss">
.text { .menu {
font-size: 14px; border-bottom: 1px solid #dbd9d9;
color: #333;
&.open {
&.text-disabled { border-bottom: none;
color: #999; }
} }
}
} .page-item {
</style> padding: 12px 10px;
border-bottom: 1px solid #dbd9d9;
&.first-child {
border-top: 1px solid #dbd9d9;
}
.text {
font-size: 14px;
color: #333;
&.text-disabled {
color: #999;
}
}
}
</style>
pages/render-function/mergeProps/mergeProps-composition.uvue 0 → 100644
浏览文件 @ 318c2ef8
<template>
<view class="page">
<view class="mb-10 flex flex-row justify-between">
<text>merged class</text>
<text id="merged-class">{{mergedProps['class']}}</text>
</view>
<button class="mb-10" id="trigger-merged-click" @click="triggerMergedClick">trigger merged onClick</button>
<view>
<text class="mb-10">prop function result list</text>
<text class="click-res" v-for="(item, index) in propFnResList" :key="index">{{item}}</text>
</view>
</view>
</template>
<script setup lang="uts">
// TODO: 确认 android 与 web & ios 差异
// #ifndef APP-ANDROID
import { mergeProps } from 'vue'
// #endif
type PropFn = () => string
// #ifdef APP-ANDROID
const propA = new Map<string, any | null>([['class', 'foo'], ['onClick', () : string => 'propA click res']])
const propB = new Map<string, any | null>([['class', { bar: true }], ['onClick', () : string => 'propB click res']])
const mergedProps = ref(new Map<string, any | null>())
// #endif
// #ifndef APP-ANDROID
const propA = {
class: 'foo',
onClick: () : string => 'propA click res'
}
const propB = {
class: { bar: true },
onClick: () : string => 'propB click res'
}
const mergedProps = ref({})
// #endif
const propFnResList = ref<string[]>([])
mergedProps.value = mergeProps(propA, propB)
const triggerMergedClick = () => {
(mergedProps.value['onClick'] as PropFn[]).forEach(fn => { propFnResList.value.push(fn()) })
}
</script>
\ No newline at end of file
pages/render-function/mergeProps/mergeProps-options.uvue 0 → 100644
浏览文件 @ 318c2ef8
<template>
<view class="page">
<view class="mb-10 flex flex-row justify-between">
<text>merged class</text>
<text id="merged-class">{{mergedProps['class']}}</text>
</view>
<button class="mb-10" id="trigger-merged-click" @click="triggerMergedClick">trigger merged onClick</button>
<view>
<text class="mb-10">prop function result list</text>
<text class="click-res" v-for="(item, index) in propFnResList" :key="index">{{item}}</text>
</view>
</view>
</template>
<script lang="uts">
// TODO: 确认 android 与 web & ios 差异
// #ifndef APP-ANDROID
import { mergeProps } from 'vue'
// #endif
type PropFn = () => string
export default {
data() {
return {
// #ifdef APP-ANDROID
propA: new Map<string, any | null>([['class', 'foo'], ['onClick', () : string => 'propA click res']]),
propB: new Map<string, any | null>([['class', { bar: true }], ['onClick', () : string => 'propB click res']]),
mergedProps: new Map<string, any | null>(),
// #endif
// #ifndef APP-ANDROID
propA: {
class: 'foo',
onClick: () : string => 'propA click res'
},
propB: {
class: { bar: true },
onClick: () : string => 'propB click res'
},
mergedProps: {},
// #endif
propFnResList: [] as string[],
}
},
onLoad() {
this.mergedProps = mergeProps(this.propA, this.propB)
},
methods: {
triggerMergedClick() {
(this.mergedProps['onClick'] as PropFn[]).forEach(fn => { this.propFnResList.push(fn()) })
}
}
}
</script>
\ No newline at end of file
pages/render-function/mergeProps/mergeProps.test.js 0 → 100644
浏览文件 @ 318c2ef8
const OPTIONS_PAGE_PATH = '/pages/render-function/mergeProps/mergeProps-options'
const COMPOSITION_PAGE_PATH = '/pages/render-function/mergeProps/mergeProps-composition'
describe('mergeProps', () => {
let page = null
const test = async (pagePath) => {
page = await program.reLaunch(pagePath)
await page.waitFor('view')
const mergedClass = await page.$('#merged-class')
expect(await mergedClass.text()).toBe('foo bar')
const triggerMergedClickBtn = await page.$('#trigger-merged-click')
await triggerMergedClickBtn.tap()
const clickResList = await page.$$('.click-res')
expect(clickResList.length).toBe(2)
expect(await clickResList[0].text()).toBe('propA click res')
expect(await clickResList[1].text()).toBe('propB click res')
}
it('mergeProps options API', async () => {
await test(OPTIONS_PAGE_PATH)
})
it('mergeProps composition API', async () => {
await test(COMPOSITION_PAGE_PATH)
})
})
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或