有关 Element-ui 的一些思考

已于 2024-09-11 08:15:15 修改
阅读量765 收藏
点赞数 4
分类专栏： Vue2 文章标签： vue.js elementui 前端
于 2024-09-11 08:13:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43285360/article/details/142118916
版权

本篇文章是基于 element-ui 的

主题样式修改

曾经为了修改组件风格，一个项目用了上百个样式穿透，后来才发现定制一个主题就够了！

第一步，在官网的主题页面，修改背景色、字体颜色及边框颜色

第二步，下载主题

第三步，用下载的css文件替换掉默认的css文件

了解本专栏 订阅专栏 解锁全文 超级会员免费看
小白小白从不日白
关注
专栏目录
订阅专栏
element-ui手风琴自定义html,使用element-ui table expand展开行实现手风琴效果
weixin_31935149的博客
06-15 1176
写这篇博客的初衷：官网演示效果为点击toggle，已经展开的项不会因为其他项展开而关闭，所以延伸了下，扩展为手风琴效果。效果前瞻：先删减一下代码：查看详情{{ props.row.name }}export default {data() {return {tableData5: [{id: '1',name: '好滋好味鸡蛋仔1',desc: '荷兰优质淡奶，奶香浓而不腻1',}, {id: '...
element-ui 网格_UI备忘单：列表与网格
weixin_26732881的博客
08-03 1480
qt ui网格布局 重点 (Top highlight)Grids or lists? That is the question we will look at in this cheat sheet. While they can be used anywhere in your site, we are going to look primarily at search results, ca...
Element-ui 滚动条美化
专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域
06-21 7125
有时候为了使界面滚动条，各个浏览器的滚动条能保持一致，这样我们的项目避免在各个浏览器存在差异导致UI界面的不一致，这时候我们就可以考虑使用通用组件的方式，对各个需要滚动的页面，或者弹出窗口添加统一的组件进行包裹，来保证滚动效果在各个浏览器中能有更好的体验效果。最后我们看到各个浏览器中滚动条的效果，基本上各个浏览器的表现效果是一致的，添加通用组件，默认情况下滚动条是不显示的，只有鼠标移动过去才会进行显示，整体上效果和用户体验会更好。在源码顶部，看到有一个链接地址，是参考另一个插件的实现，如下所示。
element-ui按须引入注意事项
wjun520的博客
06-23 504
新vue脚手架按需要引入element-ui时，按官网介绍会出错的解决办法。
element-ui button 组件源码分享
qq_37309987的博客
02-01 1756
3.1.1 通过上图我们知道，真正控制 button 尺寸的并不完全是 size 属性，那么还有什么其他影响因素呢？注意：如果使用了自定义图标 icon，可以使用 element-ui icon 组件里面有的图标，也可以自定义一个图标，其实在这里传的 icon 就是 class（通过上面的图很容易看出）。关于 bbutton 按钮的源码分享部分就先到这里了，由于篇幅比较长，这里就不再做基于源码后的 demo 分享了，有时间下次专门写一篇关于基于源码理解后的 button demo 分享。
【vue后台管理系统】基于Vue+Element-UI+ECharts开发通用管理后台（上）
十八岁讨厌编程的博客
10-27 9053
本文涉及：项目所用技术栈、项目效果图、Vue-CLI搭建、Vue-Router的使用、首页框架搭建、菜单栏的引入和构建、菜单栏样式优化与Less使用、项目中的一些调试技巧、yarn和npm的安装对比
vue-cli和Element-UI搭配web前端
qq_46955316的博客
09-28 962
vue-cli
Vue + Element-ui实现换肤
z_blackbear的博客
02-24 1624
我的环境 @vue/cli 4.5.8 node - v10.15.0 npm - 6.4.1 思路： vue项目实现换肤有两部分 一、自主样式换肤 这部分换肤，在网上趴了不少贴，实现方式也是多种多样，这里不多说，看到这里来的人，肯定也看过不少贴了 说一下我的思路 考虑网上实现思路都过于复杂 有加命名空间的，有更换css文件的，有用打包工具实现的 而我都看不懂 因为只需要更改主题颜色，点缀色什么的根据项目需求，不需要实现，而且大部分点缀色都是用element-ui配色 鉴于以上考虑
vue+element-ui简洁完美实现个人博客“​响石潭 ​”
lucky_fang的博客
07-02 773
项目页面完整，后续可能将不断升级。关注作者，及时了解更多好项目！更多优质项目请看作者主页！获取源码或如需帮助，可通过博客后面名片+作者即可！
基于element-ui封装可搜索的懒加载tree组件的实现
10-15
基于Element-UI封装可搜索的懒加载Tree组件的实现 在前端开发中，尤其是在管理后台系统里，Tree组件广泛用于展示层级化数据。随着互联网数据量的日益增长，传统的Tree组件已无法满足大数据量场景下的性能要求。于是...
vue-实战练习 借助element-ui组件搭建一个主页
paleatta的博客
07-28 2032
element-ui中文文档 vue练习源码 本项目仿照航天云网主页进行练习 有以下部分模仿得不是很好，会在后续的学习中慢慢进行补充 某些小图标没有进行模仿，例如右上角的HOT等小图标 在”工业信息互联 供需精准对接“ 部分，有两种形式，一种是利用element-ui的表格形式，但是在右边的详情处暂时无法实现特定链接跳转 第二种是利用分割线进行表示 虽然能实现特定链接 但是太丑了 ，以后可能会多研究一下关于表格的element-ui的源码来解决这个问题 对于标签页的使用存在着只能通过控制栅格的长度来控制标
Vue中的常用指令
m0_62388400的博客
11-12 913
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
第四十二章 Vue中使用mutations修改Vuex仓库数据
Calvin的博客
11-11 645
在Vue中，明确vuex同样遵循单向数据流，即组件中不能直接修改仓库的数据，我们可以通过 strict: true 可以开启严格模式，防止在组件中非法修改仓库数据。(错误写法)在Vue中，组件想要修改Vuex的数据，可以通过Vue提供的mutations来实现。本章节我们将通过掌握mutations的操作流程，来修改state数据。(state数据的修改只能通过mutations )1.2. mutations修改数据基本步骤。
前端基础面试题·第四篇——Vue（其三）
2301_76380626的博客
11-09 843
Vue中组件定义式可以为其添加一个name属性，这个属性是组件的别名。当时组件被渲染时，Vue DevTools 会显示组件的名称，方便开发者调试，增强调试体验。当组件需要在内部调用渲染自己本身时，需要通过name属性来指定组件名称，否则Vue会报错。给组件命名后，我们可以通过全局注册，在全应用范围内使用该组件。方便了组件的使用，提高了组件复用性。使用keep-alive包裹动态组件时，可以通过include和exclude属性来指定哪些组件需要缓存，哪些组件不需要缓存。
Vue实际应用之无限滚动、css之&、混合宏和~
最新发布
swj的博客
11-12 498
今天来点实际的，看起来简单但是给我们代码带来更好的效果，一起来看看吧！先来介绍一个三方库。
速盾：vue的cdn是干嘛的？
zhuguowang01的博客
11-08 386
这时就可以使用CDN来加速这些库或者插件的加载。总结一下，Vue的CDN是一种将Vue.js及其相关的库或者插件缓存在全球各个节点的技术，通过就近访问的原则，加速网页加载，减轻服务器负载，并提高网站的稳定性和可靠性。Vue的CDN可以帮助将Vue.js及其相关的库或者插件存储到全球各个节点的服务器中，使得用户可以从最近的服务器上加载这些资源，从而提高加载速度。提高网站的稳定性和可靠性：CDN通过将资源存储在多个服务器上，即使某个节点故障或者不可用，用户仍然可以从其他的节点上获取资源，保证网站的可用性。
vue3组件应用 + 以及组件相关知识应用
m0_51244077的博客
11-08 1024
vue3组件应用 + 以及组件相关知识应用
vue3项目中内嵌vuepress工程两种实现方式
xiaopiaoliang777的博客
11-11 463
vue3项目启动vuepress
第三十七章 Vue之编程式导航及跳转传参
Calvin的博客
11-10 1549
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
element-ui响应式布局
08-04
Element UI提供了两种解决方案来实现响应式布局。第一种是在标签中指定元素所占大小，可以使用类似于`xs="4"`的属性来指定在不同屏幕尺寸下元素所占的栏数。例如，`xs="4"`表示在手机上将一行分为24栏，本元素占4栏。这种方法简化了CSS代码的编写，但需要配合`<el-row></el-row>`标签使用，不够灵活。[3] 第二种解决方案是使用样式类来指定元素是否显示。这种方法需要导入`element-ui/lib/theme-chalk/display.css`样式，然后在目标元素上添加相应的类名。例如，可以使用`hidden-sm-and-up`类来在小屏幕上隐藏元素。这种方法比较灵活，不需要配合`<el-row></el-row>`标签使用，但只能简单地对元素进行隐藏，如果需要实现稍微复杂的响应式样式，就需要思考更多。[2] 总的来说，Element UI提供了多种方式来实现响应式布局，开发者可以根据具体需求选择适合的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白小白从不日白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值