- 博客(36)
- 收藏
- 关注
RSS订阅
原创 Ant design Vue3 中的 a-select 组件使用方法详解
placeholder 只有在 value = undefined 才会显示，对于其它的 null、0、‘’ 等等对于 JS 语言都是有意义的值。使用 change方法 该方法有俩个参数 value option（选中当前的对象的所有数据）正常选中的时候 只会获取到value值 如果要获取该数据的其他数值， 例如 id name 等等。a-select 搜索时过滤对应的 option 属性的value。组件中返回值为value和label的List可直接使用搜索。好了XDM，bye~~~
2024-06-20 09:46:43
3249
原创 前端实现在线预览、编辑Office文档（vue版）
WEB前端实现在线预览、编辑Office文档，介绍如何在web前端引入JS插件实现在线预览、编辑Office文档。
2023-03-06 16:26:50
15934
2
原创 marked+highlight.js实现代码高亮效果加复制
marked是对markdown进行解析的插件，它可以把markdown语法解析成html语法，从而实现页面效果，而highlight.js是对解析出的代码实现高亮效果。加载常用的 import hljs from ‘highlight.js/lib/common’;**安装 marked highlight.js clipboard **加载全部 import hljs from ‘highlight.js’;使用marked对代码块进行高亮显示和增加复制功能。
2025-03-17 15:12:38
297
1
原创 Vue3ts封装一个可任意拖拽的浮动气泡组件，允许 x 和 y 轴方向拖拽，吸附到 x 轴方向最近一边，可点击
用户可以通过拖拽操作，在屏幕的 x 轴（水平方向）和 y 轴（垂直方向）上自由移动悬浮球。当用户停止拖拽时，悬浮球会自动吸附到 x 轴方向上距离最近的屏幕边缘，确保其位置稳定且符合用户操作习惯。时记录初始位置和鼠标位置，在 mousemove 时根据鼠标移动更新气泡位置，在 mouseup 或鼠标离开时结束拖拽并调用吸附逻辑。吸附逻辑：在拖拽结束时，判断气泡与页面边缘的距离，如果小于阈值则吸附到最近的 x 轴方向的边缘。isDragging 标志，点击事件触发时检查该标志，若为 true 则阻止点击事件。
2025-03-13 14:32:06
194
原创 vue3使用 xlsx-js-style导出Exce 动态合并表头
xlsx-js-style相当于xlsx的生基本，xlsx导出不能对单元格样式进行调整。安装了xlsx-js-style 就不需要安装 xlsx了。动态合并列 导出excel。完整代码 vue3。
2024-09-06 14:05:45
572
原创 vue3-print-nb实现打印pdf分页
通过class="paging"的容器进行分割，考虑到每张A4纸高度固定，所以通过判断每个class为paging的容器高度累加，大于纸张高度时，就给上一个class为paging的容器加上style=“page-break-pageBreakBefore:always”，id值为js对象中的id值，在打印弹框里的打印按钮设置自定义属性v-print，该属性值为打印区域的对象。对象配置方式——在js中定义一个对象，对象中可配置打印区域相关属性，在需要打印的单据内容最外面的div。这里使用的是对象配置方式。
2024-07-26 11:38:56
2044
8
原创 vue3+vite+ts+pinia+router4后台管理-动态路由生成
实现思路1.在路由钩子里面判断是否首次进入系统(permission.ts)2.判断token是否有值。没有值回到登陆页面，3.token有值判断MenusList是否有值，没有则获取路由4.解析路由,拼接路由，放行路由。
2024-07-15 15:55:14
634
原创 基于vue3 + ant-design 使用阿里图标库iconfont.cn
对于使用 iconfont.cn 的用户，通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段，symbol 生成链接粘贴进去即可。即可轻松地使用已有项目中的图标。组件封装 IconFont。
2024-06-21 10:59:08
886
2
原创 vue3 echarts 堆叠柱状图动态多柱堆叠
在使用echarts堆叠柱状图的时候，常规堆叠柱状图每条柱子的堆叠种类是相同的，实际开发中可能存在不同的数据格式，此处以地区结合材料进行说明，例如 华南地区包含材料（金，银）华北地区包含（铜，金）这样就会出现数据出现差异的情况，echarts现有的堆叠柱状图无法满足需求，需要去手动转换数据。
2024-05-28 10:58:28
651
转载 VUE3 兄弟组件通
1、兄弟组件通信：可以先把值传给父组件，再通过父组件传给另一个子组件，就做到了兄弟组件的传参，但是问题就是及其麻烦，所以引出第二种方式。2、通过消息的发布订阅来实现，定义一个bus（可实现任意组件通信）如果此时A组件发送了多个事件，B组件可以用*接收，写法如下。该方法不仅方便，且可以实现任意组件通信，极其方便实用！该方法不仅方便，且可以实现任意组件通信，极其方便实用！现在来使用刚刚定义的bus，将A组件的值传递给B组件。引入完成，使用方式和手写的基本一致，只不过名字不同。这样就完成了一个兄弟组件的传参。
2024-05-09 14:34:36
751
原创 qiankun 微前端应用实践
qiankun这个库只需要在基座引入，在main.ts 中注册子应用,为了方便管理，我们将子应用的配置都放在：/src/qiankun.js下。主应用注册这个路由时给 path 加一个 *，注意：如果这个路由有其他子路由，需要另外注册一个路由，仍然使用这个组件即可。基座采用是的 Vue3 + vite + ts，只负责导航的渲染和登录态的下发，为子应用提供一个挂载的容器div，由于路由模式为history，需要匹配子应用的入口规则，修改src/router/index。然后在src/main.ts中引入。
2023-12-08 14:28:51
390
原创 vue3 antd 自定义切换主题色
主题切换组件 theme.vue 在layout组件里使用。vue3 antd 自定义切换主题色。maints引入antd css。切换颜色hook文件 统一管理。在appvue里使用。
2023-07-28 17:52:15
1372
原创 antd-vue 表格关闭弹窗重置表格搜索条件
clearFilters参数是antd自带的清空输入框内容的方法，定义一个变量把clearFilters赋值给这个变量clearTabSearch,在弹窗取消或者关闭的的时候调用清除表格搜索框得方法。
2022-12-21 14:05:35
1175
原创 vue2后台管理项目动态加载路由
后台管理系统项目中的路由需要权限管理，不同的角色登录看到的页面是不一样的，所以路由应该是后端动态返回，然后前端拿到路由表进行处理后调用router.addRoutes([])添加到前端的静态路由表中形成完整路由表。
2022-12-05 16:40:48
5540
原创 antd table 固定列之后滚动条无法拖动
使用a-table的fixed属性固定表格列的时候滚动条被固定列覆盖部分无法拖动。解决方法将固定区域底部留出一个滚动条高度的距离。主要的问题就是固定区域盖住了横向滚动条。设置bottom值，使得不盖住滚动条。可以使用下面配置来解决。...
2022-07-27 12:32:50
2623
转载 Ant-design-vue 国际化
.在public文件夹下新建languages文件夹，在新建langs文件夹和i18n.js，langs文件夹下新建index.js、cn.js、en.js。on(),这个是组件传值的一种方式，需要在main.js中配置。4.在app.vue文件中引入多语言文件和我们写切换的方法。.........
2022-07-19 11:00:30
2318
原创 antd table组件点击表格行变色，单双行颜色不同
项目需求，采用ant design table展示数据，需要点击行变色，表格行之间有颜色区分（斑马色）效果图：
2022-07-06 13:43:16
3689
原创 Antd表格customRender与scopedSlots同时使用
行列合并与插槽同时使用普通的table插槽是在column对象中配置scopedSlots: { customRender: ‘xxx’ }，并在标签中写相应的代码实现的，与此处关系不大，不做过多的介绍。行列合并时要对customRender做配置，相应单元格的重写则需要写在customRender返回的children中，使用的是类似React的jsx语法：例子如下，我希望在实现行合并的同时操作按钮有二次确认事件效果如图：如果需要对插槽中的元素添加事件：...
2022-07-05 14:50:47
4494
原创 记录一下antd vue 导入excel数据在本地使用不使用上传组件
安装依赖> npm install -S file-saver xlsx> npm install -D script-loader代码片段-html// handleUpBtns 触发导入事件的方法（table是用来判定导入数据的用处）<div style="margin-bottom: 10px"> .
2022-01-12 09:09:57
727
原创 vue+ Element-UI 中 使用Upload上传图片关于action的使用
<el-form-item label="图片"> <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeA...
2020-12-10 11:24:08
5998
2
原创 前端开发中的数据处理
把俩个对象数组合并成一个对象数组用的是ES6的map方法map() 方法返回一个新数组，新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。map() 方法按照原始数组元素顺序依次处理元素。注意： map() 不会对空数组进行检测。注意： map() 不会改变原始数组。注意：函数的作用是对数组中的每一个元素进行处理，返回新的元素。这是我们公司后端返回的数据，我想要一个对象数组，结果返回来俩个，还要另外再加一个属性，都需要自己去处理，苦逼的搬砖生活。看代码吧 this.rest..
2020-10-09 16:35:37
426
原创 工作中实用的css小技巧
一、设置input 的placeholder的字体样式input::-webkit-input-placeholder { / Chrome/Opera/Safari /color: red;}input::-moz-placeholder { / Firefox 19+ /color: red;}input:-ms-input-placeholder { / IE 10+ /color: red;}input:-moz-placeholder { / Firefox 18- /
2020-09-10 15:10:58
110
原创 微信小程序滑动切换之swiper
小程序项目中遇到几个需要滑动切换效果，上来用的swiper组件 写了几行之后发现有的代码不见了，调试代码之后发现swiper高度问题导致的 ，swiper默认高度150 超出之后隐藏了查询之后发现sweiper无法设置动态高度，只能设置固定高度，百度了之后网上有几种方法，试过之后都不太好用试过百度的2种方法：1 在swiper之间嵌套scorll-view 这个需要先获取屏幕高度 用了之后发现不好使 弃用2 在swiper-item 的内容部的前后加俩个空标签 来获取内容高度 实验之后发...
2020-05-29 11:27:22
1853
原创 点击加载更多拼接数据
wxml代码 <view class="fdsa" bindtap="loading" data-ind="{{index}}">共{{item.coment.length}}条评论，查看更多</view>js代码data里面的数据 plist下面的comentcoment: [{ cingUrk: 'http://cgcp.thirdclassroom.com//Upload/team/57/16485215063.jpeg', cname: '张三',
2020-05-28 17:53:51
309
原创 微信小程序轮播图swiper指示点自定义问题
在开发过程中遇到自定义指示点在轮播下面的问题自己写的自定义指示点绑定轮播图轮播图<swiper bindchange="swiperChange" current="{{swiperCurrent}}"> <swiper-item wx:for="{{swiperList}}" wx:key="index"> <view class="tswiper-top mtb"> <view class="tswiper-top-title
2020-05-21 14:58:34
1069
原创 vue之父子组件通信
直接代码展示吧 简单易懂 var li = ['睡觉', '吃饭','打豆豆'] li为初始化的数据 new Vue({ el: '#app', components: { todo: { template: `<div> <h2>...
2019-12-28 21:43:58
108
原创 箭头函数的特点
//箭头函数：通常用于匿名函数，而匿名函数一般用于回调函数//箭头函数的语法：(形参1,形参2…) => {函数体}//箭头函数的特点：//1、箭头函数不同于一般函数：// 1)、一般函数可以先调用后定义，而箭头函数只能先 定义后调用// 2)、一般函数可以当作构造函数，而箭头函数不能当作构造函数// 3)、一般函数有arguments、而箭头函数没有argument...
2019-12-16 16:49:18
2178
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人