AutoStore

Appearance

Custom ​

自定义字段

参数 ​

ts
type htmlTemplate = (strings: TemplateStringsArray, ...values: unknown[]) => any;

type SchemaCustomWidgetOptions = {
    dropdown?: boolean;
    inputSelectors?: string;
    renderSelection?: (values: any, html: htmlTemplate) => string;
    renderContent?: (values: any, html: htmlTemplate) => string;
};
loading

指南 ​

工作原理 ​

  1. 首先要实现renderContent方法用于渲染自定义显示的内容，renderContent方法使用lit 模板语法。
  2. Custom会监听<input>标签的input,change事件，当<input>标签的值发生改变时，会调用toState函数，用于将input元素的值转换为state的值，写入到AutoStore的状态中， 由于input可能有多个，所以传入toState(values)函数的是一个数组。
  3. 当监听到state的值发生改变时，会调用toInput方法，将状态值转换为适合input的值，然后调用renderContent方法重新渲染。
  4. 当dropdown=true时，renderSelection方法用于渲染值。

renderContent ​

renderContent方法用于渲染自定义组件内容。

renderContent方法接收两个参数，

  • 第一个参数是当前字段数据
  • 第二个参数是lit html模板方法，返回值是自定义组件内容。详见lit html
ts
renderContent: (values, html) => {
    return html` <div style="padding:1em">
        <label
            >电子邮件:
            <input .value=${values[0]} />
            @<input .value=${values[1]} />
        </label>
    </div>`;
};

values是数组，依次绑定到<input>标签的.value属性即可。

renderSelection ​

当dropdown=true时，renderSelection方法用于渲染选择值。

使用方法同rebderContent

自定义内容通过下拉弹出方式呈现。

inputSelectors ​

默认值：input,textarea