在后台管理系统中，常常会因为不同的权限，展现不同的菜单。但这仅仅是显示控制，而我们要做的是没有的菜单权限，直接输入URL也不可访问，真正的实现菜单权限控制。一、动态菜单显示1. 后端返回的菜单数据处理后端返回的菜单数据一般有两种，处理好的树状结构、或者未处理的列表数据（这种情况需要我们去转换成树状结构，可看我的另外一篇博客【js树形结构操作】）。下面是后端返回的数据：[
{
"id":
转载
2024-10-21 08:39:21
469阅读
https://element-plus.org/zh-CN/component/icon.html 静态示例 <el-icon> <Menu/> </el-icon> 动态示例 Menu为图标名称，
原创
2024-02-19 16:26:58
2476阅读
@SayGoodBey ，恰好看到你问了，那就写出我的方法吧。我是在一个子组件中实现的，你可以动态的添加该子组件：下面的content是markdown格式的数据，../common/markdown文件是自己写好的基于marked的解析函数，它会将Markdown格式析为Vue格式的字符串:
// 上面会解析为：
用下面的方法即可以实现点击图片时，会输出信息。当然其他
基本语法<div id="app">
{{ message }}
</div>div的id是app，内容为一个名为message的变量在js代码块内：var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})声明一个名为app的对象，该对象是一个vue对象，其中element使
转载
2024-09-12 07:27:35
167阅读
函数创建了一个表单实例。接着注册了表单字段，并对每个字段进行了一些基本的验证规则设置。最后，我们定义了提交表单和重置表单的方法，并在组件中使用这些方法。然后定义了一个表单数据模型。在这段代码中，我们首先引入了
原创
2024-01-21 00:26:44
382阅读
<template> <el-form ref="ruleformRef" :model="ruleform"> <el-form-item v-for="(li, i) in ruleform.array" :key="i" :label="`姓名${i}`" :prop="`array.${i} ...
转载
2021-10-29 00:43:00
1929阅读
2评论
【代码】Vue3 动态组件。
原创
2024-09-19 11:03:55
178阅读
markRow：标记一个对象，使其不能成为一个响应式对象。toRaw：将响应式对象（由 reactive定义的响应式）转换为普通对象。shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。shallowReactive：只处理对象最外层属性的响应式（浅响应式）。问题：为什么vue3需要对引入的组件使用markRow？vue2<template> <
原创
精选
2023-02-26 22:12:52
694阅读
1评论
vue3动态组件
原创
2024-05-16 11:03:52
148阅读
作者 | 曾建在互联网有一个“8秒原则”，即如果有一个页面的响应时间超过8秒，那么大部分的用户就会放弃加载，从而放弃使用该页面或网站。淘宝，京东，苏宁等电商每天都有成千上万的访问量，在618电商节，双十一购物逛欢节更是具有数以万计的秒杀活动，是什么能够支撑系统在如此高并发情况下还能正常运行？这就不得不提CDN了，CDN是什么呢，让我们一探究竟。CDN是什么?CDN其全称是Content Deliv
场景：使用vue create脚手架快速搭建vue的项目前提：需要安装node.js和cnpm以及yarn 并且cnpm需要设置为淘宝镜像，cnpm和yarn安装教程网上很多可以自行搜索1.使用dos命令安装vue-cli脚手架//这个是从镜像源下载
cnpm install -g @vue/cli查看安装的版本（显示版本号说明安装成功）vue --version2.使用vue create命令搭
一、参考二、WPF定义WPF全称：Windows Presentation FoundationWPF是一个可创建桌面客户端应用程序的 UI 框架。 WPF 开发平台支持广泛的应用开发功能，包括应用模型、资源、控件、图形、布局、数据绑定、文档和安全性。 此框架是 .NET Framework 的一部分，因此，如果你曾经使用 ASP.NET 或 Windows 窗体通过 .NET 构建应用程序，应该
转载
2024-03-07 11:49:14
290阅读
之前有一篇文章也是采用了Image实现的图片按钮，不过时间太久远了，忘记了地址。好吧，这里我进行了进一步的改进，原来的文章中需要设置4张图片，分别为可用时，鼠标悬浮时，按钮按下时，按钮不可用时的图片，这里我只用了一张图片，利用C#的图片灰度处理自动获得不可用时的图片，利用图片的间距实现悬浮及按下效果。先上效果：（正常 悬浮 按下 不可用） 代码其实比较简单，唯一的难点就是把图片转换
介绍我有一种情况，我希望能够将项目添加到列表中，并在列表中移动项目，这似乎是使用a的最简单方法ListBox。我立刻想到了如何以通用的方式做到这一点，然后，也许，可以使用行为来做到这一点。这似乎是一个非常有用的想法。我决定以一种简单的方式为我正在开发的应用程序做这件事，但我想我会创建一个演示项目来探索这个想法。这是结果。概观该行为实际上有四个独立的部分，可以在一个类中执行不同的功能：添加项目将所选
1 简介及安装简介 vue-router是一个vue框架的路由管理包。 与ng的路由基本差不多，总体来说只需要记住两个标签<router-link>(路由导航)和<router-view>(路由插座)两个元素，然后逐渐扩展。安装 1. 直接下载/cdn方式，需先引入vue.js再引入vue-router.js 2. npm：npm i vue-router --sa
1我们在vue中使用图片大概有以下几种姿势1 在vue的template中 引用 属于静态引用 一般不会有什么问题2 在vue的css中 引用 background: url(../../../assets/imgs/close.png) 0 0 no-repeat; 属于静态引用 一般不会有什么问题3 在template中动态引用 那么，vue/webpack 中的图片到底是如
转载
2024-09-18 11:13:53
66阅读
项目创建过程中经常遇到的一个需求就是权限管理，本文就我在使用动态路由的过程中进行一个总结首先，前端想要实现对菜单的动态渲染实际上有两种操作方式1.前端还是书写静态路由表，根据后端传来的code利用v-if去判断渲染菜单项 实际这种使用方式并不可取，因为不方便后期维护。 2.前端只写没有权限控制的login，register, 404 页面的路由，其余路由则是根据后端传过来的，拼接入路由表。这里我在
前言icon在我们前端日常开发中是很常用的，它有很多种使用方式，时至今日，它的使用方式经过了很多种演变，本文会为大家介绍icon的一些历史演变，分析一下这几种使用方式的优劣，我们将采用svg sprites这种方式使用icon，演示代码使用vue+vue-cli3+，看完之后，你会发现这种使用方式完全称得上优雅二字追溯历史Img标签引入最早我们使用图标时只是单纯img标签引入图片，个人感觉也还好但
转载
2024-07-23 08:07:20
381阅读
vue3 component 动态组件 vue3的setup默认没有挂载组件了，因为自动挂载了，所以如果要做动态组件，就挂载到全局，在main.ts
原创
2024-05-27 11:25:54
620阅读
前言：最近在改造vue-cli 2.x + webpack2.x的项目时，由于之前路由是静态的，没有根据菜单权限动态生成前端路由。所以想对此进行改造，然后碰到了一些问题和坑，现在总结一下，避免以后继续踩坑。先来说一下vue项目，组件懒加载的几种方式。1. require（AMD规范）{
path: '/demo',
name: 'Demo',
component: reso
转载
2024-10-09 09:52:11
366阅读
