ElementUI?select彈窗在特定場合錯位問題解決方案

更新時間：2024年01月16日 10:24:46 作者：haofangkiller

這篇文章主要介紹了ElementUI?select彈窗在特定場合錯位問題解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

由于某種原因，開發(fā)頁面使用的框架要從jQuery轉(zhuǎn)用Vue，組件庫很自然的就選用了ElementUI。當我把ElementUI整合到我的前端項目時，遇到了一些問題，比如常用的select組件。在某種場合下彈窗會出現(xiàn)錯位問題。

研究了一下生成的頁面代碼，發(fā)現(xiàn)了問題所在。整個頁面使用了窗口自適應縮放功能，設置了

body style="transform: scale(0.807292, 0.618519);"

而elementUI的select生成的彈窗代碼使用的是絕對定位

position: absolute; top: 94px; left: 674px;

由此導致了select彈窗的錯位。可能我是初學Vue，找了一些資料，但是仍然沒有解決彈窗錯位的問題，于是我想能不能做一個基于Vue的仿chosen-select的組件。于是，邊學邊做，花了大概一周時間實現(xiàn)了單選和多選的基本功能，頁面怎么自適應窗口變化彈窗都不會錯位。

組件使用效果如下：

多選

<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:默認為false，設置為true時為多選

option-data:下拉選項數(shù)組，如果多選的話，每個數(shù)據(jù)項需要有‘is_active’：‘1’，單選時候每個數(shù)據(jù)項可以不要。[{'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:如果需要設置組件的初始值，結(jié)合監(jiān)聽屬性實現(xiàn)

size:多選時設置最大容器的最大高度

最開始時候?qū)崿F(xiàn)了optionGroup的功能，后來做了搜索功能后把optionGroup給去掉了，后來想了一下，還是把它加上比較合適，在下一個版本再加上該選項。

調(diào)用該組件的完整代碼如下，后續(xù)我把代碼傳到Github上做個分享，再把鏈接放上來，初次開發(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>多選設置值<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>單選設置值<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">窗口自適應</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>

到此這篇關于ElementUI select彈窗在特定場合錯位問題解決方案的文章就介紹到這了,更多相關ElementUI select彈窗錯位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: