您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關怎么在Vue.js中實現一個帶下拉選項的輸入框,文章內容質量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。
注冊組件
通過將封裝好的組件代碼復制粘貼來注冊全局組件。
設計的時候有考慮到輸入框可能存在不同的類型,例如文本輸入框,數值輸入框,百分數輸入框等等。所以在封裝的代碼中會通過函數 inputRule
來限制輸入。限制的方法是利用 Regex 進行過濾。如果有其他類型,也可以通過修改 inputRule
中的過濾條件。
<script type="text/x-template" id="dropdown"> <div class="dropdown" v-if="options"> <!-- Dropdown Input --> <input :type="type" :disabled="disabled" v-model="input_value" @focus="showOptions()" @blur="exit()" @keyup="keyMonitor" @input="input_value = inputRule(type)" /> ... </script> <script> Vue.component('dropdown', { template: '#dropdown', props: { type: String, options: Array, disabled: Boolean, value: String }, ... methods: { inputRule:function(type){ var value; switch(type){ case 'text': value = this.input_value.replace(/[^a-zA-Z0-9]/g,''); break; case 'number': value = this.input_value.replace(/^(?![+-]?\d+(\.\d+)?$)/g,''); break; case 'percentage': value = this.input_value.replace(/[^\d]/g,''); value = value > 100 ? '100' : value; value = value < 0 ? '0' : value; break; default: console.log("no limitation"); } return value; }, ... </script>
添加自定義標簽調用組件。
<dropdown type = "text" :options = "text_options" :value = "text_value" :disabled = "text_disabled" @on_change_input_value = "onTextChange"> </dropdown>
最后動態綁定數據到父級組件, props 中:
type: 輸入框的類型,現支持 text, number 和 percentage。
options: 輸入框下拉列表的選項
value: 輸入框的值
disabled: 是否禁止點擊輸入框
另外我們還需要在父級實例中定義事情,用于更新輸入框的值
on_change_input_value: 更新值
data: function () { return { text_value: 'ccc', text_disabled: false, text_options: [ { id: 1, name: 'a' }, { id: 2, name: 'bb' }, { id: 3, name: 'ccc' }, { id: 4, name: 'dddd' }, { id: 5, name: 'eeeee' }, { id: 6, name: 'fffff ' }, { id: 7, name: 'gggggg' }, { id: 8, name: 'hhhhhhh' }, { id: 9, name: 'iiiiiiii' }, ], ... } }, ... methods: { onTextChange: function (new_text_value) { this.text_value = new_text_value; }, ... },
關于怎么在Vue.js中實現一個帶下拉選項的輸入框就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。