formulate el ui

formulate-el-ui

本專案為vueformulate專案加上了element-ui皮膚，可以讓你在element-ui專案中使用vueformulate時保持風格統一

關於element-ui 中的el-form和vueformulate套件的功能比較，我寫了一篇文章,供大家參考借鑒

語意化版本

本項目遵循語意化版本2.0

在安裝之前，需要安裝以下npm 套件

• @braid/vue-formulate 中文文檔
• element-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規則， 這樣錯誤訊息就會只展示一條。

只修正checkbox 組件的help 展示位置

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

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

增加中國手機號碼和身分證號碼驗證規則、

包含的規則：

• mobile ：手機號碼格式驗證
• 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],
})

目前包含的組件

組件	FormulateInput type	支援的prop
Input	el-input	autosize, clearable, maxlength, minlength,rows, disabled showPassword, showWordLimit, elType (值為textarea時，是多行文字方塊)
Cascader	el-cascader	beforeFilter, clearable, collapseTags, debounce, disabled, filterMethod, elLabel, options, placeholder, popperClass, props, separator, showAllLevels, size, elValue
ColorPicker 顏色選擇器	el-color-picker	colorFormat,predefine,showAlpha
InputNumber	el-input-number	min,max,step,stepStrictly,precision,disabled
Rate	el-rate	allowHalf,colors,disabledVoidColor,disabledVoidIconClass ,highThreshold,iconClasses,max,lowThreshold,showScore,showText, texts,testColor,voidColor,voidIconClass
Select	el-select	allowCreate,clearable,collapseTags,filterable, disabled,multiple
Slider	el-slider	formatTooltip,min,marks,max,scoreTemplate, showTooltip,step,showStops,showInput,showInputControls, range,vertical,height
Switch	el-switch	activeText,inactiveText,activeColor,inactiveColor, disabled

必填欄位+v0.2.5

element-ui 的el-form-item元件，當加上了required prop 後，會顯示一個紅色*提示用戶該字段必填，現在本項目也已支持，只要是FormulateInput的驗證規則中包含required ,則會預設加上這個紅色* ，如果不想顯示，可以在FormulateInput上設定requiredTip prop 為false ,即可：

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

已知問題

• 專案維護者正在專注於做vue3 的相容，目前沒有時間處理issue 以及pr，雖然這樣，但是整個專案有基於vue2 的完整的單元測試，可以放心使用。
• 在編輯表單中，如果有圖片表單域，呼叫介面後，再把圖片資料賦值給表單後，表單不會渲染出來圖片，臨時處理方案是，可以在formulate-form元件上加上一個v-if="loadForm" loadForm預設值設定為false ,待介面回傳資料後，然後再置位true , 即可達到渲染圖片的目的

文件

查看vueformulate 文檔

License

MIT

VS Code 程式碼提示插件

已推出輔助開發的vscode 插件，可以點選formulate-el-helper 安裝

星星

如果你感覺好用，就給項目打個星星吧^_^

相關推薦

• Vue Formulate Helper : Vue Formulate 的VS Code 程式碼提示插件