當前位置:成語大全網 - 新華字典 - 2019-05-10 antd-design-vue 組件文檔

2019-05-10 antd-design-vue 組件文檔

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 輸入框對應的驗證規則