其實這個很簡單，出發點就是想做一個點選切換的功能

原生html+css+js程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .nav-mobile-button {
        position: relative;
        float: left;
        padding: 9px 10px;
        margin-top: 8px;
        margin-right: 15px;
        margin-bottom: 8px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        outline: none;
        border-radius: 4px;
    }
    .nav-mobile-button .same:nth-child(1){
        margin-top: 0; 
    }
    .nav-mobile-button .same {
        display: block;
        margin-top: 4px;
        width: 22px;
        height: 2px;
        background: rgb(63, 81, 181);
        border-radius: 1px; 
    }
    .nav-mobile-button .icon-bar1 {
        transform: translate(0,0) rotate(-45deg);
    }
    .nav-mobile-button .icon-bar2 {
        display: none;
    }
    .nav-mobile-button .icon-bar3 {
        transform: translate(0,-250%) rotate(45deg);
    }
    .box{
        width: 400px;
        height: 500px;
        background-color: #eee;
        transform: translate(-400px,0);
    }
    </style>
</head>
<body>
<button class="nav-mobile-button">
    <span id="span1" class="same"></span>
    <span id="span2" class="same"></span>
    <span id="span3" class="same"></span>
</button>
<div class="box">
    
</div>
</body>
<script>
var oSpan1 = document.getElementById('span1'),
    oSpan2 = document.getElementById('span2'),
    oSpan3 = document.getElementById('span3');
var oBtn = document.querySelector(".nav-mobile-button"),
    oBox = document.querySelector(".box");
oBtn.onclick = function() {
    oSpan3.style.cssText = "transform: translate(0,-250%) rotate(45deg);transition: transform 1s;";
    oSpan1.style.cssText = "transform: translate(0,0) rotate(-45deg);transition: transform 1s;margin-top:4px;";
    oSpan2.style.display = "none";
    oBox.style.cssText = "transform: translate(0,0);transition: transform 1s;"
    oBtn.style.cssText = "z-index:1000;right:-48%;transition: right 1s;";
} 
</script>
</html>

點選三槓按鈕之後切換成這種效果

將其改成了vue元件
menu.vue

<template>
<div>
	<button class="nav-mobile-button" @click="change" ref="btn">
	    <span id="span1" class="same"></span>
	    <span id="span2" class="same"></span>
	    <span id="span3" class="same"></span>
	</button>
	<div class="box" ref="box">
	    
	</div>
</div>
</template>

<script>
export default {
	name: 'menu',
	data() {
		return {

		}
	},
	methods: {
		change() {
			this.$emit("change")
		}
	}
}
</script>
<style scoped lang="scss">
*{
    margin: 0;
    padding: 0;
}
.nav-mobile-button {
    position: relative;
    float: left;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    outline: none;
    border-radius: 4px;
}
.nav-mobile-button .same:nth-child(1){
    margin-top: 0; 
}
.nav-mobile-button .same {
    display: block;
    margin-top: 4px;
    width: 22px;
    height: 2px;
    background: rgb(63, 81, 181);
    border-radius: 1px; 
}
.box{
    width: 400px;
    height: 500px;
    background-color: #eee;
    transform: translate(-400px,0);
}
</style>

引入應用如下
Menu.vue

<template>
	<v-menu ref="menu" @change="change"></v-menu>
</template>
<script>
import menu from "@/menu/menu"
export default {
	name: 'menu',
	components: {
		"v-menu": menu,
	},
	data() {
		return {
			b: false,
			vChilds: null,
			vBtn: null,
			vBox: null
		}
	},
	mounted() {
		this.vChilds = this.$refs.menu.$refs.btn.childNodes;
		this.vBtn = this.$refs.menu.$refs.btn;
		this.vBox = this.$refs.menu.$refs.box;
		this.vBtn.style.cssText = "z-index:1000;right:0;transition: right 1s;";
	},
	methods: {
		change() {
			if(!this.b){
				this.vChilds[0].style.cssText = "transform: translate(0,0) rotate(-45deg);transition: transform 1s;margin-top:4px;";
				this.vChilds[1].style.display = "none";
				this.vChilds[2].style.cssText = "transform: translate(0,-250%) rotate(45deg);transition: transform 1s;";
				this.vBtn.style.cssText = "z-index:1000;right:-26%;transition: right 1s;";
				this.vBox.style.cssText = "transform: translate(0,0);transition: transform 1s;";
				
			}else{
				this.vChilds[0].style.cssText = "transform: translate(0,0) rotate(0);transition: transform 1s;margin-top:4px;";
				this.vChilds[1].style.display = "block";
				this.vChilds[2].style.cssText = "transform: translate(0,0) rotate(0);transition: transform 1s;";
				this.vBtn.style.cssText = "z-index:1000;right:0;transition: right 1s;";
				this.vBox.style.cssText = "transform: translate(-400px,0);transition: transform 1s;";
			}
			this.b = !this.b;
		}
	}
}
</script>

至此大功告成

繼續研究vue元件vue-menu元件

相關文章