VUE – 蓝洛水深

网站

VUE导出表格数据为Excel的简单方法，不需要经过后端，前端直接导出

前言项目中遇到一个将表格数据输出为excel文件的需求，本需求只是简单地将简单表格的数据输出到excel，并没有涉及表格样式的复杂处理。 1、安装依赖环境

npm install file-saver --save
npm install @types/file-saver --save-dev
npm install xlsx --save

1

2

3

npm install file-saver --save

npm install @types/file-saver --save-dev

npm install xlsx --save

2、html 导出按钮

<button type="button" class="btn btn-sm btn-success" (click)="exportTable()">导出</button>

1	<button type="button" class="btn btn-sm btn-success" (click)="exportTable()">导出</button>

3、TS 文件 [crayon-66a367f…

蓝洛水深

2024年2月21日

00330

网站

VUE中开启浏览器通知的三种形式

因近期来发需要，需要使用到浏览器通知，故而了解和整理了一下浏览器通知的几种形式，在这里做个简单的分享。 Web Api Notification 此特性在 Web Worker 中可用。参考实例：https://developer.mozilla.org/zh-CN/docs/Web/API/notification#示例假定有如下 HTML：[cray…

蓝洛水深

2023年5月25日

004030

网站

Vue中路由router传参三种方式详解

Vue中路由router传参有三种方式，分别是： params传参路由属性配置传参 query传参其中，1和2是需要有对应的接收，否则会发现虽然传了，但是没办法接收。比如

{
      path: 'edit/:id',
      name: 'schoolStudentsEdit',
      component: () => import('@/views/school/students/detail.vue'),
      meta: {
        title: '编辑',
        sidebar: false,
        activeMenu: '/school/students',
      },
    }

1

2

3

4

5

6

7

8

9

10

{

path: 'edit/:id',

name: 'schoolStudentsEdit',

component: () => import('@/views/school/students/detail.vue'),

meta: {

title: '编辑',

sidebar: false,

activeMenu: '/school/students',

},

}

必须要接收id才行。以下是详解这三种方式的区别。一、params传参 [crayon-66a367fecbe1c522…

蓝洛水深

2023年5月21日

00990

网站

如何给Tinymce-vue自定义图片上传接口，images_upload_handler示例

在初始的Tinymce-vue中，图片是通过转换为base64的方式进行呈现，但是这种方式在写入数据库的时候，非常不友好，把图片放数据库，下一步就是把视频和压缩包放进去了。

images_upload_handler: blobInfo => new Promise(resolve => {
    const img = `data:image/jpeg;base64,${blobInfo.base64()}`
    resolve(img)
})

1

2

3

4

images_upload_handler: blobInfo => new Promise(resolve => {

const img = `data:image/jpeg;base64,${blobInfo.base64()}`

resolve(img)

})

所以，我们需要修改成以URL的形式上传到后端，代码非常简洁，可以参考。[crayon-66a367fecc108081070…

蓝洛水深

2023年3月14日

001.1K0

网站

Vue+Element Plus 表单数据不显示或显示不全的问题解决记录

在处理这个问题的时候，我一度开始怀疑是不是自己一直以来的赋值方法错了，为什么安卓和PC都能正常显示表单数据，而IOS则不行。如下图所示，IOS端表单中的所有字段都是空的，没有内容。而安卓端和电脑端，则正常。处理过程一、是否真的有值首先想到的是，IOS是否因为某种原因，没有获取到值，在数据接口处打印获取的数据：[crayon-66a367fecc3d…

蓝洛水深

2023年1月13日

002.3K0

软件

VUE+Element-UI使用XLSX插件前端导出Excel时，日期、身份证号等信息不对的处理办法

如下图所示，导出时，本来日期处只显示年月，导出后被补全到时分秒。而身份证号码则也如上图所示，变成了科学计数。尝试增加样式网上很多朋友提供了这个方法，即在身份证所在单元格设置格式。

<td style="mso-number-format:'\@';">100821199909091234</td>

增加了  style="mso-number-format:'\@';"  样式后 可以解决 ，

1

2

3

增加了 style="mso-number-format:'\@';" 样式后可以解决，

但是我这里没办法在el-table-column中新增这个样式，故而没办法实现。给XLSX插件传入参数 [cr…

蓝洛水深

2022年12月28日

011.0K0

杂谈

用VUE+Element UI+ThinkPhP6写了一个短视频去水印解析工具

第一是为了练手，代码不写看万行不如写一行；第二是自己也需要用到；电脑端手机端访问地址 https://tool.lanluo.cn/#/video/start 后续将陆续添加各种工具，同时也尽量做好解析接口的维护。

蓝洛水深

2022年12月12日

001570

网站

再谈Thinkphp6如何解决跨域请求

此前已经讲过两次关于跨域的问题。 VUE前后端分离时，本地小皮面板400等错误解决 VUE和Thinkphp6做前后端分离时，跨域请求怎么设置？Access-Control-Allow-Origin设置教程但是近期进行复核是发现，如果每次请求都要进行跨域预请求的话，可能最终还是会导致无法请求到资源。以Thinkphp6为例，在开启路由中间件的前提下，需要…

蓝洛水深

2022年12月11日

009320

网站

VUE+Element UI 表单自定义正则校验规则教程常用正则分享

很简单，直接写就行了，在rules中参照如下写法进行：

rules: {
        name: [
            { required: true, message: '必填项', trigger: 'blur' }
        ],
        phone: [
            { required: true, message: '必填项', trigger: 'blur' },
            { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入合法手机号/电话号', trigger: 'blur' }
        ]
    },

1

2

3

4

5

6

7

8

9

rules: {

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}$/就正则表达，可以根据实际情况调整。常用正则分享火车车次

/^[GCDZTSPKXLY1-9]\d{1,4}$/

1	/^[GCDZTSPKXLY1-9]\d{1,4}$/

手机机身码(IMEI) [crayo…

蓝洛水深

2022年10月10日

031.7K0

2022年六款富文本编辑器推荐，可用于系统开发集成

做系统开发过程中，难免要自己产生一些富文本内容，重复造轮子不是一个很好的选择，所以找一款合适的开源，是一个很好的解决途径。本文收集整理了六款开源富文本编辑器，希望能抛砖引玉，有所启发。一、Quill 官网地址（演示地址）： https://quilljs.com/ 项目地址： https://github.com/quilljs/quill/ Start…

蓝洛水深

2022年8月10日 • 软件

037.0K0