VUE
-
VUE导出表格数据为Excel的简单方法,不需要经过后端,前端直接导出
前言 项目中遇到一个将表格数据输出为excel文件的需求,本需求只是简单地将简单表格的数据输出到excel,并没有涉及表格样式的复杂处理。 1、安装依赖环境
123npm install file-saver --savenpm install @types/file-saver --save-devnpm install xlsx --save2、html 导出按钮
1<button type="button" class="btn btn-sm btn-success" (click)="exportTable()">导出</button>3、TS 文件 [crayon-675c675…
-
VUE中开启浏览器通知的三种形式
因近期来发需要,需要使用到浏览器通知,故而了解和整理了一下浏览器通知的几种形式,在这里做个简单的分享。 Web Api Notification 此特性在 Web Worker 中可用。 参考实例:https://developer.mozilla.org/zh-CN/docs/Web/API/notification#示例 假定有如下 HTML:[cray…
-
Vue中路由router传参三种方式详解
Vue中路由router传参有三种方式,分别是: params传参 路由属性配置传参 query传参 其中,1和2是需要有对应的接收,否则会发现虽然传了,但是没办法接收。比如
12345678910{path: 'edit/:id',name: 'schoolStudentsEdit',component: () => import('@/views/school/students/detail.vue'),meta: {title: '编辑',sidebar: false,activeMenu: '/school/students',},}必须要接收id才行。 以下是详解这三种方式的区别。 一、params传参 [crayon-675c6759a17e4221…
-
如何给Tinymce-vue自定义图片上传接口,images_upload_handler示例
在初始的Tinymce-vue中,图片是通过转换为base64的方式进行呈现,但是这种方式在写入数据库的时候,非常不友好,把图片放数据库,下一步就是把视频和压缩包放进去了。
1234images_upload_handler: blobInfo => new Promise(resolve => {const img = `data:image/jpeg;base64,${blobInfo.base64()}`resolve(img)})所以,我们需要修改成以URL的形式上传到后端,代码非常简洁,可以参考。[crayon-675c6759a1ab4120074…
-
Vue+Element Plus 表单数据不显示或显示不全的问题解决记录
在处理这个问题的时候,我一度开始怀疑是不是自己一直以来的赋值方法错了,为什么安卓和PC都能正常显示表单数据,而IOS则不行。 如下图所示,IOS端表单中的所有字段都是空的,没有内容。 而安卓端和电脑端,则正常。 处理过程 一、是否真的有值 首先想到的是,IOS是否因为某种原因,没有获取到值,在数据接口处打印获取的数据:[crayon-675c6759a1d5…
-
VUE+Element-UI使用XLSX插件前端导出Excel时,日期、身份证号等信息不对的处理办法
如下图所示,导出时,本来日期处只显示年月,导出后被补全到时分秒。 而身份证号码则也如上图所示,变成了科学计数。 尝试增加样式 网上很多朋友提供了这个方法,即在身份证所在单元格设置格式。
123<td style="mso-number-format:'\@';">100821199909091234</td>增加了 style="mso-number-format:'\@';" 样式后 可以解决 ,但是我这里没办法在el-table-column中新增这个样式,故而没办法实现。 给XLSX插件传入参数 [cr…
-
用VUE+Element UI+ThinkPhP6写了一个短视频去水印解析工具
第一是为了练手,代码不写看万行不如写一行;第二是自己也需要用到; 电脑端 手机端 访问地址 https://tool.lanluo.cn/#/video/start 后续将陆续添加各种工具,同时也尽量做好解析接口的维护。
-
再谈Thinkphp6如何解决跨域请求
此前已经讲过两次关于跨域的问题。 VUE前后端分离时,本地小皮面板400等错误解决 VUE和Thinkphp6做前后端分离时,跨域请求怎么设置?Access-Control-Allow-Origin设置教程 但是近期进行复核是发现,如果每次请求都要进行跨域预请求的话,可能最终还是会导致无法请求到资源。 以Thinkphp6为例,在开启路由中间件的前提下,需要…
-
VUE+Element UI 表单自定义正则校验规则教程 常用正则分享
很简单,直接写就行了,在rules中参照如下写法进行:
123456789rules: {name: [{ required: true, message: '必填项', trigger: 'blur' }],phone: [{ required: true, message: '必填项', trigger: 'blur' },{ pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入合法手机号/电话号', trigger: 'blur' }]},pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/就正则表达,可以根据实际情况调整。 常用正则分享 火车车次
1/^[GCDZTSPKXLY1-9]\d{1,4}$/手机机身码(IMEI) [crayo…
-
2022年六款富文本编辑器推荐,可用于系统开发集成
做系统开发过程中,难免要自己产生一些富文本内容,重复造轮子不是一个很好的选择,所以找一款合适的开源,是一个很好的解决途径。 本文收集整理了六款开源富文本编辑器,希望能抛砖引玉,有所启发。 一、Quill 官网地址(演示地址): https://quilljs.com/ 项目地址: https://github.com/quilljs/quill/ Start…