Ant Design(蚂蚁组件)是蚂蚁集团体验技术部经过大量项目实践和总结,逐步打磨出的一个设计系统,内含带有 React 的 UI 库。它是为企业级产品设计而创建的。Ant Design 提供了高质量的交互界面设计组件和演示。作为 UI 设计师,在我们的工作中,善于利用现有的设计系统组件能够极大地提升工作效率。今天,即时设计设计师将向大家介绍广泛使用的设计系统 Ant Design 以及它的使用
转载
2024-03-12 14:41:01
55阅读
一、前言 利用Sass预处理实现换肤和字体大小调整。 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制。页面初始化是的字体适配可以根据devicePixelRatio和css3 media进行适配. 实现方法:1.利用全局变量和bus事件,使用js方式调整字体和颜色(这里暂不讨论); 2.利用scss预处理方式实现
转载
2024-07-13 05:43:43
478阅读
1、下载方法 1.打开阿里iconfont,记得登录才可以下载,将所要下载的图标依次添加至购物车,然后点击右上角的购物车,点击添加至项目 ,点击资源管理器=》我的项目 2、选择font class,可以点击下载至本地,也可以生成在线地址打开你的网页代码,添加link标签,将上面的代码粘贴到href属性下。注意需为路径添加“http:”字样。 然后使用i标签引用图标。图标名称可以
有时间总结了下动态添加tab页的相关知识:非常鄙视那些引用我文章的网站和个人网站,引用了别人的东西还带商业广告!~在此谢绝转载 一。 首先得写个动态添加Tab页的JS操作文件,我想在网上应该能找到,喜欢自己可以写 二 。其次是 写个动态添加Tab页的样式CSS文件,控制TAB标签等样式 &
1. 需求最近项目中要修改原有的菜单,项目UI为antd,antd的导航菜单长这样: 看着挺好的,完美对齐,但是当把我的菜单文案填入之后发现: 左右不对齐,这也太丑了吧,这要是放任不管要被怼的。2. 排查问题开始审查元素,先查看官方demo正常能对齐的样式: 再看下我的demo不能对齐的样式: 发现我的菜单里少了一个 min-width ,也就是说antd在某一步给官方的demo添加了st
转载
2024-06-18 21:57:36
106阅读
大文件分片上传就是一个契合分治算法的场景,现而今,视频文件的体积越来越大,高清视频体积大概2-4g不等,但4K视频的分辨率是标准高清的四倍,需要四倍的存储空间——只需两到三分钟的未压缩4K 电影,或者电影预告片的长度,就可以达到500GB。 8K视频文件更是大得难以想象,而现在12K正在出现,如此巨大的文件,该怎样设计一套合理的数据传输方案?这里我们以前后端分离项目为例,前端使用Vue.js3.0
转载
2024-10-29 20:11:57
87阅读
目的:记录一下自己工作过程中遇到的 Ant Design Vue 开发问题 文章目录Ant Design Vue 开发问题async和await让异步编程更简单1、antdv中table组件 scopedSlots 和 ellipsis 属性一起使用,悬浮框失效问题2、antdv修改调用的后端地址3、Java修改application名称和IP地址4、antdv调用后端接口文件5、antdv路由文
使用Ant Design Vue Pro 基础框架都知道好用,但是MultiTab标签一直未解决(V3.0.0),最新版解决了但是要收费9K(2022-01-21日)。 首先需要实现如下:MultiTab标签打开菜单路由页面之后keep-alive就一直保持缓存当前路由页面,直到点击MultiTab标签的X(或者点击菜单:关闭当前/关闭左边/关闭右边/关闭全部)此时删除keep-alive缓存。下
转载
2024-04-24 12:22:04
126阅读
第一篇文章简单的介绍了一下ant-design-pro,关于项目的搭建,我想官网的文档已经写得很清楚了,这里就不多做赘述了,这篇文章,我们来探讨一下ant-design-pro的动态路由。
动态路由首先是和用户登录权限挂钩了,不同的角色权限,看到不同的路由菜单,当用户登录后得到roles(角色),前端根据roles(角
转载
2024-03-19 00:04:06
143阅读
最近在学习使用Vue作为前端的框架,本文记录路由插件vue-router,以及搭建登录页面的过程。
vue-router在使用vue-router时,我们需要做的就是把路由映射到各个组件,vue-router会把各个组件渲染到正确的地方。1安装、起步· 安装 npm install vue-router --save ·2基本用法· <div id="app"
转载
2024-04-30 07:13:32
107阅读
使用VUE开发后台管理系统 完全由后端控制左边菜单项思路在传统开发后台管理系统时,都会涉及权限控制这一功能需求 即:根据不同登录的角色账号来使用该账号拥有的功能,也就是说系统左边的菜单栏不是固定不变的,而是根据登录账号的权限去动态控制的,现在主流的两种模式即:1.前后端配合控制 2.完全由后端来控制本章着重来介绍 第二种模式 :由后端数据控制前端的菜单借助Ant Design Pro Vue 来讲
转载
2024-04-19 11:37:14
210阅读
总结对于框架原理只能说个大概,真的深入某一部分具体的代码和实现方式就只能写出一个框架,许多细节注意不到。算法方面还是很薄弱,好在面试官都很和蔼可亲,擅长发现人的美哈哈哈…(最好多刷一刷,不然影响你的工资和成功率???)在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要
转载
2024-06-11 11:48:14
154阅读
需求:下拉菜单中数据过多,200条以上,就会导致Ant design Vue 中的select组件卡死。所以需要使用滑动到底部使其分页加载 可以借助 onPopupScroll 事件来监听下拉菜单的滚动事件,并判断当前是否已经到达了下拉菜单底部。具体可以通过以下步骤实现: 1、在组件中绑定 @popupScr
转载
2024-04-03 15:12:37
473阅读
1、官方文档请查看https://ant.design/components/menu-cn/antPro自带的菜单功能很强大,但是太复杂了,感觉大部分功能都用不上,下面实现一个简单从后台动态获取菜单的功能。 2、增加SubMenu方法 2.1 定义 const { SubMenu } = Menu
转载
2020-01-31 18:33:00
212阅读
2评论
今天花了大半天时间从老家回到工作地,路上因为肺炎封堵挺厉害,希望国家挺过这个难关,要不大家都失业可就惨了,上一篇做了一个展示数据的demo,这一篇研究antd Menu item点击事件 1、还是先看文档 在menu上增加onClick事件 2、handleClick代码如下 handleClick
转载
2020-02-01 22:33:00
729阅读
2评论
之前有写过Vue.Draggable实现拖拽效果(快速使用)最近项目中要用到这个拖拽的效果,当产品那个今日头条app编辑导航,拖拽的效果时,心里暗爽,(之前玩过呀,很简单的,事实证明,任何看似简单的东西,实现起来都不会那么一帆风顺,当然:当你真正实现了该效果时,会发现其实还是挺简单的:ps:自说自话,自己打自己脸\(^o^)/~),闲话少说,直接切入正题: 仔细观察发现,今日头条导航部分编辑
工作中需要制作一个看板,选型选用antV G2进行开发。由于项目前端是使用Vue,于是研究了antVG2在Vue中的使用。1.安装antv/g2在WebStrom下面Terminal中输入 npm install @antv/g2 --save 安装完成后为如下状态2.创建一个Vue文件,引入antV/g2 import G2 from '@antv/g2'; 3.创建一个函数,函数内部创建一个C
antdesign-vue结合sortablejs实现两个table相互拖拽排序实现效果sortablejs介绍具体实现 实现效果本来想在网上看看有没有基于antdesign做的,然后发现是真的少啊!废话不多说,先上图:sortablejs介绍首先先来认识一下这个插件: sortablejs 大家可以去细读一下它的api文档: 这边我就着重介绍一下我用到的api。 1.group可以传入对象,参
转载
2024-06-26 06:14:08
264阅读
Ant Design Vue pro 动态路由的实现和打包Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权限 如下图所示配置请求网络接口在api文件夹下login.js中根据自己后台的数据修改路由权限封装规则在store/module/user.js中修改GetInfo方法源js修改后js后台数据示例{
"co
转载
2024-05-14 10:30:07
50阅读
el-menu <el-menu default-active="1"> <el-submenu > <el-menu-item>
原创
2019-05-29 11:04:15
64阅读