아래 그림과 같이 iView에 너무 많은 내용이 드롭 다운 상자에 iView 랩으로 이어질 수 있습니다 때 발견, 드롭 다운 상자를 사용하여, 심각, 사용자 경험에 영향을 :
API를 공식 웹 사이트를 iView를 보면, 좋은 해결책을 찾지 못했습니다, 입력 상자에 탭의 수는 최대 태그 카운트 속성은,이 공식 웹 사이트 속성 값을 초과 한 후 탭 뒤에 숨어 .
이상적인 실질적인 효과 :
이상적인 현실 때문에, 결과는 다음과 같이 불확실한 보일 수있는 탭의 내용의 길이에, 매우 마른 체형, 가득 :
절망에서, 단지 자신을 변경합니다.
프로그램 : 의무적 KEEP 라인 포장 스타일의 변화를 방지하는 결과 (단순 조질 방법)
실제 결과 :
치명적인 결함이 있기 때문에 드래그 주위에 방법이 없다, (! 가혹한 좋은) 다시 직접 연주, 그 결과, 정말 새로운 라인의 문제를 해결하지만, 결과를 확인하기 위해 상사에게했다, 당신은 볼 수 있습니다 몇 입력 상자가, 다른 사람이 숨겨져 있습니다.
실제로 프로그램 코드 :( CSS)는 코드의 라인을 추가
<! DOCTYPE HTML > < HTML > < 머리 > < 메타 문자 집합 = "UTF-8" > < 제목 > 에 iView 예 </ 제목 > < 링크 확인해 = "스타일" 유형 = "텍스트 / CSS는" HREF = "HTTP : // unpkg .COM / iView를 / DIST / 스타일 / iview.css " > < 스크립트 유형 ="텍스트 / 자바 스크립트 " 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에서" 여기서 value = "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>