NOTICE
基本使用
value 選中參數值
checked 是否選中
defaultChecked 是否默認選中
通過配合 a-radio-group 組建獲取和賦值
a-radio-group 的change事件獲取event事件
e.target
如果a-radio-group的子元素是a-radio-button
可以設置 buttonStyle 和 size 屬性
基本使用
checkbox 通過change屬性獲取event事件
通過checked值判斷是否選中
defaultChecked 初始狀態
disabled 選中失效
change 回調函數
配合 a-checkbox-group 進行使用時,進行壹組選框渲染
options 選框數組
onChange事件會返回數組中 選中的元素的value值數組, 直接返回的是value值組成的數組,按選中順序
基本使用
options 用來傳入select下拉的數據,數據以數組形式傳入,數組結構, 當傳入的數據過大,要進行截取渲染,不然會卡頓
其中組建的寬度必須要設定,不然組建不能被撐開
defaultValue 組建顯示的默認值
onChange 組建操作回調函數, 返回操作選擇的value,當labelInValue為true時,同時返回節點文本信息
a-select-option 組建的子組建,表示子選項
mode 設置select選擇模式,可選值 'default' | 'multiple' | 'tags' | 'combobox'
disabled 是否禁用
dropdownClassName 下拉菜單的類名,方便自定義下拉菜單
open 是否展開下拉菜單
defaultOpen 是否默認展開下拉菜單
labelInValue boolean 獲取節點文本信息, 必要情況下需要取得的數據,需註意
基本使用
onChange 操作回調函數,返回壹個moment對象和日期字符串 返回‘2019-05-06’
disabled 禁用選擇
onChange 回調函數 返回string 例 2019-05
回調函數 返回數組 ["2019-05-18", "2019-05-21"]
回調函數 返回數組 2019-20周
placeholder 輸入框提示的文字
suffixIcon 選擇框後綴圖標 例 <a-icon slot="suffixIcon" type="smile" />
defaultValue 用戶初始化選擇器,配合moment.js 壹起使用, 默認是 YYYY-MM-DD
format 用於格式化前端顯示,配合moment.js壹起使用
showtime 日期選擇器和周選擇器顯示出時間選擇按鈕
size 選擇器大小,默認default
disabledTime 返回壹個moment對象來阻止選擇
showToday 增加選擇今天按鈕
基本使用
multiple 多文件上傳
name 文件類型
action 上傳地址
name 上傳字段名稱
headers 請求頭部,加密參數
directory 上傳文件夾
beforeUpload 上傳之前的鉤子,返回Promise對象, 通過在鉤子函數裏進行圖片大小篩選, 圖片尺寸限制
preview 預覽回調函數,listType為picture-card時有效果,通過thumburl賦值img進行預覽
withCredentials boolean 請求帶cookie
remove 移除回調
基本使用
title string 彈窗標題
afterClose 彈窗完全關閉後的回調
cancelText 取消文本文字
closable 是否顯示右上角關閉按鈕
getContainer 指定掛載html節點
mask 是否顯示遮罩
okText 按鈕確定文字
okType 確認按鈕類型
destoryOnClose 關閉時銷毀彈窗裏的子元素
visible 彈窗是否可見
zIndex 彈窗層級
ok function 彈窗確認回調
cancel function 彈窗取消回調
Notification 掛載在全局對象上,通過函數內調用
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 點擊通知時觸發回調函數
使用方法和api和notification大同小異
基本使用
separator 用作自定義分隔符
itemRender 自定義鏈接函數,配合vue-Router壹起使用
routes 路由參數
基本使用
layout 布局 horizontal | vertical | inline
submit 提交回調函數
在beforeCreated生命周期裏註冊表單
以便後續在函數中進行調用
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 函數校驗,不通過則滾動到不通過菜單
options參數
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 後面的冒號
placeholder 輸入框填充
v-decorator 輸入框對應的驗證規則