Joshua02-优快云博客

1、npm install @wangeditor/core @wangeditor/editor @wangeditor/editor-for-vue2、封装组件 MyEditor.vue, （这里是通过props content 将展示内容传入）<template> <div> <div style="border: 1px solid #ccc; margin-top: 10px">

2022-05-19 16:09:59 13304 2

原创 vue自定义指令，之dialog可拖拽指令封装

自定义指令这里以dialog可拖拽指令举例1、先在src中创建文件夹 directives，其中建两个文件，一个index.js，一个自定义指令文件// index.js 自定义指令 import draggable from '@/directives/draggable'; // 可拖拽指令 export default app => { app.directive('draggable', draggable)}// draggable.jsconst dra

2022-05-19 10:44:23 940

原创 vue select 下拉加载更多（懒加载）

为避免后端一次给过多数据，导致页面卡顿，select选项可以进行分页，然后下拉加载更多.项目中使用的elementUI, 先自定义指令，在main.js中添加：v-scroll-loadMore="loadmore"Vue.directive('scroll-loadMore', { bind(el, binding) { const SELECTWRAP_DOM = el.querySelector( '.el-select-dropdown .el-select-d

2022-02-17 11:17:05 3013

原创前端开发性能优化 gzip压缩

vue-cli项目打包，js和css都会被webpack打包，但是不经过压缩的包，可能有好几兆，首页下载速度极慢，影响体验，可以考虑gzip压缩。（亲测，一个chunk.js 977k ，压缩到了 155k）接下来看要如何进行gzip压缩配置gzip压缩方式1.静态压缩由于项目是通过vue-cli搭建的，所以就直接通过webpack来配置了。如果没有默认安装compress-webpack-plugin插件，请先安装。npmi-Dcompress-webpack-plugin...

2022-01-14 11:40:02 404

原创 vscode使用eslint prettier 自动格式化代码

本文以vue项目举例一、安装 Eslint安装eslint插件二、安装 Prettier-Code formatter插件需要安装这个代码格式化插件否则会提示 Extension 'esbenp.prettier-vscode' is configured as formatter but not available. Select a different default formatter to continue.三、安装Vetur插件四、配置 set..

2022-01-11 12:04:06 6836 1

原创 Uni-app 之uParse 富文本样式

富文本如果内容过多，会导致有些列不出现在屏幕内，如果只被挡的只有一两列，显示出来也不拥挤，可以修改样式使其全部展示出来，增加tag-style<u-parse :html="data.content" :tag-style="{ table: 'width:100%;', tr: 'width:80%;', td: 'font-size:10rpx!important;', p: 'font-size:20rpx;!important;', span: 'font-size

2021-10-18 10:33:44 4912 1

原创 mysql数据库开发规范

建表相关：1、创建数据库字符集选择utf8mb4，排序集选择utf8mb4_general_ci；建表、建索引、加字段等操作不用指定字符集，默认为数据库的字符集。示例：create database [if not exists] dbname default character set UTF8MB4 default collate utf8mb4_general_ci;2、库名、表名、字段名不能超过32个字符。单表字段数不要超过50个，大数据宽表例外。3、禁止使用复杂数据类型(数组,自定

2021-10-15 18:08:42 173

原创 vue-pdf 预览时电子签章不展示问题

步骤一：在node_modules/pdfjs-dist/build/pdf.worker.js注释掉一行代码（19641行）if (data.fieldType === "Sig") { data.fieldValue = null; // 注释掉底下这行就可以显示电子签章 // this.setFlags(_util.AnnotationFlag.HIDDEN);}步骤二：在node_modules/pdfjs-dist/es5/build/pdf.

2021-08-17 09:08:32 1148 1

原创扁平数据转Tree 树树形结构

源数据：let arr = [ {id: 1, name: '部门1', pid: 0}, {id: 2, name: '部门2', pid: 1}, {id: 3, name: '部门3', pid: 1}, {id: 4, name: '部门4', pid: 3}, {id: 5, name: '部门5', pid: 4},];需要输出：[ { "id": 1, "name": "部门1",

2021-07-14 16:09:30 202

原创 css 带箭头的进度条

<ul class="stepsBox"> <template v-for="(item,index) in Object.values(stepsObj)"> <li :key="index" class="steps-btn3" :class="getCircleClass(item)" @click="switchStep(item)" &...

2021-05-17 15:06:18 488

原创 axios 下载流文件

后端接口返回一个流文件，下载方法async downLoad(){ let url= '/downloadTemplate.do'; this.downloadLoading = true; axios.get(url,{ baseURL: `/web/api`, responseType:'blob', headers:{Authorization :'Bearer ' + sessionStorage.getIte

2021-04-20 18:35:41 3815 3

原创 css 制作三角形

.tri_right{ width: 150px; height: 100px; border: 1px solid #000000; margin: 50px 50px; position: relative; float: left; } .tri_right:before{ content: ""; width: 0px; height: 0px; border-top: .

2021-04-15 15:06:39 274

原创 centos7 安装Jenkins

一、安装Java（Jenkins是由java开发的）1、卸载系统自带的jdk//查找系统jdk rpm -qa|grep java java-1.6.0-openjdk-1.6.0.37-1.13.9.4.el5_11 tzdata-java-2015g-1.el5//如果查找到了先全部卸载了在重新安装//卸载rpm -e --allmatches --nodeps python-javapackages-3.4.1-11.el7.noarchrpm -e --al

2021-04-12 17:16:56 200

原创多维对象数组转一维数组

function flatten(arr){// 多维menu数组变成一维数组 return [].concat(...arr.map(item =>{ return item.children //判断是否有子项，否则会报错 ? [].concat(item, ...flatten(item.children)) : [].concat(item) } ))}let testArr = [.

2021-04-07 17:02:42 1013

原创 mysql 下载更新

wget http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.28-1.el7.x86_64.rpm-bundle.tar之后参照https://blog.youkuaiyun.com/weixin_42668482/article/details/103551783

2021-01-29 12:53:16 149

原创 nginx api接口代理配置细节

server { listen 80; server_name localhost:80; location / { # proxy_set_header Host $host:$server_port; # proxy_set_header X-Real-Ip $remote_addr; # proxy_set_header X-Forwarded-For $proxy_add_x_f.

2021-01-28 11:17:30 6115 4

原创 element table checkbox 显示与隐藏

table表头中，全选复选框的隐藏，可以使用:header-cell-class-name，例如：<el-table border ref="multipleTable" :header-cell-class-name="headerCellClass"> <el-table-column type="index" label="序号" width="60" align="center"></el-table-column> <el-.

2021-01-20 17:33:37 4656 1

原创 js正则验证url

function checkURL(URL) { var str = URL, Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/, objExp = new RegExp(Expression); if(objExp.test(str) == true) { re...

2019-09-10 21:10:42 5164

原创 js 金额格式化

var moneyFormat = function (value) { // 金额格式化 if (!value && value !== 0) return '-'; var intPart = Number(value) | 0; //获取整数部分 var intPartFormat = intPart.toString().replace(/(\...

2019-04-15 14:15:44 5343

原创 js 时间戳计算天数差

var endTime = new Date(res.data.repayDate).getTime() //还款日var nowTime = new Date().getTime() // 今天var nTime = endTime - nowTimevar day = Math.floor(nTime/86400000); //天数差console.log(day)...

2019-04-15 10:21:01 2458

原创 vue 从后台获取文件流导出excel

<template> <div class="container" ref="loadElement"> </div></template>import axios from 'axios'export default { post(url, param, title) { axios.post(url...

2019-04-09 10:21:01 7630 2

原创 element DateTimePicker 结束时间不能小于开始时间（开始时间不能小于当前时间）

html<el-form-item label="开始时间" prop="startTime"> <el-date-picker v-model="form.startTime" type="datetime" class="inputw" :picker-options="pickerOptionsStart"

2019-03-04 17:07:13 12386 3

原创 js中数组find 与findIndex方法的对比

Array.find()arr.find(callback[, thisArg]) 返回数组中满足callback函数的第一个元素的值，否则返回 undefined。let array1 = [5, 12, 8, 110, 88];let found = array1.find(element => { return element > 10;});consol...

2019-02-20 13:23:21 6380

原创 iview select选中的值与option不符

这是<Option v-for="option(item,index) in items" :key="index"中的key的问题导致的,（也可能是没有写:key="index"，注意，必须写）key根据键值对定位元素，如果index索引只代表一个元素就不会出现重复，否则就出异常(例如：选中与显示的值不符)。解决办法key="index"替换成 key="只代表唯一含义的属性...

2019-02-20 09:32:52 1829

原创 vue项目生成二维码，pdfjs生成PDF并下载

一首先安装依赖npm install qrcodejs2 --savenpm install jspdf --save qrcode用于生成二维码，jspdf用于生成pdf 以及pdf的下载二项目中使用先引入import QRCode from 'qrcodejs2';import JsPDF from 'jspdf';页面代码（一个空div，用来放置ca...

2019-01-17 13:03:12 3678 3

空空如也

空空如也