继续研究vue组件vue-menu组件

最新推荐文章于 2024-04-07 09:52:45 发布
最新推荐文章于 2024-04-07 09:52:45 发布
阅读量360 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5c4db5ef6fb9a04a0164b5f4
版权

其实这个很简单，出发点就是想做一个点击切换的功能

原生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>
复制代码

至此大功告成

weixin_33889245
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue封装上拉菜单组件_vue2的上下文菜单组件
cuk5340的博客
07-23 564
vue封装上拉菜单组件 菜单 (vue-menu) Recent web applications are mainly for mobile environments. Therefore UIs premised on mouse operation such as window, context-menu, nested-menu and so on are no longer mainst...
vue3使用element elpus 组件库中的menu组件，collapse不折叠
poguanba的博客
09-20 250
遇到这种情况的话，直接将menu自己封装的这个组件里面的最外层的div删掉就ok了。就很难评，后面发现其实是需要将图标拿出来就好了，emmmm...，好了一半。我的情况是这样的，动态创建路由，项目参照尚硅谷的教学视频。menu自己封装的组件。
Vue Floating Menu：一款轻量级、可自定义的浮動菜单组件
最新发布
gitblog_00089的博客
04-07 794
Vue Floating Menu：一款轻量级、可自定义的浮動菜单组件 项目地址:https://gitcode.com/yuanzhou3118/vue-floating-menu 在前端开发中，我们经常需要设计一些浮动元素，如悬浮按钮或菜单，以提供用户友好的交互体验。Vue Floating Menu 是一个专门为此场景设计的开源组件，它基于 Vue.js 框架，提供了高度的灵活性和定制性，让...
Vue()-常用组件之Menu组件
Good Luck
06-04 1903
左侧菜单组件
用Vue3自定义右键菜单，利用插槽封装＜ContextMenu＞组件
m0_51108612的博客
11-09 1115
在使用vue3的时候，我们可能需要对el-table等组件进行右键操作，如何为组件封装好一个右键菜单？
弹弹弹，弹走鱼尾纹的弹出菜单（vue）
weixin_34177064的博客
09-11 478
前言 上一篇面试的总结，大家看的还行，因为量很大，错误在所难免，希望大家发现错误了可以告诉我一声，我的邮箱是236490794@qq.com，一个小前端的希望。 言归正传 我们老样子直接先上效果图再开始今天的分享这个项目的github可以看一看 组件分析 界面组成 逻辑分析 最终实现 界面组成 从上图中，我们可以看出界面主要分为men...
vue-context-menu-vue js的上下文菜单组件。-Vue.js开发
05-27
vue-context-menu vue上下文菜单组件演示：https://vmaimone.github.io/vue-context-menu示例用法
vue-sidebar-menu:Vue.js侧边栏菜单组件
05-12
Vue.js侧边栏菜单组件 演示版 本文档适用于Vue 2，对于Vue 3，您可以尝试预发行版，请参见 安装 npm i vue-sidebar-menu --save 全局安装插件。 //main.js import Vue from 'vue' import VueSidebarMenu from 'vue...
vue-file-toolbar-menu:Vue应用程序的UI文件工具栏菜单
05-06
特征 :rocket: React性内容存储在Vue.js计算/数据字段中，而不是模板中 造型简单 为菜单和按钮添加自己的自定义组件 使用标准的 热键支持 ...import VueFileToolbarMenu from ' vue-file-toolbar-menu '
vue-dropdown-menu-Vue的下拉菜单组件。 任何元素都可以是下拉触发器，任何内容都可以下拉内容。-Vue.js开发
05-27
下拉菜单Vue的通用下拉菜单组件。 任何元素都可以是下拉触发器，任何元素都可以是下拉内容。 完全可定制的下拉菜单Vue的通用下拉菜单组件。 任何元素都可以是下拉触发器，任何元素都可以是下拉内容。 完全可定制-...
vue-simple-context-menu::pushpin: 为 Vue 构建的简单上下文菜单组件。 适用于左键和右键单击。 没什么太花哨的，只是有效且易于使用
05-29
vue-简单上下文菜单为 Vue 构建的简单上下文菜单组件。 适用于左键和右键单击。 没有什么太花哨的，只是有效且易于使用。演示安装 # npmnpm i vue-simple-context-menu# yarnyarn add vue-simple-context-menu或者您...
VueCircleMenu一个利用Vuejs实现的漂亮圆形菜单
08-08
VueCircleMenu 一个利用Vue.js实现的漂亮圆形菜单
vmenu:Visionect V 的 Evernote 后退菜单系统
06-29
虚拟菜单 vmenu 是由 Evernote 支持的食谱浏览器，旨在用于 安装 您真的应该考虑在 virtualenv 中安装 vmenu。 克隆，创建环境并安装需求。 git clone https://github.com/kaelspencer/vmenu.git cd vmenu virtualenv env source env/bin/activate pip install -r requirements.txt 配置 将config.cfg复制到debug.cfg （或就地编辑，只是不要签入！）。 这些值应该是不言自明的。 从 Evernote 获取您的令牌。 如果你想使用沙盒服务器，一定要设置SANDBOX=True 。 配置完成后，运行export VMENU_SETTINGS=debug.cfg 。 这告诉 vmenu 加载该文件以更新设置。 静态文件 食谱中的缩
menuv：FiveM菜单库，用于使用NUI创建菜单
02-03
MenuV | FiveM的独立菜单NUI菜单 是为编写的库，仅使用NUI功能。 该库允许您在创建菜单。 该项目是开源的，您必须尊重和辛勤工作。 产品特点 支持简单的按钮，滑块，复选框，列表和确认 支持物品上的表情符号 支持自定义颜色（RGB） 支持所有屏幕分辨率。 项目说明 可重新绑定的密钥 基于事件的回调 在菜单打开和空闲时使用2 msec 。 上的 主题：或 编译文件 使用和用 。 如果要使用master文件，则需要执行以下操作来构建Hole项目： npm install 下载/加载所有依赖项之后，可以通过执行以下命令来构建文件： npm run build 执行命令后，
vue-lil-context-menu-Vue的灵活的lil上下文菜单组件。-Vue.js开发
05-27
vue-lil-context-menu Vue的灵活上下文菜单组件。 向其传递任何您喜欢的菜单模板； 它甚至不必是菜单。 始终不显示vue-lil-context-menu Vue的灵活上下文菜单组件。 向其传递任何您喜欢的菜单模板； 它甚至不必是...
vue分页组件table-pagebar使用实例解析
09-01
Vue.js 是一个流行的前端JavaScript框架，它采用MVVM（Model-View-ViewModel）模式，简化了DOM操作，提供了响应式的数据绑定和组件化能力。在本实例中，我们讨论的是如何使用Vue分页组件`table-pagebar`，该组件是...
vue 下拉菜单.vue_vue2应用程序的简单径向菜单
cuk5340的博客
07-28 283
vue 下拉菜单.vue 径向菜单 (vue-radial-menu) Simple radial menu for vue2 apps. vue2应用程序的简单径向菜单。 安装 (Installation) npm i vue-radial-menu --save npm i vue-radial-menu --save 基本用法 (Basic usage) For somethin...
VueUI Day01(7.29)Vue 组件库、Vue 组件库、NavMenu 组件、ElementUI 的布局相关组件
m0_70328115的博客
08-03 209
Vue 组件库、Vue 组件库、NavMenu 组件、ElementUI 的布局相关组件
vue2手写简单版menu菜单组件
qq_43646782的博客
09-23 768
这是一个侧边菜单栏，可以实现二级菜单展示，只保持一个子菜单的展开。 可以当作一个练手的小demo来试一试，适合刚开始学习vue的小伙伴 点击某一菜单项，可能会弹出下拉菜单栏
vue <menu-item>组件
05-13
`<menu-item>` 组件是 Vue.js 中用于创建菜单项的组件，可以用于构建导航菜单、侧边栏菜单等。 以下是一个简单的 `<menu-item>` 组件的例子： ```html <li class="menu-item"> <a :href="link">{{ text }} ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值