Skip to content

H
hello-uvue

DCloud / hello-uvue

通知 347
Star 2
Fork 7
H
hello-uvue
提交 40281220 编写于 作者: D DCloud_LXH
浏览文件
操作

feat: rendering

上级 b3e15448
隐藏空白更改
内联 并排
Showing with 342 addition and 312 deletion
pages/index/index.uvue
浏览文件 @ 40281220
......@@ -6,15 +6,19 @@
<uni-collapse>
<uni-collapse-item v-for="menu in menus" :key="menu.id" :title="menu.name" class="menu">
<view v-for="(page, index) in menu.pages" :key="page.name">
<view v-if="page.url" class="page-item" :class="{ 'first-child': index == 0 }"
@click="goDetailPage(menu.id, page)">
<view v-if="page.url" class="page-item" :class="{ 'first-child': index == 0 }" @click="goDetailPage(menu.id, page)">
<text :class="{ 'text-disabled': page.enable == false }" class="text">{{ page.name }}</text>
</view>
<template v-if="page.children">
<uni-collapse style="flex: 1">
<uni-collapse-item :title="page.name" class="menu">
<view v-for="(child, index) in page.children" :key="child.url" class="page-item"
:class="{ 'first-child': index == 0 }" @click="goDetailPage(`${menu.id}/${page.id}`, child)">
<view
v-for="(child, index) in page.children"
:key="child.url"
class="page-item"
:class="{ 'first-child': index == 0 }"
@click="goDetailPage(`${menu.id}/${page.id}`, child)"
>
<text :class="{ 'text-disabled': child.enable == false }" class="text">{{ child.name }}</text>
</view>
</uni-collapse-item>
......@@ -30,270 +34,270 @@
</template>
<script lang="uts">
import { setLifeCycleNum, state } from '@/store/index.uts';
import { setLifeCycleNum, state } from '@/store/index.uts'
type Page = {
id: string;
name: string;
enable?: boolean;
url?: string;
children?: Page[];
};
type Page = {
id: string
name: string
enable?: boolean
url?: string
children?: Page[]
}
type Menu = {
id: string;
name: string;
pages: Page[];
url?: string;
enable?: boolean;
};
type Menu = {
id: string
name: string
pages: Page[]
url?: string
enable?: boolean
}
export default {
data() {
return {
menus: [
{
id: 'app-instance',
name: 'App 实例',
pages: [
{
id: 'component',
name: 'component',
url: 'component/component'
},
{
id: 'globalProperties',
name: 'globalProperties',
children: [
{
id: 'globalProperties-options',
name: 'globalProperties 选项式 API',
url: 'globalProperties-options'
},
{
id: 'globalProperties-composition',
name: 'globalProperties 组合式 API',
url: 'globalProperties-composition'
}
]
},
{
id: 'use',
name: 'use',
children: [
{
id: 'use-options',
name: 'use 选项式 API',
url: 'use-composition'
},
{
id: 'use-composition',
name: 'use 组合式 API',
url: 'use-composition'
}
]
}
] as Page[]
},
{
id: 'component-instance',
name: '组件 实例',
pages: [
{
id: 'attrs',
name: 'attrs',
children: [
{
id: 'attrs-options',
name: 'attrs 选项式 API',
url: 'attrs-options'
},
{
id: 'attrs-composition',
name: 'attrs 组合式 API',
url: 'attrs-composition'
}
]
},
{
id: 'data',
name: 'data',
children: [
{
id: 'data-options',
name: 'data 选项式 API',
url: 'data-options'
},
{
id: 'data-composition',
name: 'data 组合式 API',
url: 'data-composition'
}
]
},
{
id: 'props',
name: 'props',
children: [
{
id: 'props-options',
name: 'props 选项式 API',
url: 'props-options'
},
{
id: 'props-composition',
name: 'props 组合式 API',
url: 'props-composition'
}
]
},
{
id: 'el',
name: '$el',
children: [
{
id: 'el-options',
name: '$el 选项式 API',
url: 'el-options'
},
{
id: 'el-composition',
name: '$el 组合式 API',
url: 'el-composition'
}
]
},
{
id: 'options',
name: '$options',
children: [
{
id: 'options-options',
name: '$options 选项式 API',
url: 'options-options'
},
{
id: 'options-composition',
name: '$options 组合式 API',
url: 'options-composition'
}
]
},
{
id: 'parent',
name: '$parent',
children: [
{
id: 'parent-options',
name: '$parent 选项式 API',
url: 'parent-options'
},
{
id: 'parent-composition',
name: '$parent 组合式 API',
url: 'parent-composition'
}
]
},
// #ifdef APP
{
id: 'root',
name: '$root',
children: [
{
id: 'root-options',
name: '$root 选项式 API',
url: 'root-options'
},
{
id: 'root-composition',
name: '$root 组合式 API',
url: 'root-composition'
}
]
}
// #endif
] as Page[]
},
{
id: 'lifecycle',
name: '生命周期',
pages: [
{
id: 'page',
name: '页面生命周期',
children: [
{
id: 'page-options',
name: '页面生命周期（选项式）',
url: 'page-options',
},
export default {
data() {
return {
menus: [
{
id: 'app-instance',
name: 'App 实例',
pages: [
{
id: 'component',
name: 'component',
url: 'component/component'
},
{
id: 'globalProperties',
name: 'globalProperties',
children: [
{
id: 'globalProperties-options',
name: 'globalProperties 选项式 API',
url: 'globalProperties-options'
},
{
id: 'globalProperties-composition',
name: 'globalProperties 组合式 API',
url: 'globalProperties-composition'
}
]
},
{
id: 'use',
name: 'use',
children: [
{
id: 'use-options',
name: 'use 选项式 API',
url: 'use-composition'
},
{
id: 'use-composition',
name: 'use 组合式 API',
url: 'use-composition'
}
]
}
] as Page[]
},
{
id: 'component-instance',
name: '组件 实例',
pages: [
{
id: 'attrs',
name: 'attrs',
children: [
{
id: 'attrs-options',
name: 'attrs 选项式 API',
url: 'attrs-options'
},
{
id: 'attrs-composition',
name: 'attrs 组合式 API',
url: 'attrs-composition'
}
]
},
{
id: 'data',
name: 'data',
children: [
{
id: 'data-options',
name: 'data 选项式 API',
url: 'data-options'
},
{
id: 'data-composition',
name: 'data 组合式 API',
url: 'data-composition'
}
]
},
{
id: 'props',
name: 'props',
children: [
{
id: 'props-options',
name: 'props 选项式 API',
url: 'props-options'
},
{
id: 'props-composition',
name: 'props 组合式 API',
url: 'props-composition'
}
]
},
{
id: 'el',
name: '$el',
children: [
{
id: 'el-options',
name: '$el 选项式 API',
url: 'el-options'
},
{
id: 'el-composition',
name: '$el 组合式 API',
url: 'el-composition'
}
]
},
{
id: 'options',
name: '$options',
children: [
{
id: 'options-options',
name: '$options 选项式 API',
url: 'options-options'
},
{
id: 'options-composition',
name: '$options 组合式 API',
url: 'options-composition'
}
]
},
{
id: 'parent',
name: '$parent',
children: [
{
id: 'parent-options',
name: '$parent 选项式 API',
url: 'parent-options'
},
{
id: 'parent-composition',
name: '$parent 组合式 API',
url: 'parent-composition'
}
]
},
// #ifdef APP
{
id: 'root',
name: '$root',
children: [
{
id: 'root-options',
name: '$root 选项式 API',
url: 'root-options'
},
{
id: 'root-composition',
name: '$root 组合式 API',
url: 'root-composition'
}
]
}
// #endif
] as Page[]
},
{
id: 'lifecycle',
name: '生命周期',
pages: [
{
id: 'page',
name: '页面生命周期',
children: [
{
id: 'page-options',
name: '页面生命周期（选项式）',
url: 'page-options'
},
{
id: 'page-composition',
name: '页面生命周期（组合式）',
url: 'page-composition',
}
]
}
] as Page[]
},
{
id: 'built-in',
name: '内置组件',
pages: [
{
id: 'component/keep-alive',
name: 'keep-alive',
children: [
{
id: 'keep-alive-options',
name: 'keep-alive（选项式）',
url: 'keep-alive-options',
},
{
id: 'page-composition',
name: '页面生命周期（组合式）',
url: 'page-composition'
}
]
}
] as Page[]
},
{
id: 'built-in',
name: '内置组件',
pages: [
{
id: 'component/keep-alive',
name: 'keep-alive',
children: [
{
id: 'keep-alive-options',
name: 'keep-alive（选项式）',
url: 'keep-alive-options'
},
{
id: 'keep-alive-composition',
name: 'keep-alive（组合式）',
url: 'keep-alive-composition',
}
]
},
{
id: 'component/teleport',
name: 'teleport',
children: [
{
id: 'teleport-options',
name: 'teleport（选项式）',
url: 'teleport-options',
},
{
id: 'keep-alive-composition',
name: 'keep-alive（组合式）',
url: 'keep-alive-composition'
}
]
},
{
id: 'component/teleport',
name: 'teleport',
children: [
{
id: 'teleport-options',
name: 'teleport（选项式）',
url: 'teleport-options'
},
{
id: 'teleport-composition',
name: 'teleport（组合式）',
url: 'teleport-composition',
}
]
},
{
id: 'component/component',
name: 'component',
children: [
{
id: 'component-options',
name: 'component（选项式）',
url: 'component-options',
},
{
id: 'teleport-composition',
name: 'teleport（组合式）',
url: 'teleport-composition'
}
]
},
{
id: 'component/component',
name: 'component',
children: [
{
id: 'component-options',
name: 'component（选项式）',
url: 'component-options'
},
{
id: 'component-composition',
name: 'component（组合式）',
url: 'component-composition',
}
]
},
{
{
id: 'component-composition',
name: 'component（组合式）',
url: 'component-composition'
}
]
},
{
id: 'component/slots',
name: 'slot',
children: [
......@@ -327,65 +331,81 @@
}
]
}
] as Page[]
}
] as Menu[],
}
},
methods: {
goDetailPage(parentUrl: string, page: Page) {
if (page.enable == false) {
uni.showToast({
icon: 'none',
title: '暂不支持'
});
return;
] as Page[]
},
{
id: 'rendering',
name: '渲染',
pages: [
{
id: 'render',
name: 'render Function（选项式）',
url: 'render/render'
},
{
id: 'unrecognized-component',
name: 'unrecognized-component',
url: 'unrecognized-component/unrecognized-component'
}
] as Page[]
}
uni.navigateTo({
url: `/pages/${parentUrl}/${page.url}`
});
},
// 自动化测试
setLifeCycleNum(num: number) {
setLifeCycleNum(num);
},
// 自动化测试
getLifeCycleNum(): number {
return state.lifeCycleNum;
},
// 自动化测试
checkLaunchPath(): boolean {
const app = getApp();
return app.checkLaunchPath();
] as Menu[]
}
},
methods: {
goDetailPage(parentUrl: string, page: Page) {
if (page.enable == false) {
uni.showToast({
icon: 'none',
title: '暂不支持'
})
return
}
uni.navigateTo({
url: `/pages/${parentUrl}/${page.url}`
})
},
// 自动化测试
setLifeCycleNum(num: number) {
setLifeCycleNum(num)
},
// 自动化测试
getLifeCycleNum(): number {
return state.lifeCycleNum
},
// 自动化测试
checkLaunchPath(): boolean {
const app = getApp()
return app.checkLaunchPath()
}
};
}
}
</script>
<style lang="scss">
.menu {
border-bottom: 1px solid #dbd9d9;
.menu {
border-bottom: 1px solid #dbd9d9;
&.open {
border-bottom: none;
}
&.open {
border-bottom: none;
}
}
.page-item {
padding: 12px 10px;
border-bottom: 1px solid #dbd9d9;
.page-item {
padding: 12px 10px;
border-bottom: 1px solid #dbd9d9;
&.first-child {
border-top: 1px solid #dbd9d9;
}
&.first-child {
border-top: 1px solid #dbd9d9;
}
.text {
font-size: 14px;
color: #333;
.text {
font-size: 14px;
color: #333;
&.text-disabled {
color: #999;
}
&.text-disabled {
color: #999;
}
}
}
</style>
\ No newline at end of file
pages/rendering/render/render.uvue
浏览文件 @ 40281220
<script lang="uts">
import CompForRenderFunction from '@/components/CompForRenderFunction.uvue'
export default {
data(){
data() {
return {
msg: 'default msg'
}
},
render(): VNode {
return h('view', {class: 'page'}, [
return h('view', { class: 'page' }, [
h(CompForRenderFunction, {}, (): VNode[] => [h('text', { class: 'comp-slot' }, 'component slot')]),
h('text', { class: 'uni-common-mt msg', style: { color: 'blue' } }, this.msg),
h('button', { class: 'uni-common-mt btn', type: 'primary', onClick: () => {this.msg = 'new msg'} }, 'click')
h(
'button',
{
class: 'uni-common-mt btn',
type: 'primary',
onClick: () => {
this.msg = 'new msg'
}
},
'click'
)
])
}
}
......@@ -20,4 +30,4 @@ export default {
.btn {
color: red;
}
</style>
</style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或