- 博客(42)
- 收藏
- 关注
RSS订阅原创 element-plus 对话框显示手机预览组件
element-plus Dialog 对话框改手机预览组件,方便后台管理系统部分手机预览功能样式,手机内主体部分使用插槽,可自行编写html结构,也可使用iframe引入页面。
2025-02-28 13:55:24
230
原创 vue3使用html2canvas实现前端截图、图片下载
html2canvas是一个HTML渲染器，是一个脚本，它允许你直接在用户浏览器截取页面或部分网页的“屏幕截屏”。底层是基于DOM的，根据页面上可用的信息构建屏幕截图，它没有制作实际的屏幕截图，因此生成的图片并不一定是100%一致的。
2025-02-28 13:53:39
326
原创 vue3项目中使用Arco Design的Table表格组件expandable展开行属性结合h()函数生成表格嵌套表格效果
arc design 实现表格嵌套表格功能
2025-02-28 13:51:39
685
原创 vue3中将table表格导出excel的方法
而 import * as XLSX from ‘xlsx’ 是命名导入，它将整个模块作为一个命名空间引入，并将模块中的所有导出都作为该命名空间对象的属性。这种方式适用于 xlsx 模块，因为它将 XLSX 作为对象导出。简而言之，就是用 xlsx 库中的 table_to_book() 方法，将 HTML 表格转换为 workbook 对象，并通过 XLSX.writeFile() 方法将 workbook 导出为 Excel 文件。但是，在 xlsx 模块中，并没有默认导出的对象的时候，就会报错。
2025-02-27 17:18:05
418
原创 html2canvas 实现屏幕截图、生成海报功能
使用html2canvas 截图：如果要生成图片，可以使用 第三方库 html2canvas 将 HTML 内容转化为图片。添加自定义内容：可以自定义海报的内容，如文本、图片等，然后通过 Vue 动态更新这些内容。vue3+element-plus 后台管理需要添加一个根据商品内容生成分享海报的功能。创建一个海报模板：通过 HTML 和 CSS 来构建一个海报模板。下载生成的海报：可以点击按钮下载生成的海报图片。
2025-02-27 16:01:40
224
原创 vue3使用 Pinia及 Pinia数据持久化存储
src目录下新建store文件夹，创建user.ts文件并写入Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字，defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。state 属性： 用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了。getters属性：用来监视或者说是计算状态的变化的，有缓存的功能。actions属性：对state里数据变化的业务逻辑，需求不同，编写逻辑不同。
2025-01-16 16:20:18
1217
原创 原生html、vue、uview-plus实现 input输入框电话号码3-4-4形式分隔
通过使用计算属性(computed)和方法(methods)来实现电话号码的格式化显示。通过input 的formatter 实现。通过oninput事件实现。
2025-01-14 10:50:24
451
原创 vue实现文件流形式的导出下载
在 Axios 请求中，设置 responseType 为 ‘blob’，这样 Axios 会将响应数据处理为 Blob 对象。network查看请求，response header的确是有值，但是axios获取header的值，永远只有content-type。在请求中指定 responseType 为 ‘blob’，可以确保 Axios 将响应数据处理为 Blob 对象。Blob 对象表示一个不可变的、原始数据的类文件对象，可以表示数据，比如二进制数据。3、创建下载链接并触发下载。
2024-12-13 17:40:16
1942
原创 Element-Puls中el-upload组件结合vue-draggable-plus实现上传支持拖拽排序(并保留el-upload原有样式、预览、删除)等功能
需求想要一个可拖拽排序的图片列表，但是发现el-upload虽然可以实现照片墙，但是没办法拖拽。
2024-09-11 10:09:58
1006
原创 uniapp小程序，使用腾讯地图获取定位
本篇文章分享一下在实际开发小程序时遇到的需要获取用户当前位置的问题，在小程序开发过程中经常使用到获取定位功能。uniapp官方也提供了相应的API供我们使用。官网获取位置的详细介绍这里就不再讲述了，大家可以点击上方链接去官网查看。我们本次开发的是小程序，需要注意的是，小程序获取定位使用的是腾讯位置服务，所以需要申请腾讯位置服务的SDK。
2024-09-11 10:03:15
3604
1
原创 uniapp 微信小程序自定义头部导航栏
当我们在JSON中将navigationStyle设置成custom后，当前页面的顶部导航栏就需要我们制作了，但出现了一下几个问题：导航栏的高度该是多少？导航栏被刘海、信号图标给覆盖了，就像下图因为不同的手机型号头部导航栏高度可能不一致，所以为了适配更多型号，需要动态计算导航栏的高度。状态栏的高度可以通过获取。胶囊按钮的信息可以通过获取。所以导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2。
2024-07-15 15:39:09
3102
原创 小程序常见的登录方式
基于 openid 或 手机号码快捷登录获取手机号码前置条件如何解决多账号的问题讲解前端、后端、微信登录过程中完整交互流程，方便更好去理解小程序登录。
2024-06-27 16:27:42
935
原创 自定义弹窗禁止底部页面内容滑动（禁止穿透）
在弹窗的外部盒子上加上 @touchmove.stop.prevent=“moveHandle”定义方法 moveHandle。
2024-06-25 14:02:33
416
原创 scroll-view标签里引入弹窗层级问题
在使用scroll-view组件时，在其内部嵌套了一个弹窗（如modal），但是弹窗无法正确显示在最上层。这是因为scroll-view默认的层级（z-index）可能会高于弹窗的层级，从而使得弹窗无法覆盖在滚动内容上。
2024-06-25 13:39:42
636
1
原创 纯CSS实现步骤条
步骤条是一种用于引导用户按照特定流程完成任务的导航条，在各种分步表单交互场景中广泛应用。步骤条通常由编号、名称和引导线三个基本要素组成。本文中要实现的是一个简单的步骤条，包含上述三个基本要素。
2024-05-12 22:01:36
1206
1
转载 微信小程序客服消息授权给第三方Udesk
微信小程序客服消息授权给第三方Udesk一、必须是微信认证过的微信小程序登录微信小程序后台-设置-基本设置链接：https://mp.weixin.qq.com/下面有一栏：微信认证（看是否认证）二、以管理员身份登录Udesk后台1、地址：http://udesk.udesk.cn/users/sig2、点击管理中心-点击小程序-接入微信小程序3、接入小程序填写微信小程序信息...
2019-12-05 11:42:20
704
1
原创 微信小程序实现长摁复制和一键复制功能
微信小程序实现长摁复制和一键复制功能长按复制(一定是text标签)text设置属性 selectable=“true” 这样长摁就可以复制了。<text selectable="true">长按复制</text>一键复制一键复制需要绑定事件，然后调用wx.setClipboardData<text bindlongtap='copy'>{{co...
2019-12-03 15:42:41
1230
原创 微信小程序选择和上传图片
文章目录微信小程序选择和上传图片微信小程序选择和上传图片选择和上传图片用到的api：wx.chooseImage() 和 wx.uploadFile()具体实现代码如下：wx.chooseImage({ count: 6, // 最多可以选择的图片张数 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有...
2019-12-03 13:45:33
352
原创 微信小程序之间的跳转
文章目录微信小程序之间的跳转通过 navigator 进行跳转微信小程序之间的跳转通过 navigator 进行跳转 <navigator target="miniProgram" open-type="navigate" app-id="appId" path="/pages/index" url="/pages/it...
2019-12-03 11:13:28
341
转载 微信小程序登录（获取UnionId）
文章目录微信小程序登录（获取UnionId）微信小程序登录（获取UnionId）我们一般都是先获取到微信的 unionid，然后再通过 unionid 去登录自己的网站，就可以关联到用户在自己网站上的 user_id，但是在小程序登录中，有时候可以获取到 unionid，有时候获取不到，在获取不到 unionid 的情况下，用户无法正常登录网站。UnionID机制说明： 如果开发者拥有...
2019-12-03 10:37:24
785
原创 小程序实现锚点跳转
小程序实现锚点跳转（非scroll-view实现）通过点击事件跳转到指定的位置，在HTML中很容易实现。但在小程序中一般需要借助scroll-view组件来实现，而scroll-view在实现效果时，需要指定固定的高，但大多数时候我们不知道最终要显示的有多高，动态计算也比较麻烦。有没有其它的办法实现这种滚动效果呢？当然是有的。通过给跳转位置绑定id类名的方式（类名必须是id），就可以实现，具体...
2019-12-02 11:19:12
1301
原创 编程思想：面向对象和面向过程
何谓面向对象？何谓面向过程？对于这编程界的两大思想，一直贯穿在我们学习和工作当中。我们知道面向过程和面向对象，但要让我们讲出来个所以然，又感觉是不知从何说起，本文主要阐述了面向过程和面向对象两大思想。希望能对你的学习和工作有所帮助。一、面向过程 首先我们来认识下，什么是面向过程？面向过程就是面向解决问题的过程进行编程。仔细思考一下，我们在学习和工作中，当我们去实现...
2019-06-28 10:22:39
637
原创 图片懒加载的几种方法
文章目录什么是懒加载为什么要懒加载图片懒加载的方法1、滚动事件监听2、Intersection Observer API3、Chrome 浏览器自带4、jquery.lazyload.min.js5、echo.min.js什么是懒加载在一些网站或者app上会看到 鼠标或手势过快，而图片没有加载出来由色块或其他图片代替的情况，当图片出现在我们看到的视图中，再迅速将占位图片换成我们真正想展示的图片...
2019-06-21 10:44:27
990
原创 vue 实现前端模糊搜索
文章目录数组对象的模糊查询数组的模糊查询数组对象的模糊查询在vue中，前端模糊搜索主要是用computed属性实现，具体代码如下：使用fitler 过滤器 和indexOf 方法filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意： filter() 不会对空数组进行检测。注意： filter() 不会改变原始数组。indexOf()...
2019-06-13 11:22:57
26379
原创 原型和原型链
文章目录前言一、构造函数二、原型和原型链1、原型的概念2、原型链的概念总结三、创建对象的方式1、字面量2、构造函数的调用3、Object.create（）4、__proto__和prototype四、Javascript如何实现继承1.构造函数绑定2.实例继承3.拷贝继承4.原型继承5.ES6 extends前言由于ES6之前没有引入类（class）的概念，javascript 并非直接通过类...
2019-06-11 21:37:57
9477
1
原创 git常用命令和创建仓库
文章目录git 创建仓库和常用命令git创建仓库 New repository常用命令版本回退删除git存储库git 创建仓库和常用命令git创建仓库 New repository一个私有仓库最多可以添加三个人创建一个项目，在项目中打开git$ git init //初始化仓库 生成.git 文件 vue脚手架项目自动生成$ touch readme.md //创建readme ...
2019-06-10 10:23:32
501
原创 H5新增标签和属性
H5新增标签和属性H5新增标签1、结构标签2、 媒体标签3、表单标签4、其他功能标签H5新增属性1、 对于js进行添加的属性。2、网页中标签中加入小图标的样式代码3、iframe新增属性4、其他属性H5全局属性可直接在标签里插入的：data-自定义属性名字；H5新增标签1、结构标签header：某个区块的头部信息/标题；section：独立内容区块，可以用h1~h6组成大纲，表示文档结构...
2019-06-05 21:32:39
2332
1
原创 Vuex
vuex 全局状态管理器Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，集中式存储管理应用的所有组件的状态文章目录vuex 全局状态管理器单向数据流Vuex 的核心： store（仓库）mutationsmapState 辅助函数mapMutations 辅助函数Action 异步操作mapActions可以把actions映射成methodsmodules单向数据流...
2019-06-04 14:43:30
4588
2
原创 数组常用方法
数组常用方法数组概念：有序的元素序列。（一组有序数据）常用方法：文章目录数组常用方法1、push和pop2、unshift和shift3、Slice/Splice 添加 删除 截取类方法4、reverse / sortsort方法升序和降序5、join方法 链接数组6、遍历数组（for/for in）枚举7、ES5新增的数组方法：1）Array.isArray()2) indexOf...
2019-05-30 09:39:41
334
转载 常见浏览器兼容性
常见浏览器兼容性问题汇总和答案1. ie6.0横向margin加倍产生因素：块属性、float、有横向margin。解决方法：display：inline；2. ie6.0下默认有行高解决方法：overflow:hidden;或font-size:0;或line-height：xx px；3. 在各个浏览器下img有空隙(原因是：回车。)解决方法:让图片浮动。4. 一个父标签与几个...
2019-05-29 21:08:44
500
原创 vue-组件和组件传值
vue组件和组件传值组件组件是可复用的vue实例，且带有一个名字，可以通过 new Vue 创建的 Vue 根实例中把这个组件作为自定义元素来使用<div id="components-demo"> <button-counter></button-counter></div>// 定义一个名为 button-counter 的新组件...
2019-05-29 20:48:07
1968
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人