element 如何点击菜单,在菜单右侧出现个抽屉
时间: 2024-09-27 11:15:55 浏览: 229
在前端开发中,"Element"通常指Vue.js框架下的Element UI库,这是一个流行的UI组件集,其中包括各种易于使用的组件。如果你想实现在Element UI的菜单中,点击后在右侧弹出一个类似抽屉的设计,可以按照以下步骤:
1. 首先,引入Element UI的`el-menu`组件作为主菜单,它提供了导航条的基本结构。
```html
<template>
<div>
<el-menu :default-active="currentIndex" class="menu">
<!-- 菜单项配置 -->
</el-menu>
<!-- 抽屉组件,使用el-dialog实现 -->
<el-dialog :visible.sync="drawerVisible" width="50%" class="drawer">
<!-- 抽屉内容 -->
</el-dialog>
</div>
</template>
```
2. 在`methods`里定义处理菜单点击事件的函数,当点击某个菜单项时,控制抽屉组件的可见性:
```javascript
<script>
export default {
data() {
return {
currentIndex: 1,
drawerVisible: false,
};
},
methods: {
handleMenuClick(item) {
this.drawerVisible = item === 'your-drawer-item';
}
},
};
</script>
```
这里的`handleMenuClick`可以根据实际的菜单项名称判断是否显示抽屉。
3. 使用CSS美化抽屉样式,使其看起来更像抽屉效果。
阅读全文
相关推荐














@using HengJiuGamesManage.Models;
@{
Layout = null;
}
@{
Users users = new Users();
if(ViewBag.UserModel != null) {
users = ViewBag.UserModel;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>恒久游戏管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="~/Scripts/jquery-3.4.1.js"></script>
<style>
.layui-footer {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
恒久游戏管理系统
@*
nav 1
nav 2
nav 3
nav groups
*@
@users.UserName
游戏大类
权限管理
帮助
Layui 框体布局内容主体区域
下面是充数内容,为的是出现滚动条
Copyright © 2025 Layui MIT Licensed
免责声明开源协议 在线测试 广告赞助 静态主题
<script src="~/Scripts/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function () {
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
//头部事件
util.event('lay-header-event', {
menuLeft: function (othis) { // 左侧菜单事件
layer.msg('展开左侧菜单的操作', { icon: 0 });
},
menuRight: function () { // 右侧菜单事件
layer.open({
type: 1,
title: '公告',
content: '公告1',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
//退出
function Exit() {
$.ajax({
url:"/Home/ExitSession",
type: "post",
success: function (res) {
if (res.code == 0) {
layer.msg(res.msg, { icon: 6, time: 2000 }, function () {
window.location.href = "/Login/Index";
})
}
else {
layer.msg(res.msg, { icon: 5, time: 2000 });
}
}
})
}
function ModifyInfo() {
layer.open({
type: 2, // page 层类型
area: ['669px', '638px'],
title: '资料修改',
shade: 0.5, // 遮罩透明度
shadeClose: false, // 点击遮罩区域,关闭弹层
maxmin: false, // 允许全屏最小化
anim: 0, // 0-6 的动画形式,-1 不开启
content: '/Home/ModifyBaseInfo'
});
}
</script>
</body>
</html>这个页面是管理系统登陆后的主页面,上面的是一个点击后出现下拉列表,目标是可以进行修改资料,修改密码,以及退出登录,但现在我的代码中下拉中缺少修改密码,以及把修改密码写在修改个人资料里面 ,请你进行优化

@{
Layout = null;
}
@using WebApplication1.Models;
@{
Users users = new Users();
if (ViewBag.UserModel != null)
{
users = ViewBag.UserModel;
}
}
<!DOCTYPE html>
<html>
<head>
//引用JS文件
<script src="~/Scripts/layui/layui.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
</head>
<body>
恒久游戏管理系统
@users.UserName
基本信息管理
权限管理
游戏大类管理
<iframe style="width:99.7%;height:100%" id="demo" frameborder="0"></iframe>
底部固定区域
<script>
//JS
layui.use(['element', 'layer', 'util'], function () {
var element = layui.element;
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
//头部事件
util.event('lay-header-event', {
menuLeft: function (othis) { // 左侧菜单事件
layer.msg('展开左侧菜单的操作', { icon: 0 });
},
menuRight: function () { // 右侧菜单事件
layer.open({
type: 1,
title: '更多',
content: '处理右侧面板的操作',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
});
//退出系统
function Exit() {
$.ajax({
url: "/Home/ExitSession",
type: "get",
success: function (result) { //判断是否查到数据
if (result.code == 0) {
layer.msg(result.msg, { icon: 6, time: 1000 }, function () {
window.location.href = "/Login/Index";
});
} else if (result.code == 1) {
layer.msg(result.msg, { icon: 0, time: 3000 }, function () {
});
}
}
})
}
//修改个人信息
function ModifyUserInfo() {
// 在此处输入 layer 的任意代码
layer.open({
type: 2, // page 层类型
area: ['450px', '700px'],
title: '修改个人信息',
shade: 0.6, // 遮罩透明度
shadeClose: false, // 点击遮罩区域,关闭弹层
maxmin: true, // 允许全屏最小化
anim: 0, // 0-6 的动画形式,-1 不开启
content: '/Home/ModifyUserInfo'
});
}
//修改密码
function ModifyPwd() {
layer.open({
type: 2, // page 层类型
area: ['580px', '435px'],
title: '修改密码',
shade: 0.6, // 遮罩透明度
shadeClose: false, // 点击遮罩区域,关闭弹层
maxmin: true, // 允许全屏最小化
anim: 1, // 0-6 的动画形式,-1 不开启
content: '/Home/ModifyPwd'
});
}
//职位管理
function ToUrl(res) {
$("#demo").attr("src", "/" + res + "/Index")
}
</script>
</body>
</html>这是home文件夹下的index 我在sql插入了INSERT INTO OrganizationStructure (ID, OrgName, OrgCode, Leve, ParentId, CreateDate, ModifyDate)
VALUES
-- 根节点(总部)
(NEWID(), '集团总部', 'GROUP001', 1, NULL, '2023-01-15 09:00:00', '2023-03-20 14:30:00')但是表格还是显示不出来显示找不到应用资源



@using HengJiuGamesManage.Models;
@{
Layout = null;
}
@{
Users users = new Users();
if (ViewBag.UserModel != null)
{
users = ViewBag.UserModel;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>恒久游戏管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="~/Scripts/jquery-3.4.1.js"></script>
<style>
.layui-footer {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
恒久游戏管理系统
nav 1
nav 2
nav 3
nav groups
@users.UserName
游戏大类
权限管理
帮助
Layui 框体布局内容主体区域
下面是充数内容,为的是出现滚动条
Copyright © 2025 Layui MIT Licensed
免责声明开源协议 在线测试 广告赞助 静态主题
<form class="layui-form">
<label class="layui-form-label">原密码</label>
<input type="password" name="OldPassword" lay-verify="required|pass" placeholder="请输入原密码" autocomplete="off" class="layui-input">
<label class="layui-form-label">新密码</label>
<input type="password" name="NewPassword" id="newPass" lay-verify="required|pass|passcheck" placeholder="请输入新密码" autocomplete="off" class="layui-input">
<label class="layui-form-label">确认密码</label>
<input type="password" id="confirmPass" lay-verify="required|passcheck" placeholder="请再次输入新密码" autocomplete="off" class="layui-input">
<button class="layui-btn" lay-submit lay-filter="changePass">立即修改</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</form>
<script src="~/Scripts/layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'form', 'util'], function () {
var element = layui.element;
var layer = layui.layer;
var form = layui.form;
var util = layui.util;
var $ = layui.$;
//头部事件
util.event('lay-header-event', {
menuLeft: function (othis) { // 左侧菜单事件
layer.msg('展开左侧菜单的操作', { icon: 0 });
},
menuRight: function () { // 右侧菜单事件
layer.open({
type: 1,
title: '公告',
content: '公告1',
area: ['260px', '100%'],
offset: 'rt', // 右上角
anim: 'slideLeft', // 从右侧抽屉滑出
shadeClose: true,
scrollbar: false
});
}
});
// 表单验证
form.verify({
pass: [/^[\S]{6,12}$/, '密码必须6-12位且不能包含空格'],
passcheck: function (value) {
if ($('#newPass').val() && $('#confirmPass').val() &&
$('#newPass').val() !== $('#confirmPass').val()) {
return '两次输入的密码不一致';
}
}
});
// 提交事件
form.on('submit(changePass)', function (data) {
// TODO: 添加密码修改逻辑
console.log(data.field);
layer.msg('提交成功', { icon: 1 });
return false;
});
});
//退出
function Exit() {
$.ajax({
url: "/Home/ExitSession",
type: "post",
success: function (res) {
if (res.code == 0) {
layer.msg(res.msg, { icon: 6, time: 2000 }, function () {
window.location.href = "/Login/Index";
})
}
else {
layer.msg(res.msg, { icon: 5, time: 2000 });
}
}
})
}
// 修改资料弹窗
function ModifyInfo() {
layer.open({
type: 2, // page 层类型
area: ['669px', '638px'],
title: '资料修改',
shade: 0.5, // 遮罩透明度
shadeClose: false, // 点击遮罩区域,关闭弹层
maxmin: false, // 允许全屏最小化
anim: 0, // 0-6 的动画形式,-1 不开启
content: '/Home/ModifyBaseInfo',
end: function () {
// 刷新当前页面
location.reload();
}
});
}
// 修改密码弹窗
function ModifyPassword() {
layer.open({
type: 1,
title: '修改密码',
area: ['450px', '300px'],
content: $('#passwordModal'),
success: function () {
layui.form.render();
}
});
}
</script>
</body>
</html>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HengJiuGamesManage.Models;
namespace HengJiuGamesManage.Controllers
{
public class HomeController : Controller
{
ReturnJsonData jsonData = new ReturnJsonData();
public ActionResult Index()
{
//获取服务器中存储的session数据
var sessionUsers = System.Web.HttpContext.Current.Session["Users"];
if(sessionUsers == null)
{
return Redirect("/Login/Index");
}
//强制转化
Users users = sessionUsers as Users;
//赋值
ViewBag.UserModel = users;
return View();
}
public ActionResult ExitSession()
{
//删除session 变量
Session.Remove("Users");
var sessionUsers = System.Web.HttpContext.Current.Session["Users"];
if (sessionUsers == null)
{
jsonData.code = 0;
jsonData.msg = "退出成功,请稍后";
}
else
{
jsonData.code = 1;
jsonData.msg = "网络不稳定,请重新尝试";
}
return Json(jsonData);
}
public ActionResult ModifyBaseInfo()
{
var sessionUsers = System.Web.HttpContext.Current.Session["Users"];
if (sessionUsers == null)
{
return Redirect("/Login/Index");
}
return View();
}
public ActionResult GetUserInfo(Users users)
{
try
{
// 1. 获取当前用户 ID(或从表单隐藏域获取)
var userId = users.ID;
// 2. 查询数据库中的用户
using (var db = new AoutEntities())
{
var user = db.Users.FirstOrDefault(u => u.ID == userId);
if (user == null)
{
return Json(new { code = 1, msg = "用户不存在" });
}
// 3. 更新用户信息(根据表单字段赋值)
user.UserCode = users.UserCode;
user.UserName = users.UserName;
user.Sex = users.Sex;
user.BirthDay = users.BirthDay;
user.NativePlace = users.NativePlace;
user.Email = users.Email;
user.Tel = users.Tel;
user.Address = users.Address;
db.SaveChanges(); // 保存到数据库
var result = db.SaveChanges();
return Json(new { code = 0, msg = "修改成功" });
}
}
catch (Exception ex)
{
return Json(new { code = 1, msg = "修改失败:" + ex.Message });
}
}
}
}这两段代码给出优化


