あまりにも多くのコンテンツは、ドロップダウンボックスのiViewラップにつながることができたときにiViewのドロップダウンボックスを使用し、それは以下に示すように、真剣に、ユーザーエクスペリエンスに影響を与えた、が見つかりました：
APIの公式ウェブサイトをiViewを見ることによって、良い解決策を見つけられませんでした、入力ボックス内のタブの数は最大タグカウントプロパティは、そこにある公式ウェブサイトは、プロパティの値を超えると、タブの後ろに隠れます。
理想的な実用的な効果：
理想的にはいっぱいある、現実には不確実である、結果は次のようになりますため、タブの内容の長さに、非常に細いです。
絶望では、自分だけを変更します。
プログラム：必須KEEPライン、包装スタイルの変更を防止することが（シンプル、粗方法）
実際の結果：
その結果、実際に新しいラインの問題を解決しますが、戻って直接（良い、過酷な!!）を再生し、結果を確認するために上司にかかった、致命的な欠陥があるため、ドラッグの周り方法はありません、あなたが見ることができますわずか数入力ボックス、他の人が隠されています。
実際にコードの行を追加するためにCSSを:(れるプログラムコード）
<！DOCTYPE HTML > < HTML > < ヘッド> < メタのcharset = "UTF-8" > < タイトル>のiView例</ タイトル> < リンクのrel = "スタイルシート" タイプ= "テキスト/ cssの" のhref = "のhttp：// unpkg .COM / iViewにはdist / /スタイル/ iview.css」> < スクリプトタイプ= "テキスト/ javascriptの" SRC = "http://vuejs.org/js/vue.min.js" > </ スクリプト> <= "http://unpkg.com/iview/dist/iview.min.js" > </ スクリプト> < スタイル> .ivu選択-複数.ivu選択選択DIV { オーバーフロー：隠されました。ホワイトスペース：NOWRAP 。} </ スタイル> </ ヘッド> < ボディ> < DIV ID = "アプリケーション" スタイル= "マージン左：300ピクセル;マージントップ：300ピクセル;" > < テンプレート> < I-選択Vモデル= "model10"> < I-オプションV-ため= "cityListの項目" ：値= "item.value" ：キー= "item.value" > {{item.label}} </ I-オプション> </ I-選択> </ テンプレート> </ divの> < スクリプト> 新しいヴュー（{ エル：' #app ' 、 データ：{ cityList：[ { 値：' ニューヨーク' 、 ラベル：' ニューヨーク' }、 { 値：' ロンドン' 、 ラベル：' ロンドン' }、 { 値：' シドニー' 、 ラベル：' シドニー' }、 { 値：' オタワ' 、 ラベル："オタワ" }、 { 値：' パリ' 、 ラベル：' パリ' }、 { 値：' キャンベラ' 、 ラベル：' キャンベラ' } ]、 model10：[] }、 メソッド：{ } }） </ スクリプト> </ ボディ> </HTML >
オプション2：選択された下位コロラド（より複雑なスキーム）を達成するために、独自のタブのiViewの実践を放棄します
実際の結果：
ボックス内のコンテンツが周りドラッグすることができます。原理は、iViewが隠され、関連するすべてのタグが付属しており、それがドラッグ特性を中心に自由にすることができ、その後の内側に自分の体には、コンテンツを使用して、タグ入力入力ボックスを追加します。
オプションIIコード:(コードは、私が主に比較的悪いで書かれたバックエンド、フロントエンドのコードを実行し、直接実行することができます....）
<!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;} </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>