antd-design-vue 部分組建參考文檔
1.組件
1.1 radio 賦值 取值 傳值 校驗
1.2 checkbox 賦值 取值 傳值 校驗
1.3 select 賦值 取值 傳值 校驗
1.4 日期組件 賦值 取值 傳值 默認值 格式
1.5 組件必填標志
1.6 圖片上傳組件 ，格式限制 大小限制 查看大圖 多圖上傳 多圖展示 圖片組件增刪改查
1.7 附件上傳組件
1.8 查詢區域組件
1.9 組件與組件文案的排列(表單區，查詢區等等) 1.10 提示組件 1.11 彈框組件以及如何配置(例如彈出位置 大小 傳參 回調 等等)
1. radio
基本使用
<a-radio value="apple" checked defaultChecked >Apple</a-radio> value 選中參數值
checked 是否選中
defaultChecked 是否默認選中
通過配合 a-radio-group 組建獲取和賦值
<a-radio-group :defaultValue="fdata" name="fruits" @change="userChange" value="currentValue"> ... </a-radio-group> a-radio-group 的change事件獲取event事件
e.target
{ prefixCls: "ant-radio" name: "fruits" type: "radio" defaultChecked: false checked: true disabled: false autoFocus: false value: "orange" } 如果a-radio-group的子元素是a-radio-button
可以設置 buttonStyle 和 size 屬性
2.checkbox
基本使用
<a-checkbox @change="userChange">checkbox</a-checkbox> checkbox 通過change屬性獲取event事件
{
prefixCls: "ant-checkbox"
type: "checkbox"
defaultChecked: false
autoFocus: false
checked: true
}
通過checked值判斷是否選中
defaultChecked 初始狀態
disabled 選中失效
change回調函數
配合 a-checkbox-group 進行使用時，進行一組選框渲染
options 選框數組
Array<{ label: string value: string disabled?: boolean, onChange?: function }>
onChange事件會返回數組中 選中的元素的value值數組，直接返回的是value值組成的數組，按選中順序
3.select
基本使用
<a-select style="width: 120px" defaultValue="orange" @change="handleChange"> <a-select-option v-for="f in fruits" :value="f">{{f}}</a-select-option> </a-select> options 用來傳入select下拉的數據，數據以數組形式傳入，數組結構，當傳入的數據過大，要進行截取渲染，不然會卡頓
array<{value, label, [disabled, key, title]}> //必須存在value和label字段
其中組建的寬度必須要設定，不然組建不能被撐開
defaultValue 組建顯示的默認值
onChange 組建操作回調函數, 返回操作選擇的value，當labelInValue為true時，同時返回節點文本信息
{ key: string, value: string }
a-select-option 組建的子組建，表示子選項
mode 設置select選擇模式，可選值 'default' | 'multiple' | 'tags' | 'combobox'
disabled 是否禁用
dropdownClassName 下拉菜單的類名，方便自定義下拉菜單
open 是否展開下拉菜單
defaultOpen 是否默認展開下拉菜單
labelInValue boolean 獲取節點文本信息，必要情況下需要取得的數據，需注意
4.DatePicker
基本使用
<a-date-picker></a-date-picker> onChange 操作回調函數，返回一個moment對象和日期字符串 返回‘2019-05-06’
function(date: moment, dateString: string)
Moment { _isAMomentObject: true _isUTC: false _pf: Object _locale: Locale _d: Mon May 06 2019 13:52:26 GMT+0800 (中國標准時間) _isValid: true } 2019-05-06"
disabled 禁用選擇
月份選擇
<a-month-picker @change="onChange" placeholder="Select month" /> onChange 回調函數 返回string 例2019-05
日期范圍選擇
<a-range-picker @change="onChange" /> 回調函數 返回數組 ["2019-05-18", "2019-05-21"]
周范圍選擇
<a-week-picker @change="onChange" placeholder="Select week" /> 回調函數 返回數組 2019-20周
placeholder 輸入框提示的文字
suffixIcon 選擇框后綴圖標 例<a-icon slot="suffixIcon" type="smile" />
defaultValue 用戶初始化選擇器，配合moment.js 一起使用, 默認是YYYY-MM-DD
format 用於格式化前端顯示，配合moment.js一起使用
showtime 日期選擇器和周選擇器顯示出時間選擇按鈕
size 選擇器大小，默認default
DatePicker
disabledTime 返回一個moment對象來阻止選擇
disabledDate(e) { console.log(e); return e && e > moment().endOf("day"); } showToday 增加選擇今天按鈕
圖片上傳
基本使用
<a-upload></a-upload> multiple 多文件上傳
name 文件類型
action 上傳地址
name 上傳字段名稱
headers 請求頭部，加密參數
directory 上傳文件夾
beforeUpload 上傳之前的鈎子，返回Promise對象, 通過在鈎子函數里進行圖片大小篩選, 圖片尺寸限制
(file, fileList) => boolean | Promise
uid: "vc-upload-1557388351914-40"
lastModified: 1544012461171
lastModifiedDate: Wed Dec 05 2018 20:21:01 GMT+0800 (中國標准時間)
name: "lance-asper-346206-unsplash.jpg"
size: 2573755
type: "image/jpeg"
percent: 12.094049635580973
originFileObj: File
status: "removed"
preview 預覽回調函數，listType為picture-card時有效果，通過thumburl賦值img進行預覽
uid: "vc-upload-1557388351914-68"
lastModified: 1557386813743
lastModifiedDate: Thu May 09 2019 15:26:53 GMT+0800 (中國標准時間)
name: "aa7904066853ecb2!400x400_big.jpg"
size: 20496
type: "image/jpeg"
percent: 100
originFileObj: File
status: "done"
thumbUrl: ...
withCredentials boolean 請求帶cookie
remove 移除回調
彈窗Modal
基本使用
<a-modal title="title" :confirmLoading="confirmLoading" :visible="modal1_Visiable" @ok="ok_handle_1" @cancel="cancelHandle1" :afterClose="afterClose" > <p>ddd</p> </a-modal> title string 彈窗標題
afterClose 彈窗完全關閉后的回調
cancelText 取消文本文字
closable 是否顯示右上角關閉按鈕
getContainer 指定掛載html節點
mask 是否顯示遮罩
okText 按鈕確定文字
okType 確認按鈕類型
destoryOnClose 關閉時銷毀彈窗里的子元素
visible 彈窗是否可見
zIndex 彈窗層級
ok function 彈窗確認回調
cancel function 彈窗取消回調
通知提醒Notification
Notification 掛載在全局對象上，通過函數內調用
this.$notification.open({ key, message: 'Notification Title', description: 'description.', }); description string|vNode 描述 可以是組件
message string|vNode 描述 可以是組件
placement string 4個位置可選 topLeft topRight bottomLeft bottomRight
icon 自定義圖標
onClose 關閉通知時的回調函數
onClick 點擊通知時的回調函數
key 當前通知的唯一標示
duration 默認4.5秒關閉，設置為null為不關閉
主要方法：
success
error
info
warning
warn
open
close
destory
config參數
btn vNode|function(h)
class 自定義ClassName
descrition string|vNode
duration number
icon vNode|function
key string
message string|vNode
placement string topLeft topRight bottomLeft bottomRight
style 自定義樣式
onClose 自定義關閉按鈕
onClick 點擊通知時觸發回調函數
MessageBox
使用方法和api和notification大同小異
Breadcrumb
基本使用
<a-breadcrumb separator="##"> <a-breadcrumb-item>Home</a-breadcrumb-item> <a-breadcrumb-item> <a href>Application Center</a> </a-breadcrumb-item> <a-breadcrumb-item> <a href>Application List</a> </a-breadcrumb-item> <a-breadcrumb-item>An Application</a-breadcrumb-item> </a-breadcrumb> separator 用作自定義分隔符
itemRender 自定義鏈接函數，配合vue-Router一起使用
routes 路由參數
Form 表單
基本使用
<a-form> <a-form-item :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" label="Note"> ... </a-form-item> </a-from> a-form api
layout 布局 horizontal | vertical | inline
submit 提交回調函數
在beforeCreated生命周期里注冊表單
this.form = this.$form.createForm(this, options) 以便后續在函數中進行調用
this.form api
getFieldsValue(string[]) 獲取表單注冊組件的輸入值
getFieldValue(string) 獲取單個控件的輸入值
isFieldsTouched 判斷任意控件是否經歷過數據收集
resetFields(string[]) 重置控件的值
setFields({ [filedName]: { value: any, errors: [Error] }}) 設置控件和錯誤狀態
setFieldsValue({fieldName: value}) 設置某一控件的值
validateFields([fieldNames: string[]], [options: object], callback: Function(errors)) 校驗並獲取一組輸入域的值與 Error，若 fieldNames 參數為空，則校驗全部組件
validateFieldsAndScroll 函數校驗，不通過則滾動到不通過菜單
CAUTION!!!
經過 getFieldDecorator或v-decorator 包裝的控件，表單控件會自動添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性），數據同步將被 Form 接管，這會導致以下結果：
你不再需要也不應該用 onChange 來做同步，但還是可以繼續監聽 onChange 等事件。
你不能用控件的 value defaultValue 等屬性來設置表單域的值，默認值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
你不應該用 v-model，可以使用 this.form.setFieldsValue 來動態改變表單值。
options參數
{ intialValue: string // 設置初始值 preserve: boolean // 即便字段不再使用，也保留該字段的值 trigger: 'change' // 收集子節點的值的時機 validateFirst: boolean //當某一規則校驗不通過時，是否停止剩下的規則的校驗 validateTrigger: 'change' // 校驗子節點值的時機 valuePropName: string // 子節點的值的屬性，如 Switch 的是 'checked' rules: object[] } a-form-item
label input對應的名稱
label-col label對應的寬度
wrapper-col input輸入框對應的寬度
validateStatus 驗證狀態 可選 'success', 'warning', 'error', 'validating'
help 輸入欄的驗證提示
has-feedback 輸入框反饋提示
extra string|slot 額外的提示信息，和 help 類似，當需要錯誤信息和提示文案同時出現時，可以使用這個。
required boolean 是否必填，如不設置，則會根據校驗規則自動生成
colon boolean 配合 label 屬性使用，表示是否顯示 label 后面的冒號
a-input
placeholder 輸入框填充
v-decorator 輸入框對應的驗證規則
作者：rub1cky