@@ -162,6 +162,26 @@ uiSchema = {
162162 ' ui:labelWidth' : ' 50px'
163163
164164 ' ui:options' : {
165+ // scoped slots 使用render函数来实现
166+ // 配置 renderScopedSlots 返回对象key为slotName，函数体返回vnode
167+ // render 函数参考：https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
168+ renderScopedSlots (h ) {
169+ return {
170+ append : (props ) => h (' span' ' .com'
171+ };
172+ },
173+
174+ // slots，需要使用render函数来实现
175+ // 配置 renderChildren ，返回 Vnode[] 其中slot即为slotName
176+ // render 函数参考：https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
177+ renderChildren (h ) {
178+ return [
179+ h (' span'
180+ slot: ' suffix'
181+ }, ' 后缀'
182+ ];
183+ },
184+
165185 // 获取widget组件实例，非必要场景不建议使用
166186 // widget组件 mounted 组件后回调该方法传出vm实例
167187 // 支持版本: "0.4.1"
@@ -194,7 +214,9 @@ uiSchema = {
194214 attrs: {
195215 // 通过 vue render函数 attrs 传递给 Widget 组件，只能配置在叶子节点
196216 // 你也配置在外层，程序会合并 attrs 和 其它外层属性 通过 attrs 传递给子组件
197- autofocus: true
217+ // 配置在这里的参数都会传给widget组件，当widget组件props和uiSchema通用参数冲突时可以使用attr配置
218+ autofocus: true ,
219+ width: ' 99px' // 这里直接传给widget组件，而非外层的width配置
198220 },
199221 style: {
200222 // 通过 vue render函数 style 传递给 Widget 组件，只能配置在叶子节点
@@ -216,7 +238,7 @@ uiSchema = {
216238 fieldClass: true
217239 },
218240 fieldAttrs: {
219- // 通过 vue render函数 attrs 传递给 Field 组件，支持所有field节点
241+ // 通过 vue render函数 attrs 传递给 Field 组件，支持所有节点
220242 ' attr-x' : ' xxx'
221243 },
222244
@@ -232,6 +254,65 @@ uiSchema = {
232254> 1 . ` ui:widget ` 配置 ` HiddenWidget ` 或者 ` hidden ` 既可隐藏当前元素
233255> 1 . ` ui:hidden ` 支持配置表达式，详细参见这里 [ ui-schema ui: hidden 配置表达式] ( /zh/guide/data-linkage.html#ui-schema配置表达式 )
234256
257+ ### ui-schema - slots
258+ 可以通过uiSchema配置render函数传递slot到你的Widget组件，使用方式如下：
259+
260+ > 注意这里vue2版本需要区分slots，和scopeSlots的区别，配置如下
261+ >
262+ > [ render函数参考官方文档] ( https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1 )
263+
264+ * slots - ` renderChildren ` (仅vue2)
265+
266+ > 注意：vue3 版本所有slots 统一通过 ` renderScopedSlots ` 形式传递。
267+
268+ ``` js
269+ {
270+ ' ui:options' : {
271+ // slots，需要使用render函数来实现
272+ // 配置 renderChildren ，返回 Vnode[] 其中slot即为slotName
273+ // render 函数参考：https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
274+ renderChildren (h ) {
275+ return [
276+ h (' span'
277+ slot: ' suffix'
278+ }, ' 后缀'
279+ ];
280+ }
281+ }
282+ }
283+ ```
284+
285+ * scopedSlots - ` renderScopedSlots ` （vue3、vue2）
286+ > vue3版本 h 为全局api，` import { h } from 'vue' `
287+ >
288+ > 同时，vue3 版本配置 ` renderScopedSlots ` 可以为纯对象、vue3不区分scoped slots
289+
290+ ``` js
291+ {
292+ ' ui:options' : {
293+ // vue2
294+ // scoped slots 使用render函数来实现
295+ // 配置 renderScopedSlots 返回对象key为slotName，函数体返回vnode
296+ // render 函数参考：https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
297+ renderScopedSlots (h ){
298+ return {
299+ append : (props ) => h (' span' ' .com'
300+ };
301+ }
302+ },
303+
304+ ' ui:options' : {
305+ // vue3
306+ // slots 使用render函数来实现
307+ // vue3 renderScopedSlots 可以为function、或者如下纯对象的形式
308+ // vue3 render 函数参考：https://v3.cn.vuejs.org/guide/render-function.html#%E6%8F%92%E6%A7%BD
309+ renderScopedSlots: {
310+ default : (props ) => h (' span' props .text )
311+ }
312+ }
313+ }
314+ ```
315+
235316#### ui-schema配置在schema中
236317
237318` 0.0.16 ` 之后版本，` ui-schema ` 所有配置都支持直接配置在 ` schema ` 参数中
0 commit comments