w-component-vue

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>WGroupTags - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="styles/prettify.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc.css"> <script src="scripts/nav.js" defer></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav > <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-WAggridVueDyn.html">WAggridVueDyn</a></li><li><a href="module-WBadge.html">WBadge</a></li><li><a href="module-WButtonChip.html">WButtonChip</a></li><li><a href="module-WButtonCircle.html">WButtonCircle</a></li><li><a href="module-WCheckbox.html">WCheckbox</a></li><li><a href="module-WCkeditorVueDyn.html">WCkeditorVueDyn</a></li><li><a href="module-WColorPickAlpha.html">WColorPickAlpha</a></li><li><a href="module-WColorPickHexagon.html">WColorPickHexagon</a></li><li><a href="module-WColorPickHexagonGray.html">WColorPickHexagonGray</a></li><li><a href="module-WColorPickHsv.html">WColorPickHsv</a></li><li><a href="module-WColorPickHue.html">WColorPickHue</a></li><li><a href="module-WColorPickStripe.html">WColorPickStripe</a></li><li><a href="module-WColorSelect.html">WColorSelect</a></li><li><a href="module-WColorSelectInput.html">WColorSelectInput</a></li><li><a href="module-WColorSelectPanel.html">WColorSelectPanel</a></li><li><a href="module-WColorSelectPanelBlock.html">WColorSelectPanelBlock</a></li><li><a href="module-WColorSelectPanelHsva.html">WColorSelectPanelHsva</a></li><li><a href="module-WConfirm.html">WConfirm</a></li><li><a href="module-WDialog.html">WDialog</a></li><li><a href="module-WDrawer.html">WDrawer</a></li><li><a href="module-WDropfiles.html">WDropfiles</a></li><li><a href="module-WDynamicList.html">WDynamicList</a></li><li><a href="module-WEchartsVueDyn.html">WEchartsVueDyn</a></li><li><a href="module-WExplorer.html">WExplorer</a></li><li><a href="module-WGroupBaggage.html">WGroupBaggage</a></li><li><a href="module-WGroupChipCheck.html">WGroupChipCheck</a></li><li><a href="module-WGroupChipRadio.html">WGroupChipRadio</a></li><li><a href="module-WGroupDragdrop.html">WGroupDragdrop</a></li><li><a href="module-WGroupIconCheck.html">WGroupIconCheck</a></li><li><a href="module-WGroupIconRadio.html">WGroupIconRadio</a></li><li><a href="module-WGroupTags.html">WGroupTags</a></li><li><a href="module-WHighchartsBitmapDyn.html">WHighchartsBitmapDyn</a></li><li><a href="module-WHighchartsVueDyn.html">WHighchartsVueDyn</a></li><li><a href="module-WHighstockVueDyn.html">WHighstockVueDyn</a></li><li><a href="module-WIcon.html">WIcon</a></li><li><a href="module-WIconLoading.html">WIconLoading</a></li><li><a href="module-WImageCascadingDyn.html">WImageCascadingDyn</a></li><li><a href="module-WImageLazy.html">WImageLazy</a></li><li><a href="module-WImageViewerDyn.html">WImageViewerDyn</a></li><li><a href="module-WInputCheckbox.html">WInputCheckbox</a></li><li><a href="module-WInputRadio.html">WInputRadio</a></li><li><a href="module-WJsonView.html">WJsonView</a></li><li><a href="module-WLeafletVueDyn.html">WLeafletVueDyn</a></li><li><a href="module-WLevelGrade.html">WLevelGrade</a></li><li><a href="module-WListCheck.html">WListCheck</a></li><li><a href="module-WListExpand.html">WListExpand</a></li><li><a href="module-WListExpandItem.html">WListExpandItem</a></li><li><a href="module-WListHorizontal.html">WListHorizontal</a></li><li><a href="module-WListItem.html">WListItem</a></li><li><a href="module-WListRadio.html">WListRadio</a></li><li><a href="module-WListVertical.html">WListVertical</a></li><li><a href="module-WPanelAvatar.html">WPanelAvatar</a></li><li><a href="module-WPanelBulge.html">WPanelBulge</a></li><li><a href="module-WPanelDivideHorizontal.html">WPanelDivideHorizontal</a></li><li><a href="module-WPanelDivideVertical.html">WPanelDivideVertical</a></li><li><a href="module-WPanelLabelItem.html">WPanelLabelItem</a></li><li><a href="module-WPanelScale.html">WPanelScale</a></li><li><a href="module-WPanelScrolly.html">WPanelScrolly</a></li><li><a href="module-WPanelScrollyCore.html">WPanelScrollyCore</a></li><li><a href="module-WPanelStripe.html">WPanelStripe</a></li><li><a href="module-WPopup.html">WPopup</a></li><li><a href="module-WPopupEditText.html">WPopupEditText</a></li><li><a href="module-WProgressBar.html">WProgressBar</a></li><li><a href="module-WProgressCircle.html">WProgressCircle</a></li><li><a href="module-WQuillVueDyn.html">WQuillVueDyn</a></li><li><a href="module-WSegmentsVertical.html">WSegmentsVertical</a></li><li><a href="module-WShellBottomLine.html">WShellBottomLine</a></li><li><a href="module-WShellEllipse.html">WShellEllipse</a></li><li><a href="module-WSlider.html">WSlider</a></li><li><a href="module-WSwitch.html">WSwitch</a></li><li><a href="module-WTableDyn.html">WTableDyn</a></li><li><a href="module-WText.html">WText</a></li><li><a href="module-WTextCore.html">WTextCore</a></li><li><a href="module-WTextInt.html">WTextInt</a></li><li><a href="module-WTextIntCore.html">WTextIntCore</a></li><li><a href="module-WTextSelect.html">WTextSelect</a></li><li><a href="module-WTextSuggest.html">WTextSuggest</a></li><li><a href="module-WTextSuggestCore.html">WTextSuggestCore</a></li><li><a href="module-WTextarea.html">WTextarea</a></li><li><a href="module-WTextareaCore.html">WTextareaCore</a></li><li><a href="module-WThreejsVueDyn.html">WThreejsVueDyn</a></li><li><a href="module-WTimeday.html">WTimeday</a></li><li><a href="module-WTimedayCore.html">WTimedayCore</a></li><li><a href="module-WTimedayCoreRe.html">WTimedayCoreRe</a></li><li><a href="module-WTimedayRange.html">WTimedayRange</a></li><li><a href="module-WTimedayRangeCore.html">WTimedayRangeCore</a></li><li><a href="module-WTimeminute.html">WTimeminute</a></li><li><a href="module-WTimeminuteCore.html">WTimeminuteCore</a></li><li><a href="module-WTimeminuteRange.html">WTimeminuteRange</a></li><li><a href="module-WTimeminuteRangeCore.html">WTimeminuteRangeCore</a></li><li><a href="module-WTinymceVueDyn.html">WTinymceVueDyn</a></li><li><a href="module-WTooltip.html">WTooltip</a></li><li><a href="module-WTree.html">WTree</a></li><li><a href="module-WTreeIconCheckbox.html">WTreeIconCheckbox</a></li><li><a href="module-WTreeIconToggle.html">WTreeIconToggle</a></li><li><a href="module-WVditorDyn.html">WVditorDyn</a></li></ul><h3>Global</h3><ul><li><a href="global.html#binarySearch">binarySearch</a></li><li><a href="global.html#convertColor">convertColor</a></li></ul> </nav> <div id="main"> <h1 class="page-title">WGroupTags</h1> <section> <header> </header> <article> <div class="container-overview"> <dl class="details"> <dt class="tag-description">Description:</dt> <dd class="tag-description"><ul class="dummy"><li></p></div></div> <h3 class="subsection-title" style="margin-top: 1em" data-jsdoc-vuejs="section-props">Props</h3> <table data-jsdoc-vuejs="table-props"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Default value</th> <th>Required?</th> <th>Description</th> </tr> </thead> <tbody><tr> <td><code>value</code></td> <td>Array</td> <td><code>[]</code></td> <td>No</td> <td>輸入項目的字串陣列或物件陣列，預設[]</td> </tr><tr> <td><code>enableActive</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入項目是否使用點擊成為活耀狀態布林值，預設false</td> </tr><tr> <td><code>valueActive</code></td> <td>Object</td> <td><code>null</code></td> <td>No</td> <td>輸入活耀項目物件，預設null</td> </tr><tr> <td><code>keyText</code></td> <td>String</td> <td><code>'text'</code></td> <td>No</td> <td>輸入當項目為物件時，存放顯示文字之欄位字串，預設'text'</td> </tr><tr> <td><code>keyIcon</code></td> <td>String</td> <td><code>'icon'</code></td> <td>No</td> <td>輸入當項目為物件時，存放圖標之欄位字串，預設'icon'</td> </tr><tr> <td><code>keyTooltip</code></td> <td>String</td> <td><code>'tooltip'</code></td> <td>No</td> <td>輸入當項目為物件時，存放提示之欄位字串，預設'tooltip'</td> </tr><tr> <td><code>enableColorsFromItem</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入當當項目為物件時是否使用其內相關顏色設定用以覆蓋預設值布林值，預設false</td> </tr><tr> <td><code>icon</code></td> <td>String</td> <td><code>''</code></td> <td>No</td> <td>輸入左側圖標字串，預設''</td> </tr><tr> <td><code>iconColor</code></td> <td>String</td> <td><code>'black'</code></td> <td>No</td> <td>輸入圖標顏色字串，預設'black'</td> </tr><tr> <td><code>iconColorHover</code></td> <td>String</td> <td><code>'grey darken-3'</code></td> <td>No</td> <td>輸入滑鼠移入時圖標顏色字串，預設'grey darken-3'</td> </tr><tr> <td><code>iconColorActive</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入主動模式時圖標顏色字串，預設'white'</td> </tr><tr> <td><code>iconSize</code></td> <td>Number</td> <td><code>22</code></td> <td>No</td> <td>輸入左側圖標之尺寸數字，單位px，預設22</td> </tr><tr> <td><code>progColor</code></td> <td>String</td> <td><code>'rgba(150,150,150,0.4)'</code></td> <td>No</td> <td>輸入進度條背景顏色字串，預設'rgba(150,150,150,0.4)'</td> </tr><tr> <td><code>progBackgroundColor</code></td> <td>String</td> <td><code>'rgba(150,150,150,0.075)'</code></td> <td>No</td> <td>輸入進度條顏色字串，預設'rgba(150,150,150,0.075)'</td> </tr><tr> <td><code>textColor</code></td> <td>String</td> <td><code>'black'</code></td> <td>No</td> <td>輸入文字顏色字串，預設'black'</td> </tr><tr> <td><code>textColorHover</code></td> <td>String</td> <td><code>'grey darken-3'</code></td> <td>No</td> <td>輸入滑鼠移入時文字顏色字串，預設'grey darken-3'</td> </tr><tr> <td><code>textColorActive</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入主動模式時文字顏色字串，預設'white'</td> </tr><tr> <td><code>textFontSize</code></td> <td>String</td> <td><code>'0.85rem'</code></td> <td>No</td> <td>輸入文字字型大小字串，預設'0.85rem'</td> </tr><tr> <td><code>borderRadius</code></td> <td>Number</td> <td><code>30</code></td> <td>No</td> <td>輸入框圓角度數字，單位為px，預設30</td> </tr><tr> <td><code>borderColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入邊框顏色字串，預設'transparent'</td> </tr><tr> <td><code>borderColorHover</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入滑鼠移入時邊框顏色字串，預設'transparent'</td> </tr><tr> <td><code>borderColorActive</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入主動模式時邊框顏色字串，預設'transparent'</td> </tr><tr> <td><code>backgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>backgroundColorHover</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.25)'</code></td> <td>No</td> <td>輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.25)'</td> </tr><tr> <td><code>backgroundColorActive</code></td> <td>String</td> <td><code>'orange'</code></td> <td>No</td> <td>輸入主動模式時背景顏色字串，預設'orange'</td> </tr><tr> <td><code>marginStyle</code></td> <td>Object</td> <td><code>{top:10,bottom:10,left:0,right:10}</code></td> <td>No</td> <td>輸入外距設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{top:10,bottom:10,left:0,right:10}</td> </tr><tr> <td><code>shadow</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入是否顯示陰影布林值，預設true</td> </tr><tr> <td><code>shadowStyle</code></td> <td>String</td> <td><code>''</code></td> <td>No</td> <td>輸入陰影顏色字串，預設值詳見props</td> </tr><tr> <td><code>shadowActive</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入主動模式時是否顯示陰影布林值，預設true</td> </tr><tr> <td><code>shadowActiveStyle</code></td> <td>String</td> <td><code>''</code></td> <td>No</td> <td>輸入主動模式時陰影顏色字串，預設值詳見props</td> </tr><tr> <td><code>paddingStyle</code></td> <td>Object</td> <td><code>{v:3,h:15}</code></td> <td>No</td> <td>輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:3,h:15}</td> </tr><tr> <td><code>shiftLeft</code></td> <td>Number</td> <td><code>0</code></td> <td>No</td> <td>輸入左側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如圖標與左側邊框距離，單位px，預設0</td> </tr><tr> <td><code>shiftRight</code></td> <td>Number</td> <td><code>0</code></td> <td>No</td> <td>輸入右側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如關閉圖標與右側邊框距離，單位px，預設0</td> </tr><tr> <td><code>suggests</code></td> <td>Array</td> <td><code>[]</code></td> <td>No</td> <td>輸入可選(建議)項目陣列，預設[]</td> </tr><tr> <td><code>keySuggestText</code></td> <td>String</td> <td><code>'text'</code></td> <td>No</td> <td>輸入當可選(建議)項目為物件時，存放顯示文字之欄位字串，預設'text'</td> </tr><tr> <td><code>placeholder</code></td> <td>String</td> <td><code>''</code></td> <td>No</td> <td>輸入無文字時的替代字符字串，預設''</td> </tr><tr> <td><code>noResultsText</code></td> <td>String</td> <td><code>'No results'</code></td> <td>No</td> <td>輸入無過濾結果字串，預設'No results'</td> </tr><tr> <td><code>addMode</code></td> <td>String</td> <td><code>'auto'</code></td> <td>No</td> <td>輸入新增模式字串，可使用'auto'、'input'、'button'，預設'auto'</td> </tr><tr> <td><code>inputTextWidth</code></td> <td>Number</td> <td><code>150</code></td> <td>No</td> <td>輸入新增按鈕或輸入框區寬度數字，單位px，預設150</td> </tr><tr> <td><code>inputKeyText</code></td> <td>String</td> <td><code>'text'</code></td> <td>No</td> <td>輸入若可選(建議)項目為元素陣列時，輸入框之提取選擇項目物件內鍵值字串，預設'text'</td> </tr><tr> <td><code>inputTextFontSize</code></td> <td>String</td> <td><code>'0.85rem'</code></td> <td>No</td> <td>輸入輸入框文字大小字串，預設'0.85rem'</td> </tr><tr> <td><code>inputTextColor</code></td> <td>String</td> <td><code>'black'</code></td> <td>No</td> <td>輸入輸入框文字顏色字串，預設'black'</td> </tr><tr> <td><code>inputTextBackgroundColor</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入輸入框背景顏色字串，預設'white'</td> </tr><tr> <td><code>inputTextBackgroundColorHover</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入滑鼠移入時輸入框背景顏色字串，預設'white'</td> </tr><tr> <td><code>inputTextBackgroundColorFocus</code></td> <td>String</td> <td><code>'grey lighten-5'</code></td> <td>No</td> <td>輸入取得焦點時輸入框背景顏色字串，預設'grey lighten-5'</td> </tr><tr> <td><code>inputTextBorderColor</code></td> <td>String</td> <td><code>'grey lighten-1'</code></td> <td>No</td> <td>輸入輸入框邊框顏色字串，預設'grey lighten-1'</td> </tr><tr> <td><code>inputTextBorderColorHover</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入滑鼠移入時輸入框邊框字串，預設'grey'</td> </tr><tr> <td><code>inputTextBorderColorFocus</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入取得焦點時輸入框文字邊框字串，預設'grey'</td> </tr><tr> <td><code>inputTextButtonIcon</code></td> <td>String</td> <td><code>mdiPlusCircle</code></td> <td>No</td> <td>輸入新增按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiPlusCircle</td> </tr><tr> <td><code>inputTextButtonColor</code></td> <td>String</td> <td><code>'grey lighten-1'</code></td> <td>No</td> <td>輸入輸入框按鈕顏色字串，預設'grey lighten-1'</td> </tr><tr> <td><code>inputTextButtonColorHover</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入滑鼠移入時輸入框按鈕顏色字串，預設'grey'</td> </tr><tr> <td><code>inputTextButtonColorFocus</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入取得焦點時輸入框按鈕顏色字串，預設'grey'</td> </tr><tr> <td><code>inputTextButtonTooltip</code></td> <td>String</td> <td><code>'Add'</code></td> <td>No</td> <td>輸入輸入框右側按鈕提示文字字串，預設'Add'</td> </tr><tr> <td><code>inputExpansionIconColor</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入輸入框右側圖標顏色字串，預設'grey'</td> </tr><tr> <td><code>suggectItemTextColor</code></td> <td>String</td> <td><code>'grey darken-3'</code></td> <td>No</td> <td>輸入輸入框下拉選單項目文字顏色字串，預設'grey darken-3'</td> </tr><tr> <td><code>suggectItemTextColorHover</code></td> <td>String</td> <td><code>'light-blue darken-2'</code></td> <td>No</td> <td>輸入輸入框下拉選單項目文字Hover顏色字串，預設'light-blue darken-2'</td> </tr><tr> <td><code>suggectItemFontSize</code></td> <td>String</td> <td><code>'0.9rem'</code></td> <td>No</td> <td>輸入輸入框下拉選單項目顯示文字大小字串，預設'0.9rem'</td> </tr><tr> <td><code>suggectItemBackgroundColor</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入輸入框下拉選單項目背景顏色字串，預設'white'</td> </tr><tr> <td><code>suggectItemBackgroundColorHover</code></td> <td>String</td> <td><code>'light-blue lighten-5'</code></td> <td>No</td> <td>輸入輸入框下拉選單項目背景Hover顏色字串，預設'light-blue lighten-5'</td> </tr><tr> <td><code>addButtonText</code></td> <td>String</td> <td><code>'Add'</code></td> <td>No</td> <td>輸入新增按鈕文字字串，預設'Add'</td> </tr><tr> <td><code>addButtonTextColor</code></td> <td>String</td> <td><code>'black'</code></td> <td>No</td> <td>輸入新增按鈕文字顏色字串，預設'black'</td> </tr><tr> <td><code>addButtonTextColorHover</code></td> <td>String</td> <td><code>'black'</code></td> <td>No</td> <td>輸入滑鼠移入時新增按鈕文字顏色字串，預設'black'</td> </tr><tr> <td><code>addButtonIcon</code></td> <td>String</td> <td><code>mdiPlusCircle</code></td> <td>No</td> <td>輸入新增按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiPlusCircle</td> </tr><tr> <td><code>addButtonIconColor</code></td> <td>String</td> <td><code>'pink darken-1'</code></td> <td>No</td> <td>輸入新增按鈕圖標顏色字串，預設'pink darken-1'</td> </tr><tr> <td><code>addButtonIconColorHover</code></td> <td>String</td> <td><code>'pink darken-1'</code></td> <td>No</td> <td>輸入滑鼠移入時新增按鈕圖標顏色字串，預設'pink darken-1'</td> </tr><tr> <td><code>addButtonBackgroundColor</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入新增按鈕背景顏色字串，預設'white'</td> </tr><tr> <td><code>addButtonBackgroundColorHover</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入滑鼠移入時新增按鈕背景顏色字串，預設'white'</td> </tr><tr> <td><code>addButtonTooltip</code></td> <td>String</td> <td><code>'Add'</code></td> <td>No</td> <td>輸入新增按鈕提示文字字串，預設'Add'</td> </tr><tr> <td><code>addWhenInputByOutside</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入當指定或自動使用input並新增時，是否強制使用click-add事件進行新增處理布林值，預設false</td> </tr><tr> <td><code>closeWithInterceptor</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入是否通過攔截器來決定是否進行關閉布林值，此處之攔截器係用promise來控制，當使用者點擊關閉時可先行確認或提示。當closeWithInterceptor=true時，於click-close事件所接收物件資訊中的pm，使用pm.resolve()則代表確定關閉，反之pm.reject()則取消關閉事件，預設false</td> </tr><tr> <td><code>draggable</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入是否可拖曳模式布林值，預設true</td> </tr><tr> <td><code>editable</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入是否為編輯模式布林值，預設true</td> </tr><tr> <td><code>editableClose</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入editable=true時是否顯示關閉按鈕布林值，預設true</td> </tr><tr> <td><code>editableInput</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入editable=true時是否使用預設的slot input布林值，預設true</td> </tr><tr> <td><code>enableCloseEventOnly</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入點擊移除按鈕時是否僅開啟關閉事件，代表不自動刪除項目，需通過監聽關閉事件@click-close自行處理刪除功能，預設false</td> </tr><tr> <td><code>enableNodata</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入是否使用nodata展示布林值，預設false</td> </tr><tr> <td><code>nodata</code></td> <td>String</td> <td><code>'Empty'</code></td> <td>No</td> <td>輸入無任何字串陣列時的預設文字字串，預設'Empty'</td> </tr></tbody> </table> <div class="container-overview"><div><p> </li></ul></dd> </dl> <div class="description usertext"></p></div></div> <h3 class="subsection-title" style="margin-top: 1em" data-jsdoc-vuejs="section-props">Props</h3> <table data-jsdoc-vuejs="table-props"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Default value</th> <th>Required?</th> <th>Description</th> </tr> </thead> <tbody><tr> <td><code>value</code></td> <td>Array</td> <td><code>[]</code></td> <td>No</td> <td>輸入項目的字串陣列或物件陣列，預設[]</td> </tr><tr> <td><code>enableActive</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入項目是否使用點擊成為活耀狀態布林值，預設false</td> </tr><tr> <td><code>valueActive</code></td> <td>Object</td> <td><code>null</code></td> <td>No</td> <td>輸入活耀項目物件，預設null</td> </tr><tr> <td><code>keyText</code></td> <td>String</td> <td><code>'text'</code></td> <td>No</td> <td>輸入當項目為物件時，存放顯示文字之欄位字串，預設'text'</td> </tr><tr> <td><code>keyIcon</code></td> <td>String</td> <td><code>'icon'</code></td> <td>No</td> <td>輸入當項目為物件時，存放圖標之欄位字串，預設'icon'</td> </tr><tr> <td><code>keyTooltip</code></td> <td>String</td> <td><code>'tooltip'</code></td> <td>No</td> <td>輸入當項目為物件時，存放提示之欄位字串，預設'tooltip'</td> </tr><tr> <td><code>enableColorsFromItem</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入當當項目為物件時是否使用其內相關顏色設定用以覆蓋預設值布林值，預設false</td> </tr><tr> <td><code>icon</code></td> <td>String</td> <td><code>''</code></td> <td>No</td> <td>輸入左側圖標字串，預設''</td> </tr><tr> <td><code>iconColor</code></td> <td>String</td> <td><code>'black'</code></td> <td>No</td> <td>輸入圖標顏色字串，預設'black'</td> </tr><tr> <td><code>iconColorHover</code></td> <td>String</td> <td><code>'grey darken-3'</code></td> <td>No</td> <td>輸入滑鼠移入時圖標顏色字串，預設'grey darken-3'</td> </tr><tr> <td><code>iconColorActive</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入主動模式時圖標顏色字串，預設'white'</td> </tr><tr> <td><code>iconSize</code></td> <td>Number</td> <td><code>22</code></td> <td>No</td> <td>輸入左側圖標之尺寸數字，單位px，預設22</td> </tr><tr> <td><code>progColor</code></td> <td>String</td> <td><code>'rgba(150,150,150,0.4)'</code></td> <td>No</td> <td>輸入進度條背景顏色字串，預設'rgba(150,150,150,0.4)'</td> </tr><tr> <td><code>progBackgroundColor</code></td> <td>String</td> <td><code>'rgba(150,150,150,0.075)'</code></td> <td>No</td> <td>輸入進度條顏色字串，預設'rgba(150,150,150,0.075)'</td> </tr><tr> <td><code>textColor</code></td> <td>String</td> <td><code>'black'</code></td> <td>No</td> <td>輸入文字顏色字串，預設'black'</td> </tr><tr> <td><code>textColorHover</code></td> <td>String</td> <td><code>'grey darken-3'</code></td> <td>No</td> <td>輸入滑鼠移入時文字顏色字串，預設'grey darken-3'</td> </tr><tr> <td><code>textColorActive</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入主動模式時文字顏色字串，預設'white'</td> </tr><tr> <td><code>textFontSize</code></td> <td>String</td> <td><code>'0.85rem'</code></td> <td>No</td> <td>輸入文字字型大小字串，預設'0.85rem'</td> </tr><tr> <td><code>borderRadius</code></td> <td>Number</td> <td><code>30</code></td> <td>No</td> <td>輸入框圓角度數字，單位為px，預設30</td> </tr><tr> <td><code>borderColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入邊框顏色字串，預設'transparent'</td> </tr><tr> <td><code>borderColorHover</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入滑鼠移入時邊框顏色字串，預設'transparent'</td> </tr><tr> <td><code>borderColorActive</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入主動模式時邊框顏色字串，預設'transparent'</td> </tr><tr> <td><code>backgroundColor</code></td> <td>String</td> <td><code>'transparent'</code></td> <td>No</td> <td>輸入背景顏色字串，預設'transparent'</td> </tr><tr> <td><code>backgroundColorHover</code></td> <td>String</td> <td><code>'rgba(200,200,200,0.25)'</code></td> <td>No</td> <td>輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.25)'</td> </tr><tr> <td><code>backgroundColorActive</code></td> <td>String</td> <td><code>'orange'</code></td> <td>No</td> <td>輸入主動模式時背景顏色字串，預設'orange'</td> </tr><tr> <td><code>marginStyle</code></td> <td>Object</td> <td><code>{top:10,bottom:10,left:0,right:10}</code></td> <td>No</td> <td>輸入外距設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{top:10,bottom:10,left:0,right:10}</td> </tr><tr> <td><code>shadow</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入是否顯示陰影布林值，預設true</td> </tr><tr> <td><code>shadowStyle</code></td> <td>String</td> <td><code>''</code></td> <td>No</td> <td>輸入陰影顏色字串，預設值詳見props</td> </tr><tr> <td><code>shadowActive</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入主動模式時是否顯示陰影布林值，預設true</td> </tr><tr> <td><code>shadowActiveStyle</code></td> <td>String</td> <td><code>''</code></td> <td>No</td> <td>輸入主動模式時陰影顏色字串，預設值詳見props</td> </tr><tr> <td><code>paddingStyle</code></td> <td>Object</td> <td><code>{v:3,h:15}</code></td> <td>No</td> <td>輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:3,h:15}</td> </tr><tr> <td><code>shiftLeft</code></td> <td>Number</td> <td><code>0</code></td> <td>No</td> <td>輸入左側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如圖標與左側邊框距離，單位px，預設0</td> </tr><tr> <td><code>shiftRight</code></td> <td>Number</td> <td><code>0</code></td> <td>No</td> <td>輸入右側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如關閉圖標與右側邊框距離，單位px，預設0</td> </tr><tr> <td><code>suggests</code></td> <td>Array</td> <td><code>[]</code></td> <td>No</td> <td>輸入可選(建議)項目陣列，預設[]</td> </tr><tr> <td><code>keySuggestText</code></td> <td>String</td> <td><code>'text'</code></td> <td>No</td> <td>輸入當可選(建議)項目為物件時，存放顯示文字之欄位字串，預設'text'</td> </tr><tr> <td><code>placeholder</code></td> <td>String</td> <td><code>''</code></td> <td>No</td> <td>輸入無文字時的替代字符字串，預設''</td> </tr><tr> <td><code>noResultsText</code></td> <td>String</td> <td><code>'No results'</code></td> <td>No</td> <td>輸入無過濾結果字串，預設'No results'</td> </tr><tr> <td><code>addMode</code></td> <td>String</td> <td><code>'auto'</code></td> <td>No</td> <td>輸入新增模式字串，可使用'auto'、'input'、'button'，預設'auto'</td> </tr><tr> <td><code>inputTextWidth</code></td> <td>Number</td> <td><code>150</code></td> <td>No</td> <td>輸入新增按鈕或輸入框區寬度數字，單位px，預設150</td> </tr><tr> <td><code>inputKeyText</code></td> <td>String</td> <td><code>'text'</code></td> <td>No</td> <td>輸入若可選(建議)項目為元素陣列時，輸入框之提取選擇項目物件內鍵值字串，預設'text'</td> </tr><tr> <td><code>inputTextFontSize</code></td> <td>String</td> <td><code>'0.85rem'</code></td> <td>No</td> <td>輸入輸入框文字大小字串，預設'0.85rem'</td> </tr><tr> <td><code>inputTextColor</code></td> <td>String</td> <td><code>'black'</code></td> <td>No</td> <td>輸入輸入框文字顏色字串，預設'black'</td> </tr><tr> <td><code>inputTextBackgroundColor</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入輸入框背景顏色字串，預設'white'</td> </tr><tr> <td><code>inputTextBackgroundColorHover</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入滑鼠移入時輸入框背景顏色字串，預設'white'</td> </tr><tr> <td><code>inputTextBackgroundColorFocus</code></td> <td>String</td> <td><code>'grey lighten-5'</code></td> <td>No</td> <td>輸入取得焦點時輸入框背景顏色字串，預設'grey lighten-5'</td> </tr><tr> <td><code>inputTextBorderColor</code></td> <td>String</td> <td><code>'grey lighten-1'</code></td> <td>No</td> <td>輸入輸入框邊框顏色字串，預設'grey lighten-1'</td> </tr><tr> <td><code>inputTextBorderColorHover</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入滑鼠移入時輸入框邊框字串，預設'grey'</td> </tr><tr> <td><code>inputTextBorderColorFocus</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入取得焦點時輸入框文字邊框字串，預設'grey'</td> </tr><tr> <td><code>inputTextButtonIcon</code></td> <td>String</td> <td><code>mdiPlusCircle</code></td> <td>No</td> <td>輸入新增按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiPlusCircle</td> </tr><tr> <td><code>inputTextButtonColor</code></td> <td>String</td> <td><code>'grey lighten-1'</code></td> <td>No</td> <td>輸入輸入框按鈕顏色字串，預設'grey lighten-1'</td> </tr><tr> <td><code>inputTextButtonColorHover</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入滑鼠移入時輸入框按鈕顏色字串，預設'grey'</td> </tr><tr> <td><code>inputTextButtonColorFocus</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入取得焦點時輸入框按鈕顏色字串，預設'grey'</td> </tr><tr> <td><code>inputTextButtonTooltip</code></td> <td>String</td> <td><code>'Add'</code></td> <td>No</td> <td>輸入輸入框右側按鈕提示文字字串，預設'Add'</td> </tr><tr> <td><code>inputExpansionIconColor</code></td> <td>String</td> <td><code>'grey'</code></td> <td>No</td> <td>輸入輸入框右側圖標顏色字串，預設'grey'</td> </tr><tr> <td><code>suggectItemTextColor</code></td> <td>String</td> <td><code>'grey darken-3'</code></td> <td>No</td> <td>輸入輸入框下拉選單項目文字顏色字串，預設'grey darken-3'</td> </tr><tr> <td><code>suggectItemTextColorHover</code></td> <td>String</td> <td><code>'light-blue darken-2'</code></td> <td>No</td> <td>輸入輸入框下拉選單項目文字Hover顏色字串，預設'light-blue darken-2'</td> </tr><tr> <td><code>suggectItemFontSize</code></td> <td>String</td> <td><code>'0.9rem'</code></td> <td>No</td> <td>輸入輸入框下拉選單項目顯示文字大小字串，預設'0.9rem'</td> </tr><tr> <td><code>suggectItemBackgroundColor</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入輸入框下拉選單項目背景顏色字串，預設'white'</td> </tr><tr> <td><code>suggectItemBackgroundColorHover</code></td> <td>String</td> <td><code>'light-blue lighten-5'</code></td> <td>No</td> <td>輸入輸入框下拉選單項目背景Hover顏色字串，預設'light-blue lighten-5'</td> </tr><tr> <td><code>addButtonText</code></td> <td>String</td> <td><code>'Add'</code></td> <td>No</td> <td>輸入新增按鈕文字字串，預設'Add'</td> </tr><tr> <td><code>addButtonTextColor</code></td> <td>String</td> <td><code>'black'</code></td> <td>No</td> <td>輸入新增按鈕文字顏色字串，預設'black'</td> </tr><tr> <td><code>addButtonTextColorHover</code></td> <td>String</td> <td><code>'black'</code></td> <td>No</td> <td>輸入滑鼠移入時新增按鈕文字顏色字串，預設'black'</td> </tr><tr> <td><code>addButtonIcon</code></td> <td>String</td> <td><code>mdiPlusCircle</code></td> <td>No</td> <td>輸入新增按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiPlusCircle</td> </tr><tr> <td><code>addButtonIconColor</code></td> <td>String</td> <td><code>'pink darken-1'</code></td> <td>No</td> <td>輸入新增按鈕圖標顏色字串，預設'pink darken-1'</td> </tr><tr> <td><code>addButtonIconColorHover</code></td> <td>String</td> <td><code>'pink darken-1'</code></td> <td>No</td> <td>輸入滑鼠移入時新增按鈕圖標顏色字串，預設'pink darken-1'</td> </tr><tr> <td><code>addButtonBackgroundColor</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入新增按鈕背景顏色字串，預設'white'</td> </tr><tr> <td><code>addButtonBackgroundColorHover</code></td> <td>String</td> <td><code>'white'</code></td> <td>No</td> <td>輸入滑鼠移入時新增按鈕背景顏色字串，預設'white'</td> </tr><tr> <td><code>addButtonTooltip</code></td> <td>String</td> <td><code>'Add'</code></td> <td>No</td> <td>輸入新增按鈕提示文字字串，預設'Add'</td> </tr><tr> <td><code>addWhenInputByOutside</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入當指定或自動使用input並新增時，是否強制使用click-add事件進行新增處理布林值，預設false</td> </tr><tr> <td><code>closeWithInterceptor</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入是否通過攔截器來決定是否進行關閉布林值，此處之攔截器係用promise來控制，當使用者點擊關閉時可先行確認或提示。當closeWithInterceptor=true時，於click-close事件所接收物件資訊中的pm，使用pm.resolve()則代表確定關閉，反之pm.reject()則取消關閉事件，預設false</td> </tr><tr> <td><code>draggable</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入是否可拖曳模式布林值，預設true</td> </tr><tr> <td><code>editable</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入是否為編輯模式布林值，預設true</td> </tr><tr> <td><code>editableClose</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入editable=true時是否顯示關閉按鈕布林值，預設true</td> </tr><tr> <td><code>editableInput</code></td> <td>Boolean</td> <td><code>true</code></td> <td>No</td> <td>輸入editable=true時是否使用預設的slot input布林值，預設true</td> </tr><tr> <td><code>enableCloseEventOnly</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入點擊移除按鈕時是否僅開啟關閉事件，代表不自動刪除項目，需通過監聽關閉事件@click-close自行處理刪除功能，預設false</td> </tr><tr> <td><code>enableNodata</code></td> <td>Boolean</td> <td><code>false</code></td> <td>No</td> <td>輸入是否使用nodata展示布林值，預設false</td> </tr><tr> <td><code>nodata</code></td> <td>String</td> <td><code>'Empty'</code></td> <td>No</td> <td>輸入無任何字串陣列時的預設文字字串，預設'Empty'</td> </tr></tbody> </table> <div class="container-overview"><div><p> </div> </div> </article> </section> </div> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Tue Sep 23 2025 16:05:24 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme. </footer> <script>prettyPrint();</script> <script src="scripts/polyfill.js"></script> <script src="scripts/linenumber.js"></script> </body> </html>