监听浏览器宽度动态移动元素位置

		 //用于在IT浏览兼容不同的浏览器
                addEvent:  function(element, type, handler) {

			if (element.addEventListener) {
	  			element.addEventListener(type, handler, false);
			} else if (element.attachEvent) {
	  			element.attachEvent('on' + type, function() {
	    			handler.call(element);
	  			});
			} else {
	  			element['on' + type] = handler;
			}
		},                    

  动态的计算元素的节点位置变化

 

 

 

 

    <div class="list" :style="{width: $index == activeIndex ? listWidth : '0px'}">  //listWidth:动态改变得位置变量,activeIndex:激活对应的Index,
                <h5 class="label" v-text="service.label"></h5>
                <p class="remark" v-text="$index == activeIndex ? service.remark : service.key"></p>
                <ul>
                    <li v-for="item in service.children">
                        <span v-text="item.label"></span>
                    </li>
                </ul>
            </div>

 

 

	getWidth: function() {
			this.listWidth = parseInt(this.$el.offsetWidth - 140 * 4) + 10 + 'px';//根据需要计算移动的宽度位置
		}
        //在mounted里面调用此方法          this.getWidth(); this.addEvent(window, 'resize', this.getWidth);

  

posted @ 2019-12-19 16:38  Empress&  阅读(344)  评论(0编辑  收藏  举报