formulate el ui

сформулировать-эль-UI

Этот проект добавляет скин element-ui в проект vueformulate , что позволяет поддерживать единый стиль при использовании vueformulate в проектах element-ui .

Что касается функционального сравнения пакетов el-form и vueformulate в element-ui, я написал для вас статью.

смысловая версия

Этот проект соответствует семантической версии 2.0.

Перед установкой вам необходимо установить следующие пакеты npm

• @braid/vue-formulate китайская документация
• элемент-UI

Установить

 yarn add formulate-el-ui

Быстрый опыт

Нажмите, чтобы просмотреть

использовать

Глобальное введение

Добавьте следующий код в соответствующее место вашего файла main.js :

 import 'formulate-el-ui/dist/element-ui.min.css';
import formulateElementUI from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [formulateElementUI]
})

Просто используйте стили

 import {
  theme
} from 'formulate-el-ui'
import 'formulate-el-ui/dist/element-ui.min.css';

Vue.use(VueFormulate, {
  plugins: [theme], // 配合上面引入的样式文件，使用 element-ui 的风格
})

Если вам необходимо использовать встроенную форму (все поля формы отображаются в одной строке), вы можете добавить к компоненту FormulateForm стиль el-formulate__form-inline :

 <FormulateForm
  :form-class="['el-formulate__form-inline']"
>
  <FormulateInput
    label="个性签名"
    type="el-input"
    value="你好，Element-UI"
  />
</FormulateForm>

Чтобы узнать больше, посетите документацию по form-class

Примечание. При использовании встроенной формы position:absoulte используется для отображения сообщений об ошибках. Если в поле имеется несколько сообщений об ошибках, отображение будет запутанным. Поэтому при проверке необходимо использовать правило bail . , чтобы отображались только сообщения об ошибках.

Исправьте только вспомогательное размещение компонента флажка.

 import {
  CheckboxHelp,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [CheckboxHelp], // CheckboxHelp 用于解决 checkbox 组件中 help 信息展示位置错误的问题
})

Добавлены правила проверки китайского номера мобильного телефона и идентификационного номера,

Правила включали:

• мобильный телефон: проверка формата номера мобильного телефона
• idcard: проверка формата 18-значной идентификационной карты

 import {
  rules,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [rules],
})

Расширяйте только часто используемые компоненты поля формы element-ui.

 import {
  inputs,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [inputs],
})

Входящие в настоящее время компоненты

компоненты	ФормулаТип ввода	Поддерживаемые реквизиты
Вход	el-input	авторазмер, очищаемый, максимальная длина, минимальная длина, строки, отключено showPassword, showWordLimit, elType (если значением является textarea , это многострочное текстовое поле)
Каскадер	el-cascader	beforeFilter, очищаемый, свернуть теги, устранение дребезга, отключено, filterMethod, elLabel, параметры, заполнитель, popperClass, реквизит, разделитель, showAllLevels, размер, elValue
Выбор цвета ColorPicker	el-color-picker	colorFormat,predefine,showAlpha
Входной номер	el-input-number	мин,макс,шаг,шагСтрого,точность,отключено
Ставка	el-rate	allowHalf,colors,disabledVoidColor,disabledVoidIconClass ,highThreshold,iconClasses,max,lowThreshold,showScore,showText, тексты, testColor, voidColor,voidIconClass
Выбирать	el-select	allowCreate, очищаемый, свернутьТеги, фильтруемый, отключенный, множественный
Слайдер	el-slider	formatTooltip,min,marks,max,scoreTemplate, showTooltip, шаг, showStops, showInput, showInputControls, диапазон, вертикаль, высота
Выключатель	el-switch	activeText,inactiveText,activeColor,inactiveColor, отключено

Обязательные поля+v0.2.5

Когда required свойство добавляется в компонент el-form-item element-ui, отображается красный * , напоминающий пользователю, что это поле является обязательным. Теперь этот проект также поддерживает его, если правило проверки FormulateInput . содержит required , он будет. Этот красный * добавляется по умолчанию. Если вы не хотите его отображать, вы можете установить для свойства requiredTip значение false в FormulateInput , вот и все:

 <FormulateInput :required-tip="false" />

Известные проблемы

• Сопровождающий проекта сосредоточен на совместимости с vue3, и в настоящее время у него нет времени заниматься проблемами и PR. Хотя это так, весь проект имеет полные модульные тесты, основанные на vue2, поэтому вы можете использовать его с уверенностью.
• В форме редактирования, если есть поле формы изображения, после вызова интерфейса и присвоения данных изображения форме форма не будет отображать изображение. Временное решение — добавить v-if="loadForm" в formulate-form компонент formulate-form . v-if="loadForm" Значением по умолчанию для loadForm установлено значение false . После того, как интерфейс вернет данные, установите для него значение true , чтобы достичь цели рендеринга изображения.

документ

Посмотреть документацию по vueformulate

Лицензия

Массачусетский технологический институт

Плагин подсказки кода VS Code

Запущен плагин vscode для помощи в разработке. Вы можете нажать «formate-el-helper», чтобы установить его.

Звезда

Если вы найдете это полезным, поставьте проекту звезду^_^

Связанные рекомендации

• Vue Formulate Helper : плагин подсказки кода VS Code для Vue Formulate