vue实现回到顶部和点击导航出现模态框

回到顶部

<div ref='home'></div>
<span class="hui" v-show="huiShow" @click="huiTop">回到顶部</span>

mounted() {
    this.$refs.home.addEventListener('scroll',this.handlerscroll)
},
destroyed(){
    this.$refs.home.removeEventListener('scroll',this.handlerscroll)
},
methods: {
	huiTop() {
		this.$refs.home.scroll({
        	top:0,
        	// 控制向上的时候是缓慢的向上移动
        	behavior:'smooth'
      	})
	},
	handlerscroll() {
		// Math.ceil向上取整 距离顶部的高度如果大于100 就让回到顶部span显示 否则隐藏
		if(Math.ceil(this.$refs.home.scrollTop) >= 100) {
        	this.huiShow = true
      	} else {
        	this.huiShow = false
      	}
	}

点击导航出现模态框

// 模态框
<div class="mask" v-show="shownav">
	// 点击叉号让 shownav = false
	<div class="top" @click="shownav = false">X</div>
	// 使用父传子 把需要的背景和字体颜色传给子组件
	<jiugongge :bg="'transparent'" :color="'#fff'"></jiugongge>
</div>

// 子传父 传递一个自定义事件
<myHeader @showModel="showModel"></myHeader>
// 点击导航
<div class='right' @click='show'>
	<i class="iconfont icon-nav"></i>
	<span>导航</span>
</div>
// 子组件用 show事件来接收
show() {
	this.$emit('showModel',true)
}
showModel(val) {
	this.shownav = val
}

// 九宫格的子组件 获取接收过来的数据
<div class="nav" :style="{'backgroundColor':bg,'color':color}"></div>
props:["bg","color"]