xiaoshi_system/src/utils/model/menuInRow/index.vue

<template>
    <div class="menuInRow">
        <template v-if="showData.length>0">
            <div class="showMenu" v-menuInRow="getMenuNum">
                <div v-for="(item,index) in showData" :key="'show'+index" @click.prevent="clickDom(item)" class="menuItem" :class="index >= (surplusNum>0?num-1:num)?'display_none':''">
                    <slot name="menuItem" v-if="data.length>0" :row="item">
                        <div v-html="item[prop.name]"></div>
                    </slot>
                    <div v-else v-html="item.name"></div>
                </div>
            </div>
            <div v-if="surplusNum>0" class="hideMenu">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        更多<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item,index) in hideData" :key="'hide'+index" @click.native.prevent="clickDom(item)">
                            <slot name="menuItem" v-if="data.length>0" :row="item">
                                <div v-html="item[prop.name]"></div>
                            </slot>
                            <div v-else v-html="item.name"></div>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </template>
        <template v-if="data.length == 0">
            <div v-getChildData style="display:none">
                <slot></slot>
            </div>
        </template>
    </div>
</template>

<script>
async function menuInRowFun(el,binding,childNodes){
  el.style.whiteSpace = 'nowrap';
  el.style.width = 'calc(100% - 60px)'
  var el_width = el.clientWidth
  
  var width = 0
  var num = 0
  var surplusNum = 0
  async function getElementWidthWithMargin(element) {
    const rect = await element.getBoundingClientRect();
    return rect.width;
  }
  var widths = []
  for(var i = 0;i<childNodes.length;i++){
    let childWidth = await getElementWidthWithMargin(childNodes[i])
    widths.push(childWidth)
    width += childWidth
    if(width >el_width ){
      break;
    }
    num ++
  }
  surplusNum = childNodes.length - num
  binding.value(num,surplusNum)
  el.style.width = width - widths[num-1] + 20 + 'px'
}
function getMenuItem(el, binding,vnode){
    var that = vnode.context
    var childNodes = el.childNodes
    var data = []
    for(var i = 0;i<childNodes.length;i++){
        var child = childNodes[i]
        var name = child.getAttribute('name')
        if(name != 'menuInRowItem'){
            continue;
        }
        var value = child.getAttribute('value')
        var label = child.outerHTML
        data.push(
            {
                value:value,
                name:label
            }
        )
    }
    that.showData = data
    // binding.value(data)
}
export default {
    directives:{
        getChildData:{
            bind(el, binding,vnode){
                getMenuItem(el, binding,vnode)
                // console.log(that.showData)
            },
            // componentUpdated(el, binding,vnode) {  
            //     getMenuItem(el, binding,vnode)
            // },
        },
        menuInRow:{
            bind(el, binding,vnode) {  
                var that = vnode.context
                var childNodes = el.childNodes
                that.$nextTick(()=>{
                    menuInRowFun(el, binding,childNodes)
                    window.addEventListener('resize',()=>{
                       that.$commonJS.debounce( menuInRowFun(el, binding,childNodes),1000)
                    })
                })
                
            },  
            // 如果需要，可以在更新时再次执行逻辑  
            // componentUpdated(el, binding,vnode) {  
            //     menuInRowFun(el, binding)
            // },  
            unbind(el) {
                var eventListener = window.eventListeners_
                if(!eventListener){
                return false
                }
                const listeners = eventListener.resize
                if(listeners){
                window.removeEventListener("resize");
                }
                
            },
        }
    },
  components: {},
  props: {
    data:{
        type:Array,
        default:()=>{
            return []
        }
    },
    prop:{
        type:String,
        default:'name'
    }
  },
  data() {
    return {
        config:{
            num:0,
            surplusNum:0,
        },
        num:0,
        surplusNum:0,
        showData:this.data,
        hideData:[]
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
  },
  methods: {
    getMenuNum(num,surplusNum){
        this.num=num||0,
        this.surplusNum=surplusNum||0
        // this.showData = this.getShowData()
        this.hideData = this.getHideData()
    },
    getShowData(){
        if(this.surplusNum==0){
            return this.data
        }else{
            return this.data.slice(0, this.num)
        }
    },
    getHideData(){
        if(this.surplusNum==0){
            return []
        }
        return this.showData.slice(-this.surplusNum)
    },
    clickDom(item){
        if(this.data.length>0){
            this.$emit('click',item)
        }else{
            this.$emit('click',item.value)
        }
        
    }
  },
};
</script>
<style lang="scss" scoped>
.menuInRow{
    display:flex;
    align-items: center;
    width:calc(100% - 40px);
    padding:5px 20px;
    border-top:1px solid #e6e6e6;
    overflow:hidden;
    .showMenu{
        display:flex;
        align-items: center;
        width:calc(100% - 60px);
    }
    .menuItem{
        cursor: pointer;
        margin:0 10px;
        padding:5px 10px;
        min-width:fit-content
    }
    .hideMenu{
        margin-left:10px;
        width:50px;
        min-width:50px;
        background:white;
        cursor: pointer;
    }
}
.display_none{
    opacity: 0;
    pointer-events: none;
}
</style>