https://github.com/fyl080801/jrender

https://github.com/fyl080801/jrender

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/fyl080801/jrender
• Owner: fyl080801
• Created: 2021-09-07T04:10:27.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-09-09T03:01:15.000Z (about 2 years ago)
• Last Synced: 2024-10-12T08:26:23.534Z (about 1 month ago)
• Language: TypeScript
• Size: 1.22 MB
• Stars: 2
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 说明

基于 `vue2` 的界面渲染库

## 表达式

通过 `$:` 将值绑定到属性上

```json

{

  "text": "$:model.text"

}

```

支持函数表达式

```json

{

  "events": {

    "click": "$:()=>{ alert('clicked') }"

  }

}

```

## 渲染前处理

通过定义渲染前处理实现改变将要渲染的节点功能

例如：原始定义如下

```json

{

  "component": "el-input",

  "formItem": { "label": "input" },

  "props": { "value": "$:model.obj.text", "placeholder": "input value" },

  "events": { "input": "$:(e)=>SET(model, 'obj.text', e)" }

}

```

定义一个处理 formItem 的方法

```javascript

const onSetup = ({ onBeforeBind }) => {

  onBeforeBind(() => (field, next) => {

    if (!field.formItem) {

      next(field);

      return;

    }

    const formItem = field.formItem;

    delete field.formItem;

    return { component: "el-form-item", props: formItem, children: [field] };

  });

};

```

输出结果

```html

  SET(model, 'obj.text', e)" />

```

## 功能函数

可在表达式中使用功能函数

```yaml

- component: el-checkbox

  formItem:

    label: checked

  props:

    value: $:GET(model, 'checked') # GET 深度获取值

  events:

    input: $:(e)=>SET(model, 'checked', e) # 深度设置值

```

可使用 addFunction 添加自定义功能函数

```javascript

import { nextTick } from "@vue/composition-api";

useRootRender(({ addFunction }: any) => {

  addFunction("NEXTTICK", (cb: any) => {

    nextTick(cb);

  });

});

```

支持设置监听，实现数据发生变化后触发操作

```yaml

listeners:

  - watch: $:GET(model, 'arr', []).length

    actions:

      - handler: |

          $:() => {

            SET(model, 'checked', false); 

            NEXTTICK(() => { SET(model, 'checked', true) }); 

          }

```