本篇內(nèi)容主要講解“Vue.js中怎么制作自定義選擇組件”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue.js中怎么制作自定義選擇組件”吧!

江永網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),江永網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為江永近千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請找那個(gè)售后服務(wù)好的江永做網(wǎng)站的公司定做！

定制 select 標(biāo)簽的設(shè)計(jì)非常困難。有時(shí)候，如果不使用樣式化的 div 和自定義 JavaScript 的結(jié)合來構(gòu)建自己的腳本，那是不可能的。

HTML

需要注意以下幾點(diǎn)：

• tabindex 屬性使我們的組件能夠得到焦點(diǎn)，從而使它變得模糊。當(dāng)用戶在組件外部單擊時(shí)， blur 事件將關(guān)閉我們的組件。

• input 參數(shù)發(fā)出選定的選項(xiàng)，父組件可以輕松地對更改做出反應(yīng)。

JavaScript

另外，要注意的重要事項(xiàng)：

我們還會在 mount 上發(fā)出選定的值，以便父級不需要顯式設(shè)置默認(rèn)值。如果我們的 select 組件是較大表單的一部分，那么我們希望能夠設(shè)置正確的 tabindex 。

CSS

 .custom-select {
 position: relative;
 width: 100%;
 text-align: left;
 outline: none;
 height: 47px;
 line-height: 47px;
}

.selected {
 background-color: #080D0E;
 border-radius: 6px;
 border: 1px solid #858586;
 color: #ffffff;
 padding-left: 8px;
 cursor: pointer;
 user-select: none;
}

.selected.open{
 border: 1px solid #CE9B2C;
 border-radius: 6px 6px 0px 0px;
}

.selected:after {
 position: absolute;
 content: "";
 top: 22px;
 right: 10px;
 width: 0;
 height: 0;
 border: 4px solid transparent;
 border-color: #fff transparent transparent transparent;
}

.items {
 color: #ffffff;
 border-radius: 0px 0px 6px 6px;
 overflow: hidden;
 border-right: 1px solid #CE9B2C;
 border-left: 1px solid #CE9B2C;
 border-bottom: 1px solid #CE9B2C;
 position: absolute;
 background-color: #080D0E;
 left: 0;
 right: 0;
}

.item{
 color: #ffffff;
 padding-left: 8px;
 cursor: pointer;
 user-select: none;
}

.item:hover{
 background-color: #B68A28;
}

.selectHide {
 display: none;
}

該 CSS只是一個(gè)示例，你可以按照你的需求隨意修改樣式。

到此，相信大家對“Vue.js中怎么制作自定義選擇組件”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！