三.样式操作与属性操作JS DOMDOM 简介什么是DOM文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式DOM树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都
先上车接下来，就要逐一阅读各个组件。本着先易后难的原则，吃柿子必须拣软的捏。button组件第一个安排上，结果发现秀了我一脸，是我大意了没有闪。上源码Button按钮组件的源码虽确实不多，但仔细阅读，里边知识点并不少，特别是button的样式，elementUI对BEM的运用确实炉火纯青，请收下我的膝盖。button.vue打开packages/button/src/button.vue<t
转载
2024-03-05 23:32:59
270阅读
经常有弱电朋友在后台给我们留言，发送一个弱电符号问我们是什么意思，其实一些电气符号需要大家平时记一下，我们经常看到一些用英文符号表示的线管敷设方式，下面我们就给大家总结了一些常用的符号表示含义，希望能对大家有所帮助。弱电智能化设计和施工，必定会涉及到图纸。所以首先，了解弱电图纸的图标很重要。标示的字符表示什么，还有图标表示那些，了解后，很容易看图纸了。 要看懂工程图纸都有图纸设计说明，各个字母代
引言:上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的，以下是 mint-ui 中上拉加载更多的总结。一、在项目中使用 mint-ui 需要先安装查看官网(1)安装:npm i mint-ui --save(2)在 vue 中 main.js 引入 import MintUi from 'mint-ui
import 'mint-ui/lib/style.css
转载
2024-09-12 14:19:44
96阅读
按钮组件的使用创建按钮: 使用el-button标签创建按钮按钮属性的使用:在ElementUI中所有组件的属性全部都写在组件标签上size : 控制尺寸
可选值: medium / small / minitype : 类型
可选值(字符串类型): primary / success / warming / danger / info / text
比如: 如果我们将typ
转载
2024-03-15 11:36:14
265阅读
我们在使用element-ui时，必定会用到表格这个组件，虽然element组件已经为我们封装很好了。但是我们在实际开发中会根据我们的业务在element-ui的基础上再次封装，比如表格最后一列会经常有操作这一列，对应着不同的按钮，像编辑按钮、查看按钮、删除按钮等，有些表格的结构类似，显示数据和操作，差别只是在于后边操作按钮不相同，此时，封装一个业务组件，手动传入需要的按钮，这样，在遇到类似的情况
转载
2024-04-22 17:31:59
188阅读
文章目录前言一、HTML5拖放事件二、简单拖动示例1.复制代码2.运行代码三、表格拖动到左侧树示例1.复制代码2.运行代码总结 前言研究表格拖动到树的目的：随着互联网的不断发展，网页的便捷性操作也越来越重要，方便快捷的操作方式越来越受人青睐，本文就介绍了表格拖动到树的操作逻辑，方便用户修改表格数据的所属。前期花费了大量时间去使用各种VUE拖动插件(vuedraggable、sortablejs之
转载
2024-10-18 21:00:33
652阅读
作者：小土豆biubiubiu前言上一篇文章 Element Form表单实践（上）参照着文档将表单部分内容实践了一下。这篇文章将分享项目开发中的一个表单实践，最终做出来的效果大致是下面这个样子：这个表单看似是比较简单的，但实际上比一般表单存在一些细节的东西需要设计和处理。接下来就来完成这个功能。主页面首先是主页面的实现。主页面的逻辑非常简单，直接将代码贴出来。<!DOCTYPE html&
转载
2024-09-05 07:00:53
0阅读
element-ui表格操作栏fixed且宽度自适应由于近期给公司的项目开发页面的按钮权限控制，目前这功能已经完事了，所以在此做个总结，希望能给看到此篇文章的小伙伴一些帮助和思路权限控制这个一般后台管理系统肯定是都有的，只不过有的是只细化到导航栏菜单的权限控制，有的需要精确到页面上每一个按钮。只要是后台管理系统，少不了用户管理，角色管理，菜单管理等功能 而要想实现前端菜单页面以及按钮的权限控制，则
转载
2024-09-18 15:31:40
288阅读
文章目录用户权限管理1 权限列表1.1 绘制权限列表的面包屑导航1.2 卡片视图1.3 调用API获取权限列表1.4 权限管理业务分析2 角色列表2.1 角色下权限数据的渲染3 分配权限4 分配角色 用户权限管理1 权限列表1.1 绘制权限列表的面包屑导航方式与之前相同1.2 卡片视图与之前相同1.3 调用API获取权限列表步骤：生名周期钩子函数created时调用getRightsList方法
转载
2024-04-09 10:31:59
111阅读
NGUI中的Button几乎是最常用到的控件之一，并且可以组合各种组件（比如UIButtonColor，UIButtonOffset，UITweenxx），方便设置Button的各种状态下的属性，几乎可以满足我们的所有需求。 但是对于当Button的isEnabled属性设置为false时，根据设置的disableColor属性设置不可点击时的颜色时，虽然我们设置的灰色，但并不是我们想象中的样子
转载
2024-05-05 12:59:17
190阅读
前言在使用ElementUI的表单元素时候，除了做一些简单的非空处理校验，在一些特殊的场合，还需要我们做一些自定义校验。其实ElementUI不仅提供了基本的非空校验，也对我们提供了自定义检验。在使用的时候还是遇到了一些坑，下面简单的总结分享下非空校验知道自定义校验之前，需要知道基本的非空校验如下图，ElementUI已经帮助我们创建好了一个简单的demo，我们直接拿来用即可。这里我也是直接复制的
转载
2024-02-23 23:16:51
103阅读
项目业务需求：设计两个搜索下拉框，其中二级下拉框的数据随着一级下拉框选中的数据而变化。从而实现二级联动搜索功能。理解业务需求：通常来说我们树型下拉框的数据库设计是在同一个表，且子节点会储存对应的多个祖节点（父节点+父节点的父节点+父节点的父节点的父节点+……+父节点^n）Id。例如：多个城市子节点归属一个省份父节点，多个省份子节点又归属一个国家父节点。这里数据库中城市祖节点就包括了省份Id和国家I
转载
2024-03-17 13:06:28
3271阅读
前言 最近在做一个文件上传的功能，后端接口写好了、发现前端上传文件的页面不会写……（刚接触）然后我就找解决方案，后面找发现Element有个组件是<el-upload/>能直接上传文件。 我就想直接用拿来改成自
常见组件封装使用vue create green-ui命令初始化一个vue项目勾选如下选择scss选择eslint风格选择保存时校验选择In package.json保存输入项目名创建项目成功启动项目然后把App.vue修改为如下内容<template>
<div id="app">
定制组件
</div>
</template>
转载
2024-04-21 13:45:24
217阅读
功能点1、工具栏的功能按钮要超宽不换行，宽度不够折叠进”更多“按钮；2、下拉菜单按钮和纯图标按钮默认不折叠；3、折叠前后按钮组顺序保持不变。实现思路1、默认展开全量按钮，并对其宽度进行缓存；2、循环计算展开按钮的总宽度 与 容器宽度 的差值，并进行按钮的折叠与释放处理；3、监听窗口大小改变，不断进行步骤2；4、难点：区分放大、缩小操作进行分别处理（当然也可以每次遍历全量按钮，这样只要考虑需要折叠的
转载
2024-03-03 21:54:34
1237阅读
最近写项目遇到一个问题就是表格里的按钮加载状态设置，就是表格里的按钮在进行操作时，显示相应的加载状态，操作完成后，恢复正常状态。解决思路方案一：data中设置一个对象，里面放很多个btnloading{ btnLoading1: false, btnLoading2: false,... } 缺点：不知道会列表里会有多少条数据（鸡肋，不建议采用，本篇文章不再介绍）方案二：按钮直接设置 v-load
转载
2024-03-05 20:41:17
639阅读
路由跳转的几种方式"""
this.$router.push('/course');
this.$router.push({name: course});
this.$router.go(-1);
this.$router.go(1);
<router-link to="/course">课程页</router-link>
<router-link :to="{nam
一、先选开始时间开始时间：今天之前的之间置灰结束时间：开始时间之前的时间置灰 二、先选结束时间结束时间：今天时间之前的时间置灰开始时间： 今天时间之前的时间置灰，结束时间之后的时间置灰 <template>
<div class="app-container">
<!-- 表单
转载
2024-05-23 16:07:28
220阅读
element-ui的简单笔记element-ui简单笔记(上)element-ui简单笔记(下) 八、Form相关组件8.1 Radio单选按钮1.创建Radio按钮<!--组件创建-->
<el-radio v-model="label" label="男">男</el-radio>
<el-radio v-model="label" lab
转载
2024-05-09 15:57:42
115阅读
