标签：info beyondScreen 栏过 screen 按钮 list 收起 eq 监听

1. html部分

  <div  class="screen_list">
                <span class="screen_list_title">项目 : </span>
                <div class="screen_list_info">
                    <span class="info_b" v-for="(item,index) of screen_3" :key="index"
                        @click='screenSelect3(item.project_id)' :class="{active:screen_select_3==item.project_id}">
                        {{item.name}}</span>
                </div>
                <span class="more_screen_c">
                    <span @click="moreScreenOpen($event)" id="open3" class="more_screen more_screen_open">
                        <span>更多</span>
                        <img src="../../../../static/images/project/open.png" alt="">
                    </span>
                    <span @click="moreScreenClose($event)" id="close3" class="more_screen more_screen_close">
                        <span>收起</span>
                        <img src="../../../../static/images/project/arrow_top.png" alt="">
                    </span>
                </span>
 </div>

2.js部分

//封装函数，筛选栏过多时，显示更多和收起按钮
function beyondScreen() {
   setTimeout(() => {
       var screenHeight_list = $(".screen_list_info");
       for (var i = 0; i < screenHeight_list.length; i++) {
           $('.screen_list_info').eq(i).removeClass('height_beyond');
           $('.screen_list_info').eq(i).next().css('display', 'none');
           if (screenHeight_list[i].clientHeight > 75) {
               $('.screen_list_info').eq(i).addClass('height_beyond');
               $('.screen_list_info').eq(i).next().css('display', 'inline-block');
           }
       }
   }, 400)
};

//DOM加载完毕后调用方法即可，如果筛选栏的内容更新，需要重新调用该函数
window.onload=function(){
beyondScreen();
}

3. vue中监听数据变化，并重新调用函数

computed: {
      // 同时监听多个数据
        allLatlngs() {
            const { screen_2, screen_3 } = this;
            return {
                screen_2, screen_3
            };
        },
    },
watch: {
        // 同时监听多个数据
        allLatlngs() {
            beyondScreen();
        },
        
        //监听多个数据变化
		 screen_3: {
            handler(newVal, oldVal) {
            	//newVal变化前的值, oldVal变化后的值
                beyondScreen();
            },
            deep: true,
            immediate: false,
        }, 
        
//handler：其值是一个回调函数。即监听到变化时应该执行的函数。

///deep：其值是 true 或 false ；确认是否深入监听。deep 的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器（受现代 JavaScript 的限制 (以及废弃 Object.observe )，Vue 不能检测到对象属性的添加或删除）。

//immediate：其值是 true 或 false；immediate : true 代表如果在 watch 里声明了之后，就会立即先去执行里面的 handler 方法，如果为 false 就跟我们以前的效果一样，不会在绑定的时候就执行。
},

标签：info,beyondScreen,栏过,screen,按钮,list,收起,eq,监听
来源： https://blog.csdn.net/qdcainiao/article/details/114824096

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。