antd-design-vue 部分組建參考文檔
1.組件
1.1 radio 賦值 取值 傳值 校驗
1.2 checkbox 賦值 取值 傳值 校驗
1.3 select 賦值 取值 傳值 校驗
1.4 日期組件 賦值 取值 傳值 默認(rèn)值 格式
1.5 組件必填標(biāo)志
1.6 圖片上傳組件 ，格式限制 大小限制 查看大圖 多圖上傳 多圖展示 圖片組件增刪改查
1.7 附件上傳組件
1.8 查詢區(qū)域組件
1.9 組件與組件文案的排列(表單區(qū)汤纸，查詢區(qū)等等)
1.10 提示組件
1.11 彈框組件以及如何配置(例如彈出位置 大小 傳參 回調(diào) 等等)
完整測試代碼
NOTICE
- Node版本為 V12, node-sass需要升級到4.12.0
npm install node-sass@4.12.0
1. radio
基本使用
<a-radio value="apple" checked defaultChecked >Apple</a-radio>
value 選中參數(shù)值
checked 是否選中
defaultChecked 是否默認(rèn)選中
通過配合 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
可以設(shè)置 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 初始狀態(tài)
disabled 選中失效
change回調(diào)函數(shù)
配合 a-checkbox-group 進(jìn)行使用時，進(jìn)行一組選框渲染
options 選框數(shù)組
Array<{ label: string value: string disabled?: boolean, onChange?: function }>
onChange事件會返回數(shù)組中 選中的元素的value值數(shù)組她混，直接返回的是value值組成的數(shù)組捌木，按選中順序
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下拉的數(shù)據(jù)，數(shù)據(jù)以數(shù)組形式傳入绑雄，數(shù)組結(jié)構(gòu)航夺，當(dāng)傳入的數(shù)據(jù)過大，要進(jìn)行截取渲染腥光，不然會卡頓
array<{value, label, [disabled, key, title]}> //必須存在value和label字段
其中組建的寬度必須要設(shè)定丁存，不然組建不能被撐開
defaultValue 組建顯示的默認(rèn)值
onChange 組建操作回調(diào)函數(shù), 返回操作選擇的value，當(dāng)labelInValue為true時柴我，同時返回節(jié)點文本信息
{ key: string, value: string }
a-select-option 組建的子組建解寝，表示子選項
mode 設(shè)置select選擇模式，可選值 'default' | 'multiple' | 'tags' | 'combobox'
disabled 是否禁用
dropdownClassName 下拉菜單的類名艘儒，方便自定義下拉菜單
open 是否展開下拉菜單
defaultOpen 是否默認(rèn)展開下拉菜單
labelInValue boolean 獲取節(jié)點文本信息聋伦，必要情況下需要取得的數(shù)據(jù)夫偶，需注意
4.DatePicker
基本使用
<a-date-picker></a-date-picker>
onChange 操作回調(diào)函數(shù)，返回一個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 (中國標(biāo)準(zhǔn)時間) _isValid: true } 2019-05-06"
disabled 禁用選擇
月份選擇
<a-month-picker @change="onChange" placeholder="Select month" />
onChange 回調(diào)函數(shù) 返回string 例2019-05
日期范圍選擇
<a-range-picker @change="onChange" />
回調(diào)函數(shù) 返回數(shù)組 ["2019-05-18", "2019-05-21"]
周范圍選擇
<a-week-picker @change="onChange" placeholder="Select week" />
回調(diào)函數(shù) 返回數(shù)組 2019-20周
placeholder 輸入框提示的文字
suffixIcon 選擇框后綴圖標(biāo) 例<a-icon slot="suffixIcon" type="smile" />
defaultValue 用戶初始化選擇器觉增，配合moment.js 一起使用, 默認(rèn)是YYYY-MM-DD
format 用于格式化前端顯示兵拢，配合moment.js一起使用
showtime 日期選擇器和周選擇器顯示出時間選擇按鈕
size 選擇器大小，默認(rèn)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 請求頭部逾礁，加密參數(shù)
directory 上傳文件夾
beforeUpload 上傳之前的鉤子说铃，返回Promise對象, 通過在鉤子函數(shù)里進(jìn)行圖片大小篩選, 圖片尺寸限制
(file, fileList) => boolean | Promise
uid: "vc-upload-1557388351914-40"
lastModified: 1544012461171
lastModifiedDate: Wed Dec 05 2018 20:21:01 GMT+0800 (中國標(biāo)準(zhǔn)時間)
name: "lance-asper-346206-unsplash.jpg"
size: 2573755
type: "image/jpeg"
percent: 12.094049635580973
originFileObj: File
status: "removed"
preview 預(yù)覽回調(diào)函數(shù)，listType為picture-card時有效果嘹履，通過thumburl賦值img進(jìn)行預(yù)覽
uid: "vc-upload-1557388351914-68"
lastModified: 1557386813743
lastModifiedDate: Thu May 09 2019 15:26:53 GMT+0800 (中國標(biāo)準(zhǔn)時間)
name: "aa7904066853ecb2!400x400_big.jpg"
size: 20496
type: "image/jpeg"
percent: 100
originFileObj: File
status: "done"
thumbUrl: ...
withCredentials boolean 請求帶cookie
remove 移除回調(diào)
彈窗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 彈窗標(biāo)題
afterClose 彈窗完全關(guān)閉后的回調(diào)
cancelText 取消文本文字
closable 是否顯示右上角關(guān)閉按鈕
getContainer 指定掛載html節(jié)點
mask 是否顯示遮罩
okText 按鈕確定文字
okType 確認(rèn)按鈕類型
destoryOnClose 關(guān)閉時銷毀彈窗里的子元素
visible 彈窗是否可見
zIndex 彈窗層級
ok function 彈窗確認(rèn)回調(diào)
cancel function 彈窗取消回調(diào)
通知提醒Notification
Notification 掛載在全局對象上腻扇，通過函數(shù)內(nèi)調(diào)用
this.$notification.open({
key,
message: 'Notification Title',
description: 'description.',
});
description string|vNode 描述 可以是組件
message string|vNode 描述 可以是組件
placement string 4個位置可選 topLeft topRight bottomLeft bottomRight
icon 自定義圖標(biāo)
onClose 關(guān)閉通知時的回調(diào)函數(shù)
onClick 點擊通知時的回調(diào)函數(shù)
key 當(dāng)前通知的唯一標(biāo)示
duration 默認(rèn)4.5秒關(guān)閉，設(shè)置為null為不關(guān)閉
主要方法：
success
error
info
warning
warn
open
close
destory
config參數(shù)
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 自定義關(guān)閉按鈕
onClick 點擊通知時觸發(fā)回調(diào)函數(shù)
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 自定義鏈接函數(shù)砾嫉，配合vue-Router一起使用
routes 路由參數(shù)
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 提交回調(diào)函數(shù)
在beforeCreated生命周期里注冊表單
this.form = this.$form.createForm(this, options)
以便后續(xù)在函數(shù)中進(jìn)行調(diào)用
this.form api
getFieldsValue(string[]) 獲取表單注冊組件的輸入值
getFieldValue(string) 獲取單個控件的輸入值
isFieldsTouched 判斷任意控件是否經(jīng)歷過數(shù)據(jù)收集
resetFields(string[]) 重置控件的值
setFields({ [filedName]: { value: any, errors: [Error] }}) 設(shè)置控件和錯誤狀態(tài)
setFieldsValue({fieldName: value}) 設(shè)置某一控件的值
validateFields([fieldNames: string[]], [options: object], callback: Function(errors)) 校驗并獲取一組輸入域的值與 Error幼苛，若 fieldNames 參數(shù)為空，則校驗全部組件
validateFieldsAndScroll 函數(shù)校驗焕刮，不通過則滾動到不通過菜單
CAUTION!!!
經(jīng)過 getFieldDecorator或v-decorator 包裝的控件舶沿，表單控件會自動添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性），數(shù)據(jù)同步將被 Form 接管配并，這會導(dǎo)致以下結(jié)果：
你不再需要也不應(yīng)該用 onChange 來做同步括荡，但還是可以繼續(xù)監(jiān)聽 onChange 等事件。
你不能用控件的 value defaultValue 等屬性來設(shè)置表單域的值溉旋，默認(rèn)值可以用 getFieldDecorator 或 v-decorator 里的 initialValue一汽。
你不應(yīng)該用 v-model，可以使用 this.form.setFieldsValue 來動態(tài)改變表單值低滩。
options參數(shù)
{
intialValue: string // 設(shè)置初始值
preserve: boolean // 即便字段不再使用，也保留該字段的值
trigger: 'change' // 收集子節(jié)點的值的時機(jī)
validateFirst: boolean //當(dāng)某一規(guī)則校驗不通過時岩喷，是否停止剩下的規(guī)則的校驗
validateTrigger: 'change' // 校驗子節(jié)點值的時機(jī)
valuePropName: string // 子節(jié)點的值的屬性恕沫，如 Switch 的是 'checked'
rules: object[]
}
a-form-item
label input對應(yīng)的名稱
label-col label對應(yīng)的寬度
wrapper-col input輸入框?qū)?yīng)的寬度
validateStatus 驗證狀態(tài) 可選 'success', 'warning', 'error', 'validating'
help 輸入欄的驗證提示
has-feedback 輸入框反饋提示
extra string|slot 額外的提示信息，和 help 類似纱意，當(dāng)需要錯誤信息和提示文案同時出現(xiàn)時婶溯，可以使用這個。
required boolean 是否必填偷霉，如不設(shè)置迄委，則會根據(jù)校驗規(guī)則自動生成
colon boolean 配合 label 屬性使用，表示是否顯示 label 后面的冒號
a-input
placeholder 輸入框填充
v-decorator 輸入框?qū)?yīng)的驗證規(guī)則
