Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Vue2 已停止開發,若您想繼續使用以便支援 IE11,建議熟讀 https://www.herodevs.com/support/nes-vue
Name | Value | Type | Default | Required | Note |
---|---|---|---|---|---|
Name | Value | Type | Default | Required | Note |
---|
Name | Value | Type | Default | Required | Note |
---|
Name | Value | Type | Default | Required | Note |
---|
id
String
random
title
{ text } or template
String
open
Boolean
false
展開 bpa-accordion-item
header | { text } or template | String |
footer | { text } or template | String |
nopadding | Boolean | padding=0 |
shadow | Boolean | false | show/hide shadow |
to | { url path } | Vue Route |
title | String | <a title="title"> |
theme | primary, success, warning, danger, primary-ghost, success-ghost, warning-ghost, danger-ghost | String |
disabled | Boolean |
loading | Boolean |
size | small, large | String |
Name | Value | Type | Default | Required | Note |
---|
id | String | random |
header | { text } or template | String |
footer | { text } or template | String |
visible | Boolean | false |
clickoutside | Boolean | true |
Name | Value | Type | Default | Required | Note |
---|---|---|---|---|---|
Name | Parameters |
---|---|
Name | Value | Type | Default | Required | Note |
---|---|---|---|---|---|
Name | Parameters | Note |
---|---|---|
model
Object
random
rules
Object (async-validator)
autofocus
Boolean
true
自動聚焦
validate
Function () : Promise({valid: booleaml; error: object})
prop
String
label
String
labelFor
String
required
Boolean
error
Boolean
hint
String
rules
[Object, Array]
model
[Object, Array, Boolean, String, Number]
validate
{ valid: boolean, message: string }
Name | Value | Type | Default | Required | Note |
---|---|---|---|---|---|
Name | Value | Type | Default | Required | Note |
---|---|---|---|---|---|
Name | Value | Type | Default | Required | Note |
---|
Name | Parameters | Description |
---|
Name | Value | Type | Default | Required | Note |
---|
Name | Value | Type | Default | Required | Note |
---|
Name |
---|
id
value
[ String, Number ]
size
small, large
type
placeholder
disabled
required
readonly
error
accesskey
disabledClear
id
String
random
size
small, large
String
v-model
String
options
Array<{ label: string; type?: ‘link’ or ‘external-link’; url: string }>
disabled
Boolean
placeholder
String
theme
primary,
success,
warning,
danger,
primary-ghost,
success-ghost,
warning-ghost,
danger-ghost
String
optionWidth
String
fixed
Boolean
v-slot:prefix
v-slot:affix
listboxClass
String
可以在 listbox 增加 classname
total | Number | 總共多少項目 |
currentPage | Number | 設定目前所在頁面 |
pagerCount | Number | 5 | 設定顯示多少個分頁碼 |
pageSizeOption | Array | [ { label: '10', value: 10 }, { label: '20', value: 20 }, { label: '50', value: 50 }, { label: '100', value: 100 }, ] | 可以設定每頁顯示多少個項目的下拉式選單 |
pageSize | Number | 10 | 每頁多少個項目 |
layout | Array | ['total_item', 'total_page', 'page_size', 'first', 'last', 'jump'] | 設定要顯示的元件 |
size | String | 按鈕大小 |
sync-page-param | {currentPage: number} | 換頁時觸發 |
change:page | 換頁時觸發 |
change:pageSize |
id | String | random |
theme | primary, success, warning, danger, primary-ghost, success-ghost, warning-ghost, danger-ghost | String |
title | String | 'Popover' |
nopadding | Boolean |
size | small, large | String |
disabled | String, Boolean |
prefix | emoji, text, Html(danger) | String | text 或 html(但有危險性) |
theme | primary, success, warning, danger | String | primary |
dangerHTML | Boolean | false | 使用 html tag |
msg | String |
duration | Number | 200 | 出現在螢幕上的時間 |
vOffset | Number | 20 |
onClose | Function | null | 關閉後觸發 |
Msg( msg | options ) |
Msg.primary( msg | options ) |
Msg.success( msg | options ) |
Msg.warning( msg | options ) |
Msg.danger( msg | options ) |
Name | Value | Type | Default | Required | Note |
---|---|---|---|---|---|
Name | Value | Type | Default | Required | Note |
---|
Name | Value | Type | Default | Required | Note |
---|
Name | Parameters | Desciption |
---|
Name | Value | Type | Default | Required | Note |
---|
Name | Parameters | Desciption |
---|
id
String
random
name
String
disabled
Boolean
value
String
model
String
v-model / value | String |
name | String |
prefixIcon | String |
label | String |
affixIcon | String |
badge | String || Number |
input | 當頁籤變更時 |
id | String | random |
labelText | String |
v-slot:close-text | String | 關閉/OFF |
v-slot:open-text | String | 開啟/ON |
change |
Name | Value | Type | Default | Required | Note |
---|---|---|---|---|---|
Name | Value | Type | Default | Required | Note |
---|---|---|---|---|---|
Name | Value | Type | Default | Required | Note |
---|---|---|---|---|---|
Name | Parameters | Desciption |
---|---|---|
Name | Parameters | Desciption |
---|---|---|
text
String || Number
data
Array
label
String
show-checkbox
Boolean
false
可以勾選節點
default-expand-all
Boolean
false
預設展開所有節點
id
Number
label
String || Number
children
Array
disabled
Boolean
false
getCheckedNodes
Array
回傳選擇的節點
getCheckedKeys
Array
回傳選擇的節點 key(id)
setCheckedNodes
Array
使用 key(id) (Object) 設置被勾選的節點
setCheckedKeys
Array
使用 key(id) 設置被勾選的節點
resetChecked
清除所有勾選節點
node-check
(data, component)
勾選/取消勾選節點
node-click/node-expand
(data, component)
當節點被勾選/展開
建議直接觀看設計檔案
Name | Value | Type | Default | Required | Note |
---|---|---|---|---|---|
id
String
random
value
String
v-model
Array
disabled
Boolean
介紹使用 Select 下拉選項元件
Select 下拉選擇,用在讓使用者針對選取的資料做進一步的篩選,或是與選項按鈕一樣,選一個特定值。點擊按鈕會出現一個懸浮區域,裡面是一系列的選項,外觀與 Dropdown 相似,但與 Dropdown 最大的不同之處在於 Select 點擊選項後,值變成選項內容,並且關閉懸浮區域。
為了不讓外層的 position 狀態影響下拉式選單彈出的位置,需要加上 fixed 修正。
在表單項目 bpa-form-item 裡面使用時,需要一起做搭配。
預設 0.8 秒後啟動 autocomplete 過濾選項,若要手動搜尋:使用 "@search"
Name | Value | Type | Default | Required | Note |
---|---|---|---|---|---|
Name | Paramaters | Description |
---|---|---|
id
String
random
size
small, large
String
v-model
String
options
Array<{ label: string, value: any }> | Array<{ label: string, type: 'group', options: Option[] >
disabled
Boolean
false
disabledClear
Boolean
false
隱藏清除按鈕
placeholder
String
請選擇/select
theme
primary,
success,
warning,
danger,
primary-ghost,
success-ghost,
warning-ghost,
danger-ghost
String
optionWidth
String
fixed
Boolean
false
v-slot:prefix
提示文字的前方客製化區域
v-slot:affix
提示文字的前方客製化區域
toolbar
Array<'search'>
工具列,目前支援 搜尋 search 功能
multiple
'accordion' or undefined
多選,無需給值,若欲摺疊選項則給值 accordion
listboxClass
String
可以在 listbox 增加 classname
search
keyword
搜尋輸入值改變時
input