Open 02020 opened 3 years ago
const toLayout = () => ({ class: 'flex flex-col h-screen bg-gray-200 font-roboto overflow-hidden', child: [ { component: 'header', class: 'flex justify-between items-center py-4 px-6 bg-white border-b-2 border-indigo-600', child: { slot: 'header', }, }, { class: 'flex flex-row h-full', child: [ { slot: 'sidebar', }, { class: 'flex-1 overflow-x-hidden overflow-y-auto bg-gray-200', child: { slot: 'main', }, }, ], }, ], });
<template> <div> <Button @click="onClick">{{ title }}</Button> <to-render :f="null" :schema="schema" :props="props" @cmd="onCMD"> <template v-slot:header> <h1>title</h1> </template> <template v-slot:sidebar> <h1>siderbar</h1> </template> <template v-slot:main> <Button @click="onClick">{{ title }}</Button> </template> </to-render> </div> </template> <script> import { toRender } from './grade-builder'; // import Layout from './Layout1.js'; export default { name: 'app', components: { toRender: toRender('', { Theader: { render(h) { console.log('Theader'); return h( 'header', { class: 'flex justify-between items-center py-4 px-6 bg-white border-b-2 border-indigo-600', }, [this.$scopedSlots.header()] ); }, }, TMain: { render(h) { console.log('TMain'); return h( 'div', { class: 'flex flex-row h-full', }, [ this.$scopedSlots.sidebar(), h( 'div', { class: 'flex-1 overflow-x-hidden overflow-y-auto bg-gray-200', }, [this.$scopedSlots.main()] ), ] ); }, }, }), }, data() { return { title: '按钮1', props: { name: 'asdfasdfs', }, schema: { component: 'div', class: 'flex flex-col h-screen bg-gray-200 font-roboto overflow-hidden', child: [ { component: 'Theader', }, { component: 'TMain', }, ], }, }; }, computed: {}, methods: { onCMD(name, key, ...args) { console.log(name, key); }, onClick() { this.title = +new Date(); }, }, }; </script>
结构
使用方式