@frontend_worker/search-selector/src/mixins/resize.js

《远程搜索+单选》组件区别于element-ui或iview组件库的select远程搜索， ①将头部显示的值和下拉选项显示的值独立开来， ②避免远程加载时头部默认值显示异常， ③支持插槽自定义 ④将搜索框值放置于下拉弹框里面

import { addResizeListener, removeResizeListener } from '../utils/resize-event';

export default {
    data() {
        return {
            ready: false,
            resizeEvents: [],
            resizeRef: ''
        };

    },
    methods: {
        resizeListener (event) {
            if(!this.ready) return;
            const { state, el, callback } = this.resizeEvents.find(item => item.el === event.target);
            let shouldUpdate = false;
            const { width: oldWidth, height: oldHeight } = state;
            const width = el.offsetWidth;
            if (oldWidth !== width) {
                shouldUpdate = true;
            }
            const height = el.offsetHeight;
            if(oldHeight !== height) {
                shouldUpdate = true;
            }
            if (shouldUpdate) {
                state.width = width;
                state.height = height;
                callback();
            }
        },
        createResizeListener(el, callback) {
            this.resizeEvents.push({
                el,
                callback,
                state: {
                    width: el.offsetWidth,
                    height: el.offsetHeight
                }
            });
            addResizeListener(el, this.resizeListener);
        },
        resizeCallback(){}
    },
    mounted() {
        const resizeEl = this.$refs[this.resizeRef] || this.$el;
        this.createResizeListener(resizeEl, this.resizeCallback);
        this.$nextTick(()=>(this.ready = true));
    },
    beforeDestory(){
        this.resizeEvents.forEach(item => {
            const { el } = item;
            removeResizeListener(el,this.resizeListener);
        });
    }
};