iview use the drop-down box, it found when too much content can lead to the drop-down box iview wrap, seriously affected the user experience, as shown below:
By looking iview the API official website, did not find a good solution, the official website there is a max-tag-count property, which is the number of tabs in the input box exceeds the property value, then hide behind the tab .
Ideal practical effect:
Ideal is full, the reality is very skinny, due to the length of the content of the tab is uncertain, the result might look like this:
In desperation, the only change yourself.
Program: mandatory KEEP line, resulting in preventing wrapping style changes (simple and crude method)
actual effect:
As a result, really solve the problem of the new line, but took to the boss to see the results, playing directly back (good harsh !!), because there is a fatal flaw, there is no way around drag, you can see only a few input box, others are hidden.
A program code that is actually :( CSS to add a line of code)
<!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>
Option Two: to abandon the practice of tab Iview of their own to achieve a lower Colorado selected (a more complex scheme)
actual effect:
The content inside the box can be dragged around. The principle is: the Iview comes with all the relevant tags hidden away, and then his own body to add a tag input input box, using the content inside it can be freely around drag characteristics.
Option II Code :( code can be run directly, I mainly do the back-end, front-end code written in relatively bad ....)
<!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>