iview使用下拉框的時候，發現當內容太多就會導致iview的下拉框換行，嚴重影響到了用戶體驗，如下圖：
通過查看iview的官網的API,確實沒有發現一個好的解決方案，官網有提供一個max-tag-count屬性，這個屬性是輸入框中的選項卡數量超過該屬性值，那么就隱藏后邊的選項卡。
理想實際效果：
理想很豐滿，現實很骨感，由於選項卡的內容的長度是不確定的，結果可能是這樣：
無奈之下，只能自己動手改了。
方案一：強制要求不准換行，防止換行導致樣式變化（簡單粗暴的方法）
實際效果：
這樣一來，的確是解決換行的問題了，但是拿着成果給老大看，直接打回來了（好苛刻！！），原因是有一個致命的缺陷，沒有辦法左右拖動，用戶能看到的只有輸入框中的那幾個，其他的都隱藏了。
方案一代碼：（其實就是CSS加了一行代碼）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script> <style> .ivu-select-multiple .ivu-select-selection div{overflow: hidden;white-space: nowrap;} </style> </head> <body> <div id="app" style="margin-left: 300px;margin-top: 300px;"> <template> <i-select v-model="model10" multiple style="width:260px"> <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option> </i-select> </template> </div> <script> new Vue({ el: '#app', data: { cityList: [ { value: 'New York', label: 'New York' }, { value: 'London', label: 'London' }, { value: 'Sydney', label: 'Sydney' }, { value: 'Ottawa', label: 'Ottawa' }, { value: 'Paris', label: 'Paris' }, { value: 'Canberra', label: 'Canberra' } ], model10: [] }, methods: { } }) </script> </body> </html>
方案二：放棄Iview的選項卡的做法，自己來實現一個下拉多選（較為復雜的方案）
實際效果：
框里邊的內容是可以左右拖動的。實現原理是：將Iview自帶的相關標簽全部隱藏掉，然后自己往標簽體添加一個input輸入框，利用它里邊的內容可以自由左右拖動的特性。
方案二代碼：（代碼是可以直接運行的，我主要做后端，前端代碼寫的比較爛。。。。）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script> <style> /*隱藏掉iview的標簽*/ .ivu-select-multiple .ivu-select-selection div {overflow: hidden;white-space: nowrap;height: 32px;} .ivu-select-multiple .ivu-select-selection .ivu-tag-checked{display: none;} .ivu-select-multiple .ivu-select-selection .ivu-select-placeholder{display: none;}
input:focus{outline: none;} /*禁止輸入框input高亮顯示*/
</style> </head> <body> <div id="app" style="margin-left: 300px;margin-top: 300px;"> <template> <i-select v-model="model10" multiple style="width:260px" @on-change="chg" transfer-class-name="mytest"> <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option> </i-select> </template> </div> <script> window.vm =new Vue({ el: '#app', data: { cityList: [ { value: 'New YorkVal', label: '紐約' }, { value: 'LondonVal', label: '倫敦' }, { value: 'SydneyVal', label: '悉尼' }, { value: 'OttawaVal', label: '渥太華' }, { value: 'ParisVal', label: '巴黎' }, { value: 'CanberraVal', label: '堪培拉' } ], model10: [] }, methods: { chg : function(){ this.$nextTick(function(){ /*從被隱藏掉的Iview標簽中,把需要顯示的內容取出來,放到自定義的輸入框中*/ var text=""; /*.mytest是我設置的彈出層的class名稱transfer-class-name="mytest"*/ /*通過實際的彈出層名稱，通過jquery來一層一層地找到需要顯示的內容*/ var div = $(".mytest").prev().children('div'); $(div).find(".ivu-tag-text").each(function(){ text += $(this).html()+"、"; }) text = text.substring(0,text.length-1); $(div).children('input').val(text); }) } } }) /*頁面加載的時候,自定義一個Input輸入框,用來替換Iview進行顯示*/ $(".ivu-select-multiple .ivu-select-selection>div").each(function () { /*設置輸入框的寬和高*/ var width = $(this).width()-10; var height = $(this).height(); /*獲取默認顯示的內容*/ var phr = $(this).find('span').text(); if(phr !== null || phr !== undefined || phr !== ''){ phr = "請選擇"; } /*將自定義的輸入框放到iview標簽體中*/ $(this).prepend("<input style='border:0px;box-shadow:none;width: "+width+"px;height: "+height+"px' readonly placeholder='"+phr+"' />"); }) </script> </body> </html>