Open 02020 opened 3 years ago
h 的使用范围, 当前组件的上下文
// 渲染-01
const render_01 = {
Icon: (h, data, slots = []) => h('Icon', data, slots),
Button: (h, data, slots = []) => h('Button', data, slots),
};
// 渲染-02
const render_02 = function (h) {
return {
Icon: (data, slots = []) => h('Icon', data, slots),
Button: (data, slots = []) => h('Button', data, slots),
};
};
// 渲染-03 遍历
const render_03 = function (h) {
return ['Icon', 'Button'].reduce((acc, key) => {
acc[key] = (data, slots = []) => h(key, data, slots);
return acc;
}, {});
};
// 使用方式
const r = renderFn(h)
r.Button({props: {type: 'primary'}},["ddd"])
const render = {
Icon: (cmd, ...args) => (h, key, props) => {
return h('Icon', {
props: props,
on: {
click: (e) => {
e.stopPropagation();
cmd(key, args);
},
},
});
},
Button: (cmd, ...args) => (h, key, props) => {
return h('Button', {
props: props,
on: {
click: (e) => {
e.stopPropagation();
cmd(key, args);
},
},
});
},
};
// 渲染目录树的内容
const renderContent = ({ cmd, btns }) => (h, { root, node, data }) => {
if (node.parent === undefined) {
return h(
'span',
{
style: {
display: 'inline-block',
width: '100%',
},
},
data.title
);
}
const Icon = renderC.Icon(cmd, root, node, data);
return h(
'span',
{
style: {
display: 'inline-block',
width: '100%',
},
},
[
h('span', [
h('Icon', {
props: {
type: 'ios-podium',
},
style: {
marginRight: '8px',
},
}),
h('span', data.title),
]),
h(
'span',
{
style: {
display: 'inline-block',
float: 'right',
marginRight: '2px',
},
},
btns.map((x) => Icon(h, x.key, x))
),
]
);
};
<template>
<div style="width: 100%" class="border border-blue-500">
<div :key="ri" v-for="(row, ri) in _list" class="grid grid-cols-6">
<div
:key="ci"
v-for="(col, ci) in row"
:class="[col.class]"
@click="onClick(ri, ci)"
class="text-sm font-semibold text-center py-2 m-px"
>
{{ col.title }}
</div>
</div>
</div>
</template>
<script>
import { buildStyleCell } from './utils';
export default {
name: 'v-table',
props: {
list: {
type: Array,
},
pairs: {
type: Array,
},
},
computed: {
_list() {
return buildStyleCell(this.list, this.pairs);
},
},
methods: {
onClick(r, c) {
console.log(this.list[r][c]);
},
},
mounted() {},
};
</script>
import { renderFn, buildStyleCell } from './utils';
export default {
name: 'v-table',
props: {
list: Array,
pairs: Array,
},
render(h) {
const div = renderFn(h).div;
const vm = this;
// 渲染单元格
const renderCol = (ri) => (col, ci) =>
div(col.title, {
key: ci,
staticClass: 'text-sm font-semibold text-center py-2 m-px',
class: [col.class],
on: {
click: function () {
return vm.onClick(ri, ci);
},
},
});
// 渲染行
const renderRow = (row, ri) => {
const col = renderCol(ri);
return div(row.map(col), {
key: ri,
staticClass: 'grid grid-cols-6',
});
};
// 最终结果
const render = (list) =>
div(list.map(renderRow), {
staticClass: 'border border-blue-500',
staticStyle: {
width: '100%',
},
});
const list = buildStyleCell(this.list, this.pairs);
return render(list);
},
methods: {
onClick(r, c) {
// 单元格 行 所有数据
this.$emit('cmd', this.list[r][c], r, this.list);
},
},
};
使用 Render 构建的组件
1. 组件-按钮组
应用demo
2. 组件 - 折叠面板1.0
应用demo
3. 组件-折叠面板2.0
应用demo