自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Queen-Shir的博客

一点一点记录下成长。

  • 博客(162)
  • 收藏
  • 关注

原创 vue2+html2pdf下载PDF,PDF分页切割

【代码】vue2+html2pdf插件实现把页面下载成PDF文件。

2024-02-01 17:45:36 586

转载 new File() 在360兼容模式下不兼容

我的代码里需要用FormData的方式来上传图片,上传之前需要用 new File() 深拷贝图片的file对象。然后在360兼容模式下,上传图片时就js报错了。但是在360的极速模式还有谷歌、火狐等其他浏览器里是正常的,故猜测是 new File() 在360兼容模式下不兼容造成的。在 IE上传不支持 new File。经过排查发现,是因为promises的值有误,导致Promise.all()进入了catch()。最后一行一行代码排查到是。

2023-09-14 15:00:44 68

原创 echarts legend 限制宽高范围

我的页面是自适应的,然后pie图的item很多,当页面变小时,item的文字都堆积起来,叠在pie图上,不好看。

2023-06-20 11:03:49 1274

转载 去除移动端h5的横向滚动条

我的问题是,在移动端第一次访问h5页面时,页面尺寸被放大了一点,没有手机适配,所以出现了横向滚动条。手指缩小页面尺寸后,横向滚动条才消失。

2023-05-30 18:23:17 830

原创 vue-fullscreen实现全屏功能

1、下载vue-fullscreen依赖。2、在mian.js中引用并注册。

2023-05-29 18:16:22 914

原创 JS取event.path 兼容谷歌ie火狐

cursor

2022-06-17 10:16:58 1031

原创 鼠标悬浮变手指或者左右箭头

cursor

2022-06-10 20:01:21 1709

转载 控制台警告:You may use special comments to disable some warnings.

解决方法看这里:https://blog.csdn.net/weixin_42452888/article/details/110144296我的问题是我在项目的build文件下没有找到webpack.base.conf.js文件,可以在项目里全局搜索"…(config.dev.useEslint",就可以找到这个文件下面的这一句了。...

2022-04-27 17:27:17 123

原创 vue页面嵌套外部url

我的需求是一进入页面通过调接口获取页面的url,然后把url嵌套到当前页面。<template> <div class="page-content" id="bi-div"></div></template><script> import reportFormApi from '@/api/reportForm' export default { name: 'reportComponent', props

2021-12-17 10:26:38 4599 1

原创 背景色动态渐变

效果如图:代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>canvas demo</title> <style> html { font-size: 62.5%; } body { margin: 0px; } #demo { width: 100v

2021-12-01 15:10:22 539

原创 用set()对数组和字符串去重

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。数组去重的方法1:const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}上面代码通过add()方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。去除数组的重复成员2:[...new Set([1,2,2,3,3,4,4,4,4])

2021-11-15 10:21:03 1146

原创 uni-app:在小程序中判断用户当前定位与指定位置之间的距离

1、HTML部分<view @click="clickToShopping()">开始买菜</view>2、js部分async clickToShopping() { //点击开始买菜按钮,判断是否在用户家2km范围内 var that = this; // 1、调接口,取目的地的经纬度。 that.userLanLong = await that.getUserLanlong(that.obj.serviceOrderId); // console.log(tha

2021-10-13 11:07:21 2483

原创 uni-app getLocation()无法获取定位,一直fail()

问题描述:在微信开发者工具和真机调试时,uni.getLocation()获取定位失败,一直fail()。问题原因:微信官方文档,从基础库 2.117.0版本起,将对getLocation()接口增加频率限制。改为使用onLocationChange()。代码:getDingwei(){//获取当前设备定位 let that = this; uni.getSetting({ success(res) { //地理位置 //#ifdef MP-WEIXIN if (res

2021-07-28 18:20:03 5775

原创 Vue + iView实现Excel上传

1、HTML部分<Col span="2">上传文件:</Col><Col span="22" class="uploadExcelBox"> <Upload ref="uploadExcel" :loading="uploadLoading" :action="uploadFileUrl" accept="xlsx,xls" :format="uploadFormat" :before-upload="beforeImgFile" :on-succ

2021-06-21 20:09:04 1229 10

原创 HBuild终端运行项目

zhongd

2021-06-10 11:12:34 507

原创 iveiw:Switch开关用法

1、HTML<Table border :columns="tableColumns" :data="tableData" :loading="tableLoading"> <!-- 是否开启:0:启用,1:禁用 --> <template slot-scope="{ row, index }" slot="isStatus"> <i-switch v-model="row.isStatus1" @on-change="handle

2021-06-09 16:07:46 910

原创 iview table组件动态新增行并插入input

1、HTML部分<Table border :columns="rulesTableColumns" :data="rulesTableData" > <template slot-scope="{ row }" slot="ranking" ref="row"> <div class="service table_slot"> <Input v-model="row.ranking" @input="onInputT

2021-06-01 19:44:55 2186

原创 iview modal 底部不显示

<Modal v-model="showModal" :title="modalTitle"> <div slot="footer"></div></Modal>

2021-03-19 18:07:24 1125

原创 iview table控件在render函数里设置DOM属性值的方法

columns:[ { title: '员工头像', key: 'a', render:(h,params) =>{ return h('div',{ style: { width: '100%', height:"120px", display: "flex","justify-content": "flex-start","align-it.

2021-01-07 11:15:29 799 1

转载 js反向截取字符串:lastIndexOf()

var str = "abcdefg";var index = str.lastIndexOf("c");

2020-12-09 19:10:10 1161

原创 获取小程序码(一物一码)实现方式

先放小程序官方文档:获取小程序码要求实现:获取小程序码,且无数量限制。实现思路:1、点击按钮后调接口,接口返回小程序码;2、把小程序码传给Dom模板,模板是自定义的,可在页面上渲染成任意自己想要的样子。3、注意:用户扫描小程序码进入到的指定页面,在onLoad()生命周期取参时需要区分用户是扫码进入的还是正常通过url跳转进入的,2种进入页面的取参方式不同。具体步骤:1、js代码show_post() {//按钮点击事件 var tha...

2020-12-01 17:41:43 2955 4

原创 本地浏览器可发送跨域请求

1、浏览器桌面图标 -- 右键 -- 属性 -- 快捷方式 -- 目标2、在“目标”输入框里原有的值后面加如下(带一个空格): --user-data-dir="c:\ChromeDebug" --test-type --disable-web-security3、应用 -- 确定 -- 然后重启浏览器就好了注意:此方法只有在本地有效。...

2020-12-01 15:52:46 235

原创 PS:高清晰度的源文件保存成图片如何使图片大小最小

1、第一个快捷键:Ctrl+Alt+i2、在弹窗里把“分辨率”填72,点击“确定”。(72是图片可保存的最小分辨率)。3、第二个快捷键:Ctrl+Alt+Shift+s,在弹窗里选择要保存的格式就好了。

2020-11-09 17:24:00 2259

转载 Vue实现三级路由

https://segmentfault.com/a/1190000018127192

2020-09-03 17:41:39 2409

转载 Vue、element-ui的resetFields()方法重置表单无效的问题

1、问题描述:element-ui的resetFields()方法重置表单无效。2、原因:参考:http://www.mamicode.com/info-detail-2949549.html3、解决方案:在用resetFields()重置表单之前,先把form表单里的值都重置。...

2020-08-21 16:16:55 1020

原创 Vue表单添加回车事件使下一个input获取焦点

话不多说,先贴代码:1、form表单代码<el-form ref="loginForm" :model="loginForm" :rules="loginRules" status-icon> <el-form-item prop="username"> <el-input v-model="loginForm.username" placeholder="请输入管理员账号" name="username" type="text" auto-.

2020-08-04 10:54:16 2793 2

转载 vue给input添加回车事件无效

如下图,我给input添加了回车事件,但是按了回车之后始终无法触发事件。v-on:keyup.enter="submitForm"解决方法:加上.native修饰v-on:keyup.enter.native="submitForm"

2020-08-04 10:12:08 1643

原创 vue-element-admin使用Tinymce富文本插件的踩坑填坑

vue-element-admin项目的作者已经封装好了Tinymce富文本组件,我直接在Git上下载demo运用到自己项目里。这是Git地址:https://github.com/PanJiaChen/vue-element-admin一、Bug描述:(组件的代码和demo基本一致的前提下)我在编辑弹窗里引用了Tinymce富文本组件,如下图,table的每条数据都有一个“修改”按钮,每次点击“修改”按钮,则弹窗里显示该行对应的HTML。可是从第二次开始每次富文的内容都和第一次的一样,按道理不

2020-07-29 16:11:52 6549 15

转载 封装element Dialog实现全屏、最小、双击回复原状和拖拽功能

https://www.jianshu.com/p/fa36f0ed9222

2020-07-28 10:31:57 2008

转载 让Vue项目更丝滑的几个小技巧

一、数据不响应,可能是用法有问题比如下面这段代码:<template> <div> <div> <span>用户名: {{ userInfo.name }}</span> <span>用户性别: {{ userInfo.sex }}</span> <span v-if="userInfo.officialAccount"> 公众号: {{

2020-07-23 19:21:37 359 1

转载 提升工作效率的JS技巧

1、返回日期数列里与目标数列最近的日期下标const getNearestDateIndex = (targetDate, dates) => { if (!targetDate || !dates) { throw new Error('Argument(s) is illegal !') } if (!dates.length) { return -1 } const distances = dates.map(dat.

2020-07-23 18:42:18 173

转载 ElementUI的el-dialog弹出层实现拖拽、拉伸、双击全屏的效果

直接参考这个帖子,什么代码都不用改,直接复制粘贴,3秒实现效果,完美!https://www.cnblogs.com/lh-web/p/12383355.html

2020-07-11 10:10:56 1790 1

原创 CSS : 文本换行 / 文本不换行 / 文本不换行,超出部分显示省略号

一、文本换行 html文本超出时换行:word-break属性http://www.w3school.com.cn/cssref/pr_word-break.asp二、文本不换行 文本不换行white-space: nowrap;三、文本不换行,超出部分显示省略号CSS 实现不换行 / 自动换行 / 文本超出隐藏显示省略号1、自动换行 div{ word-wrap:break-word; word-break:normal; } 2、强制不换行...

2020-07-08 10:39:06 1247

原创 Vue axios发送post请求参数太多,接口报错:No ‘Access-Control-Allow-Origin‘ header is present on the requested resou

场景描述: 在进行修改操作时,因为表单里有富文本组件,用户在富文本里编辑的html可能会很长,富文本里的html作为参数传给接口执行updata操作时报错。Access to XMLHttpRequest at 'http://192.168.*.**:8888/base/infoNews/update? ... ...' from origin 'http://192.168.3.7:8805' has been blocked by CORS policy: Response to p...

2020-07-04 14:46:05 1486

原创 npm install 报错 : gyp ERR! configure error

问题:(在Xshell上操作测试版本的项目) 新拉代码之后,npm install 报错,报错信息如下:gyp ERR! configure error gyp ERR! stack Error: EACCES: permission denied, mkdir '/home/work/buildqx/vue-admin-template/node_modules/node-sass/.node-gyp'报错截图:解决方法:npm install --unsafe-per...

2020-06-29 20:01:57 1811

原创 在vue项目中使用element-tree-grid(表格树)

Git Demo 网址 :https://github.com/ProsperLee/element-tree-grid相关技术贴:https://www.lagou.com/lgeduarticle/41612.html一、使用方法:1、通过npm安装element-tree-gridnpm install element-tree-grid --save2、在main.js中注册element-tree-gridvar ElTreeGrid = require('el..

2020-06-18 13:10:22 4278 3

原创 vue调接口的2种写法

方法一:1、例如在src/api/post.js 文件:import request from '@/utils/request'//获取数据const get = (param) => { return request({ url: '/api/post/get',//接口url method: 'post', params: param })}export default { get,}2、在..

2020-06-13 20:25:31 11070 1

原创 vue 路由刷新之后当前页无法访问

去掉这个属性就好了

2020-06-04 15:56:32 1158 1

转载 el-col内容为空时,整个el-col不显示。

问题:其中一个<el-col>中内容为空,或者el-col内部html标签也为空,则这个el-col整体就不显示。解决方案:给<el-col>设置 style="min-height:1px;" 就可以了。

2020-05-30 18:15:12 4439

原创 使用ES6新特性async await进行异步处理,实现同步效果。

在vue项目里定义了一个全局函数,如下:每次都返回空数组。因为接口调用后还未返回数据,该函数就将result return了。Vue.prototype.getCity = function(){//获取城市列表 var result = []; getCityList().then(res=>{ if(res.code==0){ //console.log(res.data); resu..

2020-05-25 14:47:02 654

空空如也

空空如也

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

TA关注的人

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