自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

YuShiYue的博客

开发记录

  • 博客(38)
  • 资源 (1)
  • 收藏
  • 关注

原创 vue 异步加载全局组件 Vue.component(String, Object)

一.举例场景1.1 vue官方解释在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。1.2 我遇到的需求插件(vue组件)通过一个入口上传有一个npm(我...

2020-01-07 11:03:39 1641

原创 前后端分离,vue前端实现单点登录(不跨主域)

仅限不跨主域,什么叫不跨主域呢,也就是说xxx.主域.com ,不管是二级还是三级域名,主域永远是一个,如果跨主域的话,请看另外一篇文章。js-cookiehttps://www.npmjs.com/package/js-cookienpm i js-cookie -SA项目import Cookies from 'js-cookie'export default { ......

2020-01-02 21:33:24 3628 1

原创 vue插件 JSON 数据树形展示插件

vue-json-pretty文档 https://github.com/leezng/vue-json-pretty/blob/HEAD/README.zh-CN.mdhttps://www.npmjs.com/package/vue-json-prettyvue-json-viewer文档 https://github.com/chenfengjw163/vue-json-vie...

2020-01-02 15:27:48 3162 2

原创 项目中常用正则表达式验证规则集锦

// 正整数验证export function interValidate(str) { const reg = /^[0-9]*[1-9][0-9]*$/ return reg.test(str)}// 手机号验证export function phoneValidate(phone) { const reg = /^[1][3,4,5,7,8,2,6,9,1,...

2019-12-15 22:09:57 263

原创 前端实现根据银行卡号得到所属银行以及银行logo

根据银行卡号得到所属银行以及银行logo银行logo下载地址链接:https://share.weiyun.com/5VxcV92 密码:8twbwh1. 根据银行卡号获取银行编码https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo=银行卡卡号&cardB...

2019-12-15 19:42:02 8306

原创 contenteditable Selection 在vue中实现自定义表达式

contenteditable 相关介绍实现效果展示contenteditable 属性规定是否可编辑元素的内容属性值true 可以编辑元素内容false 无法编辑元素内容classname 继承父元素的 contenteditable 属性<div class="flex" contenteditable="true"></div>Selec...

2019-12-12 17:19:35 959

原创 前端代码规范常用的一些插件及配置(Vue)

前端代码规范常用的一些插件及配置背景因为现在前端的团队越来越壮大,难免在开发过程中会出现代码格式风格不一致的情况,有时候我们在修改不是自己的项目时候,有一些逻辑不明白,那我们可以通过看每一行代码的记录去找到相应的开发人员进行沟通,所以现在非常有必要把团队的风格进行统一化,由此出了一些配置一.开发工具1.1 vscode (济南团队都要使用vscode)1.2 微信小程序开发者工具,支...

2019-11-08 16:44:34 1519

原创 前后端分离完全跨域实现单点登录(感觉很low但是真香)

背景公司内部有ABCDEFG…好多系统,然而这些系统都是需要登录才能够进行访问的,可能每一个系统的账号密码啥的都不一样,这让人就很头疼,所以我们出现了一个叫 权限中心 的系统,权限中心就是用来管理所有的项目以及用户账号等,可以实现一个账号根据其中的权限控制可以登陆哪些系统,所以进一步进化到了另外一个项目或者说是功能 统一登录页 愿景就是我的账号登陆统一登录页可以展示我有权限的项目,并且进入每一个...

2019-09-20 11:13:36 6895

原创 npm淘宝镜像过期,切换最新的淘宝镜像

一般的报错信息。

2024-05-10 10:33:07 156

原创 【记录nuxt2项目运行遇到的问题】

nuxt悄悄升级问题

2023-03-08 13:54:51 2259 1

原创 js事件循环EventLoop

js在浏览器中的事件循环,看完包会

2022-10-18 17:13:15 808 1

原创 解决antdv flex布局,表格过长不能够自适应问题

解决方案参考地址

2021-12-14 22:56:23 811

原创 前端读取zip,并将zip转File上传到服务端.

一. 下载包npm i jszip -S二. 引入包 <script src="jszip/jszip.min.js"></script>三. 解析zip文件httpRequest({ file }) { // 解压文件 this.loading = true; const _this = this; // ********************************* start *********************************

2021-11-19 17:17:01 1611

原创 通过短信链接打开微信小程序获取scheme以及41001状态码问题

第一步. 获取access_token接口文档地址第一步. 获取小程序scheme接口获取scheme文档注意access_token要拼接到url里面进行传参,否则就会报41001{ "errcode": 41001, "errmsg": "access_token missing rid: 61380a88-1d662087-11a51fa3"}...

2021-09-08 09:13:01 1879

原创 vue3实现一个todo-list

实现方式不是最优,主要是为了学习vue3的一些新语法以及属性,各位大佬勿喷~功能介绍项目的搭建可以参考这篇文章vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目相关代码index.vue<template> <div class="todo-list"> <el-card class="box-card"> <template #header> <.

2021-08-20 19:38:08 890 1

原创 vue中sync的使用

vue2.3.x:以上是vue2.3.x时sync的用法,其实在平常的工作中我用到sync最多的场景一般是父子组件之间控制的dialog弹框的显示隐藏,其实看一下UI库的文档,比如element-ui的Dialog组件,它是支持sync属性比如我们有一个list.vue<template> <div> <button @click="add">新增</button> <a-dialog :visible.sync="

2021-08-20 19:32:14 17668

原创 vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

一. 参考文档vite官方文档vue3.x官方文档vue-router4.x官方文档vuex4.x官方文档element-ui3.x官方文档Ant Design Vue2.x官方文档axios文档二. vite搭建项目安装# npm 安装npm init vite@latest# yarn 安装yarn create vite# 快速安装vue模板项目yarn create vite my-vue-app --template vuenpm init vite@la

2021-08-18 18:02:21 1396 1

原创 ajax上传大数据时引起跨域问题解决方案

需求背景项目有一个HTML转PDF的需求,如果是正常的上传文件还好说,现在是前端直接上传文件内容,比如直接粘贴复制html数据到输入框然后进行上传~出现问题数据量小还行,可能里面有图片被转成了base64 导致上传的数据高达几M,就会出现问题,比如通过JSON方式传输的时候会导致浏览器直接跨域,所以改成了application/x-www-form-urlencoded的请求方式import request from "@/utils/request";import qs from 'qs'

2021-07-16 17:16:42 523 4

原创 typora实现图片上传到阿里云oss

一. 背景图片上传到oss有利于我们将文档拷贝到其他一些平台,比如csdn 掘金 等二. 开始2.1 登录阿里云 获取oss Bucket直接搜索oss,选择对象存储oss2.2 点击创建Bucket然后开始输入名称以及选择相关配置2.3 进入AccessKey管理如果没有AccessKey 先创建,有的话就记录好key 跟 secret2.4 下载图床工具https://github.com/Molunerfinn/PicGo/releases找好适合自己系统的版

2021-06-22 11:17:24 1060 3

原创 typora主题色配置

一. 获取主题主题列表 http://theme.typora.io/二. 选一个自己喜欢的主题进入三. 下载主题文件到本地四. 解压之后得到主题相关的文件五. 打开主题文件六. 将解压得到的主题文件粘贴到主题文件内七. 重启typora八. 选择主题...

2021-06-22 10:54:34 349 1

原创 uni-app 小程序文件下载并分享

需求背景有一些文件比如 pdf,用户需要下载之后进行打印,或者分享给其他好友uni-app用到的apiuni.downloadFile https://uniapp.dcloud.io/api/request/network-file?id=downloadfileuni.saveFile https://uniapp.dcloud.io/api/file/file?id=savefileuni.openDocument https://uniapp.dcloud.io/api/file/.

2020-11-22 14:00:09 3648 6

原创 web-view 缓存问题解决方案

最近用uni-app开发了一个小程序,里面其中有一个功能就是给pdf进行签章,因为部门里面之前有封装好的js版本的插件,所以想的就是直接对接插件,很明显uni-app没办法直接使用js插件,所以只能使用 web-view 嵌套 html页面 ,因为js插件里面会有各种获取文件流啥的,会造成签署之后页面缓存,在浏览器里面访问没这个缓存问题,但是在web-view里面就会存在,什么加随机数,加meta等根本不管事,后来看了一下network里面的请求,发现请求里面被 from disk ca

2020-10-19 16:18:10 2070

原创 element-ui实现图片压缩上传

需求来源我发现 ,其实在做图片上传的时候就应该考虑到图片压缩上传的问题,element-ui在上传一个大的图片时浏览器会报错,当然也并没有提供相关的属性跟方法去进行图片的压缩,这个时候就需要我们自己去想办法实现,当然实现图片的压缩其实网上很多方法,但是有一个插件早已把风阀给封装好,我们拿来即用就好。image-conversionnpm i image-conversion -S 页面引入import * as imageConversion from 'image-conversion.

2020-07-21 10:47:15 1490

原创 Vue项目开发 筛选组件跟表格组件结合使用,从此做一个cv工程师---水文

Vue项目开发 筛选组件跟表格组件结合使用,从此做一个cv工程师不难发现后台管理系统列表页面长得基本都一样(特殊的不考虑),上面是筛选,下面是表格,表格下面是分页,然后在某个位置整几个按钮。就以上面图片来说,其实可以分为四部分, 筛选 操作按钮 表格 分页 筛选组件筛选组件常见的控件就是 输入框 下拉框 日期 ,当然也有公司内部的一些 人员选择框 部门选择框 ,其实都一样,我们试想一下,如果我们的项目里面有20个列表,每个列表里面都有4~5个筛选条件, 那我们可能会写好一份筛选的标签,

2020-07-10 17:34:31 891

原创 element-ui 消息提示全局修改

重写element-ui提供的方法![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMjM5NTA0LzE1OTA5MDMxNTgyMDYtZTQ2ODFjNTItZWM5My00NjFlLTg0OTEtNGFhMWMwM2YwZjljLnBuZw?x-oss-process=image/format,png#align=left&display=inline&

2020-05-31 13:35:48 2687 3

原创 前端pdf流的形式预览

方式一 http://xxx.xx.com/pdf.pdf 形式找好插件,或者直接iframe加载就行了方式二 通过文件流的形式下载 pdf.js https://mozilla.github.io/pdf.js/getting_started/#download解压完之后会有两个文件夹一个是 build ,另外一个是 web把这两个文件夹拷贝到自己的项目当中 静态资源目录 以Vue为例,就是放到 public 问价下面即可![image.png](https://imgconvert

2020-05-25 16:49:41 3480

原创 vue 实现主题换肤(element-ui)

站在巨人的肩膀上开发之主题换肤一. 插件安装https://www.npmjs.com/package/webpack-theme-color-replacernpm i webpack-theme-color-replacer -D二. 项目使用2.1 vue.config.jsconst webpack = require('webpack')const ThemeCo...

2020-04-21 19:26:56 1109

原创 vue 组件发布到npm

以vue组件为例一. 代码开发过程1.1 先创建一个空的vue项目vue create npm-vue1.2 新建组件我这边直接用的components文件夹,最好是自己在新建一个文件夹比如叫 packages 专门用来存放组件1.3 zl-title组件代码示例index.vue<template> <div id="zl-title">...

2020-01-09 18:52:18 207

原创 js 正则表达式 动态参数匹配

比如说我们要做一个加减乘除的计算,但是表达式都是用户自己设计的,参数也都是动态的,这个时候一般就要考虑到匹配,比如还牵扯到主表,子表,会有字段重复问题(表不一样,字段是允许重复的),这个时候我们就需要使用到动态匹配正则了。const obj = { k1: 20, k2: 10}let str = '{#k1}*0.8/{#k2}*100+{#k1}'// 方式一Obje...

2020-01-06 16:02:22 4992

原创 vue-cli3 svg组件封装

背景项目当中使用icon应该是很多的,比如说菜单的图标等等,其实方法有很多,我们可以使用字体图标,我们可以使用png图片等,但是他们都有弊端,我们一般都会结合阿里图标库。一.使用字体图标,png的弊端字体图标库 以找字体费劲,如果我们使用阿里图标库,当我们又使用新的图标的时候我们需要重新下载文件引入,有时候可能名称会变,很容易影响之前的使用png图片 多了就会是项目变大(虽然没多大...

2020-01-03 17:12:01 536

原创 v-viewer 分享一个比较好图片预览插件

https://github.com/mirari/v-viewer// main.js 里面import 'viewerjs/dist/viewer.css'import Viewer from 'v-viewer'Vue.use(Viewer)billCredits 数组<viewer :images="billCredits"> <img sty...

2020-01-02 20:51:36 585

原创 vue-clipboard2 复制粘贴插件

npm https://www.npmjs.com/package/vue-clipboard2使用方式npm i vue-clipboard2 -Simport Vue from 'vue'import VueClipboard from 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // add th...

2020-01-02 17:25:46 287

原创 portal vue实现前端可视化portal(一)

项目需求: 组件分为内置组件 ,自定义组件,可以实现拖拽的形式实现一个门户页面的创建,当然也可以实现可视化大屏的创建,一开始内心是拒绝的,这玩意做出来,我是不是就要失业了。一. 初版demo演示二.项目结构design 设计器renderer 渲染器后台管理配置2.1 设计器就是demo展示的这个玩意,就是一个画布,可以让非开发人员去进行设计,分为内置组件,自定义组件自...

2019-12-31 00:28:55 5744 2

原创 vue 牛逼插件记录 拖拽 监听DOM修改 方格画布

element-resize-detector 监控元素大小变化https://www.jianshu.com/p/b9004cb2fa2cvue-draggable 拖拽https://www.jianshu.com/p/03f0f58f84cchttps://github.com/SortableJS/Vue.Draggableinteractjs 调整大小https:/...

2019-12-26 16:33:39 1103 1

原创 原生html标签相关问题处理(继续更新)

1. input• (1) 如何清除浏览器自带的数字箭头 type=“number”input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;}input[type="number"]{ -moz-appearance: textfield;}• ...

2019-12-26 10:27:49 197

原创 js 加减乘除计算 (防止精度丢失)

// 两个浮点数求和 function accAdd(num1,num2){ var r1,r2,m; try{ r1 = num1.toString().split('.')[1].length; }catch(e){ r1 = 0; } try{ r2...

2019-12-26 10:25:18 797

原创 element-u i表格内表单验证-by 于十月

需求背景有时候我们会有这么一种需求就是动态的去追加一行删减一行表格row,然在在row里面又会有多个表单控件,并且这个控件都是需要进行校验的,比如必须填写,手机号校验等等。实现思路 .vuedata data() { return { teamGroups: { rules: { teamName: [{ required: true, message...

2019-12-15 19:26:30 244

原创 ant-design-vue 实现表格内部字段验证

ant-design-vue 实现表格内表单字段验证表格内 column 可输入的需求还是很常见的,尤其有一些业务场景就是表单内部有一个表格,然后表格的某些列是个进行输入的,就像下面这样下单数量 内容不能为空下单数量 必须输入正整数 ![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4u...

2019-12-15 19:17:42 6127 1

utils-bank.zip

通过阿里图标库的一部分银行的logo ,可进行根据输入卡号查询logo,查询银行的名称,已经根据编码表把对应的图片对应起来了,开箱使用,简单方便,不管是h5还是小程序,app妥妥的

2019-12-15

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除