六卿_社区达人页

2024年09月

• 09.26 11:26:50
  发表了文章 2024-09-26 11:26:50

  前端基础(三)_路径（绝对路径、相对路径）、语义化、特殊字符

  本文介绍了前端开发中的路径概念（包括绝对路径和相对路径）、HTML的语义化以及特殊字符的使用。文章解释了绝对路径和相对路径的区别和应用场景，阐述了HTML语义化的意义和好处，并通过示例代码展示了如何在HTML中使用特殊字符。
• 09.26 11:25:51
  发表了文章 2024-09-26 11:25:51

  前端基础(二)_HTML常用标签（块级标签、行级标签、行块级标签）

  本文详细介绍了HTML中的常用标签，包括块级标签（如`h1`至`h6`、`p`、`div`等）、行级标签（如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等），以及行块级标签（如`img`）。文章解释了这些标签的用途、特点和基本用法，并通过示例代码展示了如何在HTML文档中使用它们。
• 09.26 11:23:37
  发表了文章 2024-09-26 11:23:37

  前端基础(一)_前端页面构成

  本文介绍了前端页面的基本构成，包括HTML（负责页面的结构和语义）、CSS（负责页面的样式和表现）和JavaScript（负责页面的行为和动态效果）。文章通过示例代码展示了如何使用这三种技术来创建一个简单的网页，并解释了HTML文档的结构和语法。
• 09.26 11:22:42
  发表了文章 2024-09-26 11:22:42

  前端一键回到顶部案例

  本文介绍了如何实现网页中的一键回到顶部功能，包括两种方法：第一种是通过HTML中的锚点跳转实现快速回到顶部；第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果，让页面滚动更加平滑自然。

  
• 09.26 11:20:44
  发表了文章 2024-09-26 11:20:44

  网站变灰白css

  本文介绍了如何通过CSS滤镜效果实现网站变为灰白色，具体方法是在HTML或BODY标签上应用`filter`属性，使用`progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)`和`-webkit-filter: grayscale(100%)`实现灰度效果。
• 09.26 11:13:14
  发表了文章 2024-09-26 11:13:14

  使echarts图例legend只选中一个（selectedMode）

  本文介绍了如何在ECharts图表中设置图例（legend）的选中模式为单选（'single'），以确保在有多个图例时，用户只能选择一个图例项进行展示，从而提升图表的可读性和用户体验。

  
• 09.26 11:11:38
  发表了文章 2024-09-26 11:11:38

  Vue3基础(26)___defineProps、defineEmits、defineExpose、defineModel组件通信、defineOptions

  本文介绍了Vue 3中`<script setup>`语法糖的使用，以及如何在Vue 3的组合式API中使用`defineProps`、`defineEmits`、`defineExpose`和`defineModel`进行组件通信和属性暴露。同时，还解释了`defineOptions`的作用，它可以用来配置组件的选项，例如禁用属性的自动继承。
• 09.26 11:09:59
  发表了文章 2024-09-26 11:09:59

  前端项目一键换肤vue+element(ColorPicker)

  本文介绍了如何在前端项目中实现一键换肤功能，通过使用CSS变量和Element UI的颜色选择器组件（ColorPicker），并结合Vuex进行状态管理和持久化，实现主题颜色的动态切换。

  
• 09.26 11:09:03
  发表了文章 2024-09-26 11:09:03

  Vue3基础(25)___初尝pinia，相比于vuex轻量、好用

  本文介绍了Pinia在Vue 3中的使用，相比于Vuex，Pinia更轻量且易于使用。文章详细解释了Pinia的基本概念、优势，并提供了安装和使用Pinia的步骤，包括定义状态、getters、actions和如何在组件中使用Pinia进行状态管理。

  
• 09.26 11:06:11
  发表了文章 2024-09-26 11:06:11

  vuex数据持久化、加密(vuex-persistedstate、secure-ls)

  本文介绍了如何在Vuex中使用`vuex-persistedstate`和`secure-ls`库进行数据的持久化和加密，确保在Vite打包上线后，Vuex中的数据安全。
• 09.26 11:05:01
  发表了文章 2024-09-26 11:05:01

  子组件获取外层组件的scrollTop，达到实时定位的效果

  本文介绍了如何通过Vue的自定义事件总线（eventBus），实现子组件获取外层组件的scrollTop值，并达到实时定位的效果。

  
• 09.26 11:03:51
  发表了文章 2024-09-26 11:03:51

  axios全局做节流，解决多次点击导致多次请求接口

  本文介绍了如何在Axios请求中实现全局节流，以防止用户快速多次点击导致重复发送相同请求的问题。
• 09.26 11:02:46
  发表了文章 2024-09-26 11:02:46

  echarts根据上级元素的大小自动更新echarts（element-resize-detector）配合防抖解决大屏页面卡顿的问题

  如何在Vue中使用`element-resize-detector`库来自动更新ECharts图表的大小，以适应其上级元素大小的变化，并结合使用防抖技术来解决大屏页面上的卡顿问题。
• 09.26 11:01:16
  发表了文章 2024-09-26 11:01:16

  vuex使用createNamespacedHelpers不生效（一定要与namespaced一块使用）

  这篇文章讨论了在使用Vuex的`createNamespacedHelpers`时，如何正确地与模块命名空间结合使用，以避免出现不生效的问题。
• 09.26 10:59:45
  发表了文章 2024-09-26 10:59:45

  Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“

  本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误，指出问题的原因通常是因为数据中的唯一标识符`id`不唯一，导致递归渲染造成调用栈溢出。

  
• 09.26 10:58:21
  发表了文章 2024-09-26 10:58:21

  Echarts visualMap属性记录

  这篇文章是关于ECharts中visualMap属性的详细记录。文中首先定义了visualMap的作用，即进行数据到视觉元素的映射。接着，通过一系列详细的配置参数，如类型、显示控制、数据范围、样式和格式化工具等，介绍了如何配置连续型和分段型visualMap组件。最后，作者通过具体代码示例，说明了如何将这些配置应用于实际的ECharts图表中，以实现数据的视觉编码效果。

  
• 09.26 10:54:42
  发表了文章 2024-09-26 10:54:42

  伪类中使用element图标

  如何在CSS伪类中使用Element UI图标，以及伪类与伪元素在CSS3中的区别和应用。

  
• 09.26 10:44:47
  发表了文章 2024-09-26 10:44:47

  element中tree组件的选中获取和返显

  本文介绍了如何在Element UI的tree组件中获取选中的节点值以及如何进行节点的默认选中（返显）。主要通过使用`getCheckedKeys()`和`getHalfCheckedKeys()`方法来获取完全和半选中的节点，然后使用`setCheckedKeys()`方法来设置默认选中的节点。

  
• 09.26 10:43:39
  发表了文章 2024-09-26 10:43:39

  Vue实现按钮级别权限

  文章介绍了在Vue中实现按钮级别权限的两种方法：使用自定义Vue指令和使用v-if指令配合自定义方法。

  
• 09.26 10:42:18
  发表了文章 2024-09-26 10:42:18

  Vue使用element中table组件实现单选一行

  如何在Vue中使用Element UI的table组件实现单选一行的功能。

  
• 09.26 10:40:54
  发表了文章 2024-09-26 10:40:54

  前端项目增加eslint全过程

  如何在前端项目中安装并配置ESLint和Prettier，包括VSCode插件的安装、npm包的全局安装、.eslintrc.js配置文件的生成以及编辑器设置的调整。
• 09.26 10:39:22
  发表了文章 2024-09-26 10:39:22

  前端diff文件对比使用worker进行优化

  如何使用Web Worker在React项目中优化文件对比差异功能的实现。
• 09.26 10:36:04
  发表了文章 2024-09-26 10:36:04

  js_Ipv4以及ipv4段正则校验

  几种JavaScript正则表达式，用于校验IPv4地址的有效性，包括支持CIDR表示法的变体。
• 09.26 10:33:52
  发表了文章 2024-09-26 10:33:52

  可视化大屏适配scale方案

  本文介绍了一种使用CSS实现可视化大屏适配的方案。通过设置容器的`transform: scale()`属性，根据屏幕大小动态调整大屏内容的缩放比例，从而实现不同分辨率下的适配。文章提供了详细的实现方法，包括Vue组件的模板、逻辑和样式代码，并展示了实际效果的对比图。此外，还推荐了一个npm包`autofit.js`，用于简化大屏适配的实现。

  
• 09.26 10:32:08
  发表了文章 2024-09-26 10:32:08

  Echarts中横坐标文字显示不全

  本文讨论了在ECharts中横坐标文字显示不全的问题，并通过设置`xAxis`的`axisLabel.interval`属性为`0`来解决。这样设置后，横坐标上的所有标签都会显示，而不会根据自动计算的间隔来显示部分标签。文章提供了问题的具体示例图片和解决方法，并附有官方文档链接。

  
• 09.26 10:29:50
  发表了文章 2024-09-26 10:29:50

  echarts中使用散点scatter更改颜色却不生效的问题

  本文讨论了在ECharts中使用散点图（scatter）时更改颜色不生效的问题。原因是项目中使用了`visualMap`组件，它具有最高的优先级，导致自定义的颜色设置被覆盖。解决方法是在`visualMap`组件中增加`seriesIndex`属性，指定它只对特定的系列（series）生效，从而避免影响散点图的颜色设置。文章提供了详细的代码示例和解决办法。
• 09.26 10:28:45
  发表了文章 2024-09-26 10:28:45

  element菜单组件样式修改NavMenu导航菜单

  本文介绍了如何修改Element UI的NavMenu导航菜单组件的样式，包括激活菜单项的颜色、菜单项hover颜色、父级菜单hover颜色以及菜单行高。提供了相应的CSS代码示例，并展示了如何将这些样式应用到实际的NavMenu组件中。

  
• 09.26 10:27:04
  发表了文章 2024-09-26 10:27:04

  elementUI使用Pagination分页组件增加自定义slot

  本文介绍了如何在Element UI的Pagination分页组件中使用自定义slot。通过在`el-pagination`标签内的适当位置添加slot内容，可以在分页组件中插入自定义的HTML或组件。文章提供了一个示例代码，展示了如何添加两个自定义slot，并展示了最终效果。

  
• 09.26 10:25:28
  发表了文章 2024-09-26 10:25:28

  vue2路由懒加载解决import引入报错问题

  本文介绍了在Vue2项目中实现路由懒加载的方法，并解决了使用import语句进行懒加载时报错的问题。通过安装`babel-plugin-syntax-dynamic-import`插件并在项目的`.bablerc`文件中配置，可以成功实现路由组件的按需加载。同时，文章还提到了使用`webpackChunkName`为懒加载的组件指定单独的chunk名称，以避免所有组件被打包到同一个js文件中。
• 09.26 10:24:12
  发表了文章 2024-09-26 10:24:12

  Vue2使用v-model封装ElementUI_CheckBox组件

  本文介绍了在Vue2中如何使用v-model封装ElementUI的CheckBox组件。封装后的组件支持有标题和无标题的情况，并提供了在Vue页面中的使用示例，包括单独使用和在表单中的使用。
• 09.26 10:21:09
  发表了文章 2024-09-26 10:21:09

  Vue2使用v-model封装ElementUI_Input组件

  本文介绍了在Vue2中如何使用v-model封装ElementUI的Input组件。封装后的组件可以根据传入的title属性决定是否显示标题，支持正则表达式校验，并提供了在Vue页面中的使用示例。
• 09.26 10:19:57
  发表了文章 2024-09-26 10:19:57

  antd_使用Input封装实现Form校验效果(最终版)

  本文介绍了在Ant Design (antd)框架中如何封装Input组件以实现表单校验效果，并提供了封装代码示例以及如何在提交时进行校验。

  
• 09.26 10:17:26
  发表了文章 2024-09-26 10:17:26

  antd_使用Input封装实现Form校验效果

  本文介绍了如何在Ant Design (antd) 中使用 Input 组件封装实现表单校验效果，包括必填、数字、IP、邮箱、手机号、身份证号和域名等校验规则的使用，以及如何通过回调函数进行校验。
• 09.26 10:15:31
  发表了文章 2024-09-26 10:15:31

  Twaver-HTML5基础学习(41)列表可视化视图组件(List)

  本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件（List），展示了如何创建列表、设置列表属性（如行高、间隔颜色等）、实现数据绑定和排序，以及如何通过React代码示例进行操作。

  
• 09.26 10:14:27
  发表了文章 2024-09-26 10:14:27

  Twaver-HTML5基础学习(40)表格可视化视图组件(Table)

  本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件（Table），包括创建表格、定义列对象、实现数据绑定和排序，以及处理表格事件和获取表格数据的方法。
• 09.26 10:12:20
  发表了文章 2024-09-26 10:12:20

  Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)

  本文介绍了如何在Twaver-HTML5中使用鹰眼（Overview）可视化视图组件，它作为Network的缩略图，允许用户通过缩略图导航Network，支持单击、双击和框选操作来控制Network视图。

  
• 09.26 10:11:10
  发表了文章 2024-09-26 10:11:10

  Twaver-HTML5基础学习(38)劈分面板SplitPane

  本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板，通过动态调整分割条来改变面板的大小，支持水平和垂直分割。

  
• 09.26 10:09:35
  发表了文章 2024-09-26 10:09:35

  Twaver-HTML5基础学习(37)network导出图片并下载

  本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载，主要通过将network转换为canvas对象，然后转换为base64编码的图片进行展示和下载。
• 09.26 10:08:34
  发表了文章 2024-09-26 10:08:34

  Twaver-HTML5基础学习(36)是否显示滚动条

  本文探讨了在Twaver-HTML5中设置是否显示滚动条的方法，包括横向和纵向滚动条的控制，但遇到了设置不生效的问题，可能与软件版本有关。

  
• 09.26 10:06:28
  发表了文章 2024-09-26 10:06:28

  Twaver-HTML5基础学习(35)Network中ToolTip显示Chart(视图未成功出现)

  本文尝试在Twaver-HTML5的Network组件的ToolTip中显示echarts饼图，但未成功，可能与版本有关。

  
• 09.26 10:05:02
  发表了文章 2024-09-26 10:05:02

  Twaver-HTML5基础学习(34)Link显示流动效果

  本文介绍了如何在Twaver-HTML5中为Link添加流动效果，通过设置流动颜色、模式等来实现动态视觉效果。

  
• 09.26 10:03:44
  发表了文章 2024-09-26 10:03:44

  Twaver-HTML5基础学习(33)自动布局

  本文介绍了如何在Twaver-HTML5中使用自动布局功能，支持多种布局类型如圆形、对称、上下左右布局等。
• 09.26 10:02:33
  发表了文章 2024-09-26 10:02:33

  Twaver-HTML5基础学习(32)Network样式andTree样式

  本文介绍了如何在Twaver-HTML5中自定义Network和Tree组件的样式，包括标签、提示、颜色、告警等。

  
• 09.26 10:00:42
  发表了文章 2024-09-26 10:00:42

  Twaver-HTML5基础学习(31)Tree基本使用

  本文介绍了如何在Twaver-HTML5中使用Tree组件，包括设置勾选模式、引导线、自定义图标、监听事件和控制复选框显示等。

  
• 09.26 09:59:37
  发表了文章 2024-09-26 09:59:37

  Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听

  本文介绍了如何在Twaver-HTML5中监听网络视图操作事件，包括视图绘制、鼠标事件以及获取鼠标下的网元等。

  
• 09.25 23:07:18
  发表了文章 2024-09-25 23:07:18

  Twaver-HTML5基础学习(29)界面交互

  这篇文章介绍了Twaver-HTML5中界面交互的多种模式，包括默认模式、编辑模式、创建网元模式、创建连线模式、创建形状连线模式、创建形状网元模式、触屏模式和放大镜模式，并提供了相应的代码示例。

  
• 09.25 23:05:53
  发表了文章 2024-09-25 23:05:53

  Twaver-HTML5基础学习(28)工具条(添加自定义按钮_自定义事件)

  这篇文章介绍了如何在Twaver-HTML5中创建工具条，添加自定义按钮，并绑定自定义事件，包括放大、缩小、占满屏幕和重置画布大小的功能。
• 09.25 23:04:14
  发表了文章 2024-09-25 23:04:14

  Twaver-HTML5基础学习(27)过滤器

  这篇文章介绍了Twaver-HTML5中过滤器的使用，包括可见过滤器、可移动过滤器和可编辑过滤器，并通过代码示例展示了如何通过设置过滤器实现不同用户权限或网元类型的交互和视图。

  
• 09.25 23:02:51
  发表了文章 2024-09-25 23:02:51

  Twaver-HTML5基础学习(26)背景

  这篇文章介绍了如何在Twaver-HTML5中设置背景，包括栅格图片、颜色、颜色渐变、基本形状以及图片与形状结合的背景类型，并提供了代码示例。

  
• 09.25 23:00:35
  发表了文章 2024-09-25 23:00:35

  Twaver-HTML5基础学习(25)网元可视化视图组件(Network)

  这篇文章介绍了Twaver-HTML5中的网元可视化视图组件(Network)的层次结构，包括view、rootCanvas和topCanvas的使用方法和示例。