Слияние кода завершено, страница обновится автоматически
Согласно vjform, расширение упрощённой версии определения формата JSON
Интегрированы все расширения, разработанные в vjform, упрощён формат определения JSON и поддерживается вся функциональность vjform.
Конфигурацию можно редактировать с помощью визуального дизайнера.
Установка пакета:
npm i jformer
Запуск проекта:
npm i
npm run dev
Поддерживает всю существующую функциональность vjform и, помимо этого, включает анализ преобразования префикса атрибута, что позволяет добавлять определённые префиксы к именам атрибутов для реализации привязки, вычислений и преобразований событий.
Объединены некоторые свойства компонентов, что делает их использование более понятным и удобным.
Некоторые свойства объединены в config.
| Префикс | Описание |
|---|---|
| v-model | Значение |
| params | Только внешние параметры будут обновлены |
| config | Включает fields, datasource и listeners, соответствующие свойствам vjform |
| components | Отдельные компоненты, теоретически jformer поддерживает любые компоненты в проекте Vue. Если компонент не используется в проекте, его можно передать сюда для поддержки компонента. |
Определение внутренних компонентов в свойствах fields. Внутренний компонент имеет следующие свойства:
| Свойство | Описание |
|---|---|
| component | Имя компонента, поддерживает все HTML-теги и имена компонентов, на которые ссылается проект Vue. |
| fieldOptions | Свойства компонента, это второй параметр метода рендеринга Vue, см. официальное определение Vue, поддерживаются все свойства пользовательских компонентов props. |
| children | Подкомпоненты компонента |
Пример определения JSON:
{
"component": "div",
"fieldOptions": {
"class": "",
"style": {
"margin": "10px"
},
"domProps": {}
},
"children": []
}
Компоненты поддерживают быстрое определение свойств, и все быстрые определения, зарегистрированные в vjform, также поддерживаются. Вот некоторые часто используемые быстрые определения:
| Свойство | Описание |
|---|---|
| text | Эквивалентно свойству domProps.innerText |
| condition | Условие определяет, существует ли компонент, может быть объединено с $ для выражения и ассоциации |
| events | Определяет поведение событий компонента |
| model | Компоненты с интерактивным поведением могут связывать значения с определёнными свойствами модели. Изменения в поведении взаимодействия компонента изменят значение свойства модели, например, input и select. |
[
{
"component": "p",
"$:condition": "model.text.length > 4", // условие отображения
"text": "Текст"
},
{
"component": "button",
"events": [{ "name": "click", "@:handler": "alert('Событие клика')" }]
},
{
"component": "input",
"model": "text" // Связывает свойство model.text
}
]
Свойства fieldOptions и быстрые определения компонентов могут быть реализованы с использованием префиксов. Здесь поддерживается прямое взятие свойств модели, параметров и источника данных для вычисления и связывания со свойствами.
#### Текстовый шаблон
В свойствах перед текстом добавляется префикс `#`, что позволяет использовать строки шаблона ES6 для вывода содержимого.
```json
{
"component": "div",
"fieldOptions": {
"props": {},
"domProps": {
"#:innerText": "Введено ${model.text}"
}
}
}
В свойствах перед событиями добавляется префикс @, что позволяет преобразовать выражение в функцию, связанную с событием компонента.
{
"component": "button",
// Также поддерживается быстрое определение событий vjform
"events": [
{
"name": "click",
"@:handler": "alert('clicked!')"
}
]
}
Если после @ добавить имя свойства модели, можно обновить результат выражения непосредственно до свойства модели после запуска события.
{
"component": "input",
"fieldOptions": {
"domProps": {
"$:value": "model.text"
},
"on": {
"@text:input": "arguments[0].target.value" // Обновляет результат ввода до model.text
}
}
}
Добавление префикса ^ к свойствам предотвращает преобразование значения свойства, сохраняя исходное значение.
Когда jformer вложен в другой jformer или используется в пользовательском компоненте, вложенный jformer должен обрабатывать свойства внутри себя, а не полагаться на внешнее преобразование. В этом случае можно добавить префикс ^ к соответствующим свойствам компонента.
Реализовать компонент Repeat, который использует jformer для отображения динамического представления.
<template>
<div v-if="!updating">
<j-former
:key="index"
v-for="(item, index) in data"
:value="item"
:params="{ ...params, $index: index }"
:config="options"
></j-former>
</div>
</template>
<script>
export default {
props: {
data: Array,
params: Object,
options: Object
},
watch: {
'data.length': {
handler() {
this.updating = true
this.$nextTick(() => {
this.updating = false
})
}
}
},
data() {
return {
updating: false
}
}
};
</script>
Использовать компонент Repeat в jformer.
{
"fields": [
{
"component": "v-repeat", // Пользовательский компонент, реализующий генерацию интерфейса на основе массива данных и использующий jformer для представления интерфейса.
"fieldOptions": {
"props": {
"$:data": "model.listData",
"params": {
"$:listData": "model.listData" // Передать исходный массив внутренним компонентам через параметры для реализации функции удаления.
},
// Использовать префикс ^, чтобы предотвратить преобразование внешнего jformer значений свойств, вместо этого обрабатывая их внутренне.
"^:options": {
"fields": [
{
"component": "div",
"fieldOptions": {
"style": { "border": "1px solid black", "margin": "10px", "padding": "5px" }
},
"children": [
{ "component": "p", "#:text": "Пункт ${params.$index + 1}" },
{ "component": "input", "model": ["text"] },
{
"component": "button",
"text": "delete",
"fieldOptions": {
"on": { "@:click": "params.listData.splice(params.$index ,1)" }
}
}
]
}
]
}
}
}
},
{
"component": "button",
"text": "add item",
"fieldOptions": { "on": { "@:click": "model.listData.push({})" } }
}
]
}
Правила определения преобразования на основе значений свойств аналогичны предыдущим, за исключением того, что правила преобразования помещаются в значения свойств. Например:
Текстовый шаблон:
{
"text": "#:Введено ${model.text.length} символов"
}
Выражение:
{
"text": "$:model.value1 + model.value2"
}
Событие:
{
"on": {
"click": "@:alert('xxx')", // Выполнить JS
"input": "@text:arguments[0]" // Обновить свойство модели
}
}
``` ```
component: input
model: text2
component: div
fieldOptions:
props: {}
domProps:
$:innerText: model.text.length + 1
component: div
fieldOptions:
props: {}
domProps: #:innerText: «Введено ${model.text}»
component: button
fieldOptions:
props: {}
on:
@:click: datasource.load()
] }
## Дополнительные функции
При преобразовании события можно использовать шаблонную строку для присвоения значения свойству модели.
Например:
```json
{
component: el-table
children: [
{
component: el-table-column
children: [
{
component: el-input
fieldOptions:
scopedSlot: default
props:
value: @:model.list[scope.$index].text
on:
input: @list[${scope.$index}].text:arguments[0] // Использование шаблонной строки для обновления свойства элемента массива по определённому индексу
}
]
}
]
}
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )