<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[XMCYD的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/XMCYD</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; XMCYD]]></copyright><item><title><![CDATA[通过模型驱动UI实现流动图，并实现一个元素沿着svg路径移动]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/153278030</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/153278030</guid><author>XMCYD</author><pubDate>Tue, 14 Oct 2025 22:54:44 +0800</pubDate><description><![CDATA[本文介绍了如何使用SVG绘制电站动态流动图。通过响应式获取容器宽高，计算节点坐标和路径走向，实现电能流动的动画效果。主要技术点包括：1) 使用useElementSize动态适配SVG尺寸；2) 定义节点数据结构及坐标计算；3) 通过SVG的path元素绘制流动路径；4) 利用animateMotion实现元素沿路径移动的动画效果。文中提供了完整的实现示例，包含节点位置计算、路径绘制方法以及流动动画的具体配置参数。该方案支持动态调整流动方向和状态，可直观展示电站各组件间的能量流动关系。]]></description><category></category></item><item><title><![CDATA[使用svg或css绘制曲线流程图]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/147240554</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/147240554</guid><author>XMCYD</author><pubDate>Tue, 15 Apr 2025 15:57:35 +0800</pubDate><description><![CDATA[利用绝对定位和css绘制流程图]]></description><category></category></item><item><title><![CDATA[svg实现实时流动图]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/140169519</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/140169519</guid><author>XMCYD</author><pubDate>Thu, 04 Jul 2024 10:06:01 +0800</pubDate><description><![CDATA[用svg画流动图]]></description><category></category></item><item><title><![CDATA[使用async...await以及js的事件循环机制]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/130425336</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/130425336</guid><author>XMCYD</author><pubDate>Thu, 26 Oct 2023 19:32:49 +0800</pubDate><description><![CDATA[async...await的使用以及事件循环机制]]></description><category></category></item><item><title><![CDATA[async和await的用法以及与Promise的区别]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/133298391</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/133298391</guid><author>XMCYD</author><pubDate>Tue, 26 Sep 2023 10:31:05 +0800</pubDate><description><![CDATA[1. async 是异步的意思，await则可以理解为 async wait。所以可以理解async就是用来声明一个异步方法，而 await是用来等待异步方法执行2. async作为一个关键字放在函数前面，表示该函数是一个异步函数，异步函数意味着该函数的执行不会阻塞后面代码的执行；而 await 用于等待一个异步方法执行完成；3. 当函数内部执行到一个 await 语句的时候，如果语句返回一个 promise 对象，那么函数将会等待 promise 对象的状态变为 resolve 后再继续往下执行。]]></description><category></category></item><item><title><![CDATA[接口传参时请求方式data和params的区别]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/132910232</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/132910232</guid><author>XMCYD</author><pubDate>Fri, 15 Sep 2023 19:41:10 +0800</pubDate><description><![CDATA[在使用API请求时，有两种方式可以传递参数：data和params。其中，data主要用于传递请求体中的参数，而params主要用于传递查询参数。因此，需要注意请求方式的选择，以及参数应该通过哪个选项进行传递，保证请求的正确性。，则该请求将变成一个 POST 请求，而不是 GET 请求，且请求体中会携带。用于 GET 请求的 URL 参数，而。用于 POST 请求的请求体。参数，而不是 URL 参数。中，请求参数可以通过。]]></description><category></category></item><item><title><![CDATA[修改vant3内部组件样式]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/132895968</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/132895968</guid><author>XMCYD</author><pubDate>Fri, 15 Sep 2023 19:30:44 +0800</pubDate><description><![CDATA[1.通过 CSS 覆盖。/* 添加这段样式后，Primary Button 会变成红色 */:root {2.通过 ConfigProvider 覆盖。组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个组件  在需要改变样式的组件外，并通过theme-vars属性来配置一些主题变量。**通过ConfigProvider修改vant组件中的样式：**ConfigProvider：用于配置vant组件的主题样式和全局属性。]]></description><category></category></item><item><title><![CDATA[使用 el-option-group 对选项进行分组，其 label 属性代表分组名称。]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/132889598</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/132889598</guid><author>XMCYD</author><pubDate>Thu, 14 Sep 2023 20:06:24 +0800</pubDate><description><![CDATA[【代码】使用 el-option-group 对选项进行分组]]></description><category></category></item><item><title><![CDATA[H5中统一获取从app跳转到web的token；判断从原生app跳转还是h5页面之间跳转]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/132873052</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/132873052</guid><author>XMCYD</author><pubDate>Thu, 14 Sep 2023 19:47:50 +0800</pubDate><description><![CDATA[一、统一获取token并在全局保存，不需要在每个页面中再通过route.query.token获取。三、 用于设置native和web之间通信的桥接对象webViewJavascriptBridge。二、判断从哪个客户端跳转过来web端。]]></description><category></category></item><item><title><![CDATA[pagination分页组件二次封装]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/131517109</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/131517109</guid><author>XMCYD</author><pubDate>Mon, 03 Jul 2023 20:15:41 +0800</pubDate><description><![CDATA[1、pagination二次封装分页子组件。2、在父组件中使用pagination组件。]]></description><category></category></item><item><title><![CDATA[编辑器组件monaco]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/131516731</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/131516731</guid><author>XMCYD</author><pubDate>Mon, 03 Jul 2023 15:42:25 +0800</pubDate><description><![CDATA[配置代码编辑器组件monaco.js。]]></description><category></category></item><item><title><![CDATA[vue3的layout布局练习]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/131260659</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/131260659</guid><author>XMCYD</author><pubDate>Sat, 17 Jun 2023 16:18:54 +0800</pubDate><description><![CDATA[左侧菜单栏Sidebar + 【右侧上方布局：上方组件navBar（折叠展开图标+面包屑）+ 打开的页面标签组件tagsView】 + 右侧下方的主要内容（放不同的组件）2.2.1 、 左侧菜单的sidebarItem里的link组件—判断是内部链接还是外部链接。3.3.1、 打开的标签过多，这时需要左右滚动----滚动条组件ScrollPane。3.1、点击图标使左侧菜单打开关闭组件–hamburger。2.1、logo组件—点击这个图标使左侧菜单折叠/展开。3.3、打开的页面标签–TagsView。]]></description><category></category></item><item><title><![CDATA[vue3国际化语言设置及表单组件封装]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/131234568</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/131234568</guid><author>XMCYD</author><pubDate>Fri, 16 Jun 2023 09:10:23 +0800</pubDate><description><![CDATA[国际化语言设置，多语言表单组件封装]]></description><category></category></item><item><title><![CDATA[vue3中的动态路由设置和路由守卫]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/131215451</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/131215451</guid><author>XMCYD</author><pubDate>Wed, 14 Jun 2023 20:57:55 +0800</pubDate><description><![CDATA[动态路由设置和路由守卫]]></description><category></category></item><item><title><![CDATA[自定义指令实现前端权限校验]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/131202698</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/131202698</guid><author>XMCYD</author><pubDate>Wed, 14 Jun 2023 10:40:41 +0800</pubDate><description><![CDATA[按钮权限和角色权限校验]]></description><category></category></item><item><title><![CDATA[vue3父子组件间传参通信]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/131190173</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/131190173</guid><author>XMCYD</author><pubDate>Wed, 14 Jun 2023 09:14:45 +0800</pubDate><description><![CDATA[本文主要是记录Vue3在setup语法糖下的父子组件间通信的四种方式。]]></description><category></category></item><item><title><![CDATA[forEach和map循环遍历的区别以及 includes在循环中的实际案例]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/131094241</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/131094241</guid><author>XMCYD</author><pubDate>Wed, 07 Jun 2023 20:27:37 +0800</pubDate><description><![CDATA[以上代码中的问题是，在循环 state.tenantList 的过程中，只有当 state.tenantIds 包含当前 item.id 时，才会对 params 进行赋值，并且此时会覆盖前面已经赋值给 params 的值。当选中一个el-option时，el-select会将该el-option的value属性的值作为选中项的值传递给v-model。1.:value=“item.id”-------此时打印所选中项tenantIds的值是对象的id属性。这里不用判断，可直接拿到选中项里的东西。]]></description><category></category></item><item><title><![CDATA[nextTick的使用场景及实际案例]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/131043318</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/131043318</guid><author>XMCYD</author><pubDate>Mon, 05 Jun 2023 10:58:55 +0800</pubDate><description><![CDATA[nextTick是Vue中提供的一个异步更新队列，它的用法是在当前执行栈的任务执行完毕后，将传入的回调函数放入到队列中，等待下一个事件循环时执行。在数据变化后立即执行某些操作: 当数据发生变化后，Vue不会立即更新DOM，而是异步执行更新，如果需要在数据变化后立即执行某些操作，可以使用nextTick来保证更新完成后执行操作。手动控制DOM更新: 在Vue中，数据变化会引起DOM的更新，如果需要在DOM更新后执行某些操作，可以使用nextTick来保证DOM更新完成后执行操作。]]></description><category></category></item><item><title><![CDATA[el-tree的内外层数据结构不一致]]></title><link>https://blog.youkuaiyun.com/XMCYD/article/details/131004023</link><guid>https://blog.youkuaiyun.com/XMCYD/article/details/131004023</guid><author>XMCYD</author><pubDate>Fri, 02 Jun 2023 11:45:53 +0800</pubDate><description><![CDATA[在使用 el-tree 组件时，内外层数据格式和属性名并不一定要一致。但是，如果内外层数据格式和属性名一致，使用起来会更加方便和简单。]]></description><category></category></item></channel></rss>