ElementUI select弹窗在特定场合错位问题解决方案
作者：haofangkiller
由于某种原因，开发页面使用的框架要从jQuery转用Vue，组件库很自然的就选 用了ElementUI。当我把ElementUI整合到我的前端项目时，遇到了一些问题，比如常用的select组件。在某种场合下弹窗会出现错位问题。
研究了一下生成的页面代码，发现了问题所在。整个页面使用了窗口自适应缩放功能，设置了
body style="transform: scale(0.807292, 0.618519);"
而elementUI的select生成的弹窗代码使用的是绝对定位
position: absolute; top: 94px; left: 674px;
由此导致了select弹窗的错位。可能我是初学Vue，找了一些资料，但是仍然没有解决弹窗错位的问题，于是我想能不能做一个基于Vue的仿chosen-select的组件。于是，边学边做，花了大概一周时间实现了单选和多选的基本功能，页面怎么自适应窗口变化弹窗都不会错位。
组件使用效果如下：
多选
<label>多選
<chosen-select place-holder="請選擇區域" v-bind:option-data="multiSelectOptData" ref="fabList" multiple="true" v-on:itemChange="getChosenList" v-bind:size="{'width':'400px','max-height':'87px'}"></chosen-select>
</label>单选
<label>單選
<chosen-select v-bind:option-data="selectOptData" place-holder="請選擇區域" ref="role" v-on:itemChange="getChosenValue" v-bind:size="{'width':'400px','max-height':'87px'}"></chosen-select>
</label>主要参数如下
multiple:默认为false，设置为true时为多选
option-data:下拉选项数组，如果多选的话，每个数据项需要有‘is_active’：‘1’，单选时候每个数据项可以不要。[{'label':'SZ-NS 深圳-南山','value':'1','is_active':'1'},{'label':'SZ-GL 深圳-觀瀾','value':'2','is_active':'1'},{'label':'SZ-BA 深圳-寶安','value':'4','is_active':'1'}, {'label':'SZ-LG 深圳-龍崗','value':'5','is_active':'1'},{'label':'SZ-GM 深圳-光明','value':'3','is_active':'1'},{'label':'SZ-YT 深圳-鹽田','value':'6','is_active':'1'}, {'label':'SZ-FT 深圳-福田','value':'7','is_active':'1'},{'label':'SZ-PS 深圳-坪山','value':'8','is_active':'1'},{'label':'SZ-LH 深圳-龍華','value':'9','is_active':'1'}]
place-holder:组件的提示标签，必填
itemChange:组件选项变化时获取到相应的值
ref:如果需要设置组件的初始值，结合监听属性实现
size:多选时设置最大容器的最大高度
最开始时候实现了optionGroup的功能，后来做了搜索功能后把optionGroup给去掉了，后来想了一下，还是把它加上比较合适，在下一个版本再加上该选项。
调用该组件的完整代码如下，后续我把代码传到Github上做个分享，再把链接放上来，初次开发组件，难免有纰漏，欢迎指正。
Github下载地址
https://github.com/javaleaner/chosen-select.git
百度云盘里边，下载地址如下永久有效：
链接: https://pan.baidu.com/s/1x2_5_nxg0aO7pnKRweoMgg
提取码: 2ph1
<template>
<div class="hello" >
<ul class="userInput">
<li><label>chosen-select</label></li>
<li><label>多選設置值<input v-model="multiSelectVal" /></label></li>
<li>
<label>多選
<chosen-select place-holder="請選擇區域" v-bind:option-data="multiSelectOptData" ref="fabList" multiple="true" v-on:itemChange="getChosenList" v-bind:size="{'width':'400px','max-height':'87px'}"></chosen-select>
</label>
</li>
<li><label>多選選中值：{{chosenResult}}</label></li>
<li style="border-top: 1px dashed #999999;margin-top: 20px;"><label>單選設置值<input v-model="singleSelectVal"></label></li>
<li>
<label>單選
<chosen-select v-bind:option-data="selectOptData" place-holder="請選擇區域" ref="role" v-on:itemChange="getChosenValue" v-bind:size="{'width':'400px','max-height':'87px'}"></chosen-select>
</label>
</li>
<li><label>單選選中值：{{chosenVal}}</label></li>
</ul>
<div class="userInput">
<el-row>ElementUI Select</el-row>
<label>多選</label><multi-select v-on:change="getElementMultiSelect"></multi-select><br/>
<label>多選值{{eleMultiSelectedVal}}</label><br/>
<label>單選</label><single-select v-on:change="getElementSingleSelect"></single-select><br/>
<label>單選值{{eleSingleSelectedVal}}</label><br/>
<el-button type="primary" v-bind:disabled="btnActive" v-on:click="adapterWindow">窗口自適應</el-button>
</div>
</div>
</template>
<script>
import constant from "../assets/constant";
import ChosenSelect from './chosen-select';
import SingleSelect from './element-ui-comp/single-select';
import MultiSelect from './element-ui-comp/multi-select';
export default {
name: 'HelloWorld',
components:{MultiSelect, SingleSelect, ChosenSelect},
data () {
return {
value:'',
btnActive:false,//按鈕激活狀態
tempVal:"",
chosenResult:[],//多選值列表
chosenVal:'',//單選值
baseInputVal:'',
customInputVal:'',
multiSelectVal:'',//多選初始化
singleSelectVal:'',
eleMultiSelectedVal:[],
eleSingleSelectedVal:'',
selectOptData:[{'label':'SZ-NS 深圳-南山','value':'1'},{'label':'SZ-GL 深圳-觀瀾','value':'2'},{'label':'SZ-BA 深圳-寶安','value':'4'},
{'label':'SZ-LG 深圳-龍崗','value':'5'},{'label':'SZ-GM 深圳-光明','value':'3'},{'label':'SZ-YT 深圳-鹽田','value':'6'},
{'label':'SZ-FT 深圳-福田','value':'7'},{'label':'SZ-PS 深圳-坪山','value':'8'},{'label':'SZ-LH 深圳-龍華','value':'9'}],
multiSelectOptData:[{'label':'SZ-NS 深圳-南山','value':'1','is_active':'1'},{'label':'SZ-GL 深圳-觀瀾','value':'2','is_active':'1'},{'label':'SZ-BA 深圳-寶安','value':'4','is_active':'1'},
{'label':'SZ-LG 深圳-龍崗','value':'5','is_active':'1'},{'label':'SZ-GM 深圳-光明','value':'3','is_active':'1'},{'label':'SZ-YT 深圳-鹽田','value':'6','is_active':'1'},
{'label':'SZ-FT 深圳-福田','value':'7','is_active':'1'},{'label':'SZ-PS 深圳-坪山','value':'8','is_active':'1'},{'label':'SZ-LH 深圳-龍華','value':'9','is_active':'1'}],
};
},
mounted() {
this.singleSelectVal='0';//初始化單選選擇器
this.multiSelectVal='1,4';
},
watch:{
singleSelectVal:function (newVal,oldVal){
this.$refs.role.iniSingleSelect(newVal);
},
multiSelectVal:function (newVal,oldVal){
let list=newVal.trim(',').split(',');
this.$refs.fabList.iniMultiSelect(list);
}
},
methods: {
getChosenList:function (val){
//this.chosenResult=val;
console.log(val);
let temp=[];
for( let i=0;i<val.length;i++){
temp.push(val[i].itm.value)
}
this.chosenResult=temp;
console.log(temp);
},
getChosenValue:function (val){
this.chosenVal=val;
},
setSelectVal:function (val){
this.$refs.fabList.curSelected=val;
},
getElementMultiSelect:function (val){
this.eleMultiSelectedVal=val;
},
getElementSingleSelect:function (val){
this.eleSingleSelectedVal=val;
},
adapterWindow:function (){
this.btnActive=true;
this.zoom();
window.onresize = () => {
this.zoom();
};
}
,
zoom:function (){
let x = window.innerWidth / constant.constant.PAGE_WIDTH;
let y = window.innerHeight / constant.constant.PAGE_HEIGHT;
let oBody = document.getElementsByTagName('body')[0];
oBody.style.transform = `scale(${x}, ${y})`;
oBody.style.webkitTransform = `scale(${x}, ${y})`;/* for Chrome || Safari */
oBody.style.msTransform = `scale(${x}, ${y})`;/* for Firefox */
oBody.style.mozTransform = `scale(${x}, ${y})`;/* for IE */
oBody.style.oTransform = `scale(${x}, ${y})`;/* for Opera */
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
a {
color: #42b983;
}
.hello{text-align: left;}
.userInput {
width: 500px; height:400px;margin: 0 0 0 150px; display: inline-block;float: left;border:1px dashed whitesmoke;
}
.userInput div{color: whitesmoke;}
.userInput>li{margin-bottom: 20px;}
.userInput label{color: whitesmoke;}
</style>到此这篇关于ElementUI select弹窗在特定场合错位问题解决方案的文章就介绍到这了,更多相关ElementUI select弹窗错位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！