ElementUI?select彈窗在特定場合錯(cuò)位問題解決方案
由于某種原因，開發(fā)頁面使用的框架要從jQuery轉(zhuǎn)用Vue，組件庫很自然的就選 用了ElementUI。當(dāng)我把ElementUI整合到我的前端項(xiàng)目時(shí)，遇到了一些問題，比如常用的select組件。在某種場合下彈窗會(huì)出現(xiàn)錯(cuò)位問題。
研究了一下生成的頁面代碼，發(fā)現(xiàn)了問題所在。整個(gè)頁面使用了窗口自適應(yīng)縮放功能，設(shè)置了
body style="transform: scale(0.807292, 0.618519);"
而elementUI的select生成的彈窗代碼使用的是絕對(duì)定位
position: absolute; top: 94px; left: 674px;
由此導(dǎo)致了select彈窗的錯(cuò)位?？赡芪沂浅鯇W(xué)Vue，找了一些資料，但是仍然沒有解決彈窗錯(cuò)位的問題，于是我想能不能做一個(gè)基于Vue的仿chosen-select的組件。于是，邊學(xué)邊做，花了大概一周時(shí)間實(shí)現(xiàn)了單選和多選的基本功能，頁面怎么自適應(yīng)窗口變化彈窗都不會(huì)錯(cuò)位。
組件使用效果如下：
多選
<label>多選
<chosen-select place-holder="請選擇區(qū)域" 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="請選擇區(qū)域" ref="role" v-on:itemChange="getChosenValue" v-bind:size="{'width':'400px','max-height':'87px'}"></chosen-select>
</label>主要參數(shù)如下
multiple:默認(rèn)為false，設(shè)置為true時(shí)為多選
option-data:下拉選項(xiàng)數(shù)組，如果多選的話，每個(gè)數(shù)據(jù)項(xiàng)需要有‘is_active’：‘1’，單選時(shí)候每個(gè)數(shù)據(jù)項(xiàng)可以不要。[{'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:組件的提示標(biāo)簽，必填
itemChange:組件選項(xiàng)變化時(shí)獲取到相應(yīng)的值
ref:如果需要設(shè)置組件的初始值，結(jié)合監(jiān)聽屬性實(shí)現(xiàn)
size:多選時(shí)設(shè)置最大容器的最大高度
最開始時(shí)候?qū)崿F(xiàn)了optionGroup的功能，后來做了搜索功能后把optionGroup給去掉了，后來想了一下，還是把它加上比較合適，在下一個(gè)版本再加上該選項(xiàng)。
調(diào)用該組件的完整代碼如下，后續(xù)我把代碼傳到Github上做個(gè)分享，再把鏈接放上來，初次開發(fā)組件，難免有紕漏，歡迎指正。
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>多選設(shè)置值<input v-model="multiSelectVal" /></label></li>
<li>
<label>多選
<chosen-select place-holder="請選擇區(qū)域" 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>單選設(shè)置值<input v-model="singleSelectVal"></label></li>
<li>
<label>單選
<chosen-select v-bind:option-data="selectOptData" place-holder="請選擇區(qū)域" 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">窗口自適應(yīng)</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,//按鈕激活狀態(tài)
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>到此這篇關(guān)于ElementUI select彈窗在特定場合錯(cuò)位問題解決方案的文章就介紹到這了,更多相關(guān)ElementUI select彈窗錯(cuò)位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能實(shí)例
- 關(guān)于elementUI select控件綁定多個(gè)值(對(duì)象)
- elementui的select實(shí)現(xiàn)多選添加功能
- vue之elementUi的el-select同時(shí)獲取value和label的三種方式
- ElementUI下拉組件el-select一次從后端獲取選項(xiàng)并設(shè)置默認(rèn)值方式
- elementui?el-select?change事件傳參問題
- elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題
相關(guān)文章
鎖屏是指用戶暫時(shí)離開時(shí)點(diǎn)擊鎖屏,用戶無法跳轉(zhuǎn)到其他頁面,回來輸入密碼點(diǎn)擊解鎖,下面這篇文章主要給大家介紹了關(guān)于vue頁面鎖屏的完美解決方法,需要的朋友可以參考下2022-06-06
今天小編就為大家分享一篇vue 中固定導(dǎo)航欄的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue自定義指令的創(chuàng)建和使用方法實(shí)例分析
這篇文章主要介紹了vue自定義指令的創(chuàng)建和使用方法,結(jié)合完整實(shí)例形式分析了vue.js創(chuàng)建及使用自定義指令的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12
使用webpack-obfuscator進(jìn)行代碼混淆及報(bào)錯(cuò)解決過程
隨著前端應(yīng)用的復(fù)雜度增加,保護(hù)客戶端的JavaScript代碼變得更為重要,webpack-obfuscator插件通過對(duì)代碼進(jìn)行混淆,如變量重命名、字符串加密等,提高代碼的保密性,防止源碼被輕易查看或修改2024-10-10
vue中使用cookies和crypto-js實(shí)現(xiàn)記住密碼和加密的方法
這篇文章給大家介紹一下關(guān)于vue中使用cookies和crypto-js如何實(shí)現(xiàn)密碼的加密與記住密碼，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。2018-10-10
Vue Router動(dòng)態(tài)路由經(jīng)典問題next({?...to,?replace:?true?
這篇文章主要介紹了Vue Router動(dòng)態(tài)路由經(jīng)典問題next({?...to,replace:true})解決方案的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue Router動(dòng)態(tài)路由具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2026-03-03
這篇文章主要介紹了Vue學(xué)習(xí)之常用指令,結(jié)合實(shí)例形式詳細(xì)分析了vue.js創(chuàng)建實(shí)例、常用指令及相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue首頁加載白屏原因以及10種解決方法匯總，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
今天小編就為大家分享一篇快速解決vue-cli在ie9+中無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解Vue如何將多個(gè)空格被合并顯示成一個(gè)空格
這篇文章主要為大家詳細(xì)介紹了在Vue中如何將多個(gè)空格被合并顯示成一個(gè)空格,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04