- 博客(35)
- 收藏
- 关注
RSS订阅原创 vue 截图功能的实现
<span @click="toImage()">导出图片</span> <!-- 需要截图的区域 --><div class="imageBox">....</div> // 截图 crossTabletoImage () { const canvas = document.createElement('canvas') const canvasBox = document.querySelec
2022-01-28 15:25:21
2458
原创 vue纯前端导出表格, 可设置表格样式
// 导出Excel方法（表格id，不加扩展名的文件名，sheet名）export function exportExcelMethod (tableId, fileName, sheetName) { tableToExcel(tableId, fileName, sheetName)}const tableToExcel = (function () { const uri = 'data:application/vnd.ms-excel;base64,' // 设置导出表格的单元格默
2022-01-28 10:52:23
1963
原创 echarts动态的折线柱状图(渐变色的marker处理；控制可视区域展示个数；动态设置柱状图圆角等)
.vue import multiBarLineChart from '@/utils/echarts.js' drawChart (xData, datas) { this.myEchart = echarts.init(this.$refs.myChart) const countLimit = 8 // 可视范围展示个数 this.myEchart.clear() this.myEchart.setOption(multiBarLineChart(xData, data.
2021-12-22 14:16:47
1439
1
原创 vue-quill-editor富文本编辑器(图片使用base64或自定义上传,最大字数限制等功能)
前置操作:1.下载: "quill": "^1.3.7", "quill-image-resize-module": "^3.0.0", "vue-quill-editor": "^3.0.6",2.config配置— vue.config.js (脚手架3.x版本) chainWebpack (config) { ... config.plugin('provide').use(webpack.ProvidePlugin, [ { 'wi
2021-12-16 16:37:52
2020
原创 vue全局注册多个自定义指令(按模块引入)
与main.js同级新建directives文件夹, 包含index.js 以及 modules文件夹, 如图2.常规全局注册单个指令,一般为这样但这里使用require.context, 将modules中的文件夹均引入index.js:import Vue from 'vue'const files = require.context('./modules', false, /.+\.js$/)// 按模块引入// files.keys(): 打印出来为['./focus.js.
2021-09-29 17:41:15
1961
原创 vue处理el-message重复弹出问题
思路: 重写element-ui的message, 全局使用则在main.js更改, 局部页面使用则单独引入resetMessage.jsimport { Message } from 'element-ui'let messageDom = nullconst resetMessage = (options) => { if (messageDom) messageDom.close() // 判断弹窗是否已存在,若存在则关闭 messageDom = Message(option
2021-07-23 11:12:20
1088
1
原创 vue 分页查询条件的缓存
在项目中经常遇到这种情况, 首页为常见的查询条件下的表格, 可跳转详情页从详情页返回首页时, 需缓存用户上一次的查询条件若是跳转其他页面, 则不缓存查询条件, 且清空缓存methods: { // 跳转详情页面 toViewDetail () { // 缓存查询条件(this.$utils.setSS为项目封装的sessionStorage的setItem方法) this.$utils.setSS('searchObj', this.searchOb.
2021-05-19 16:49:11
1450
原创 vant组件van-uploader(可多选)上传图片前对base64进行压缩
<van-uploader v-model="commentObj.imgModelList" multiple :max-size="5*1024*1024" :max-count="9" :before-read="beforeRead" :after-read="afterRead" :before-delete=".
2021-03-23 10:28:26
2657
原创 富文本中提取纯文本
getSimpleText (html) { let re1 = new RegExp('<.+?>', 'g') let msg = html.replace(re1, '') msg = msg.replace(' ', '') return msg }
2021-03-23 09:52:50
829
原创 vue计算图片尺寸,获取宽高
methods:{ getData(){ // 获取数据后传入图片url获取尺寸(宽高) data.map(async item => { item.imgSize = await this.getImgSize(item.imgUrl) }) } // 获取图片尺寸 getImgSize (url) { return new Promise((resolve, reject) => { let imgOb
2021-01-18 10:53:02
7571
原创 数组的相关处理
let arr1 = [4,6,7], arr2 = [5,6,7]let newArr = arrA .concat(arrB ).filter((cur, i, arr) => { return arr.indexOf(cur) === arr.lastIndexOf(cur);}) // c = [4,5]
2020-12-07 17:33:19
125
原创 el-form自定义表单验证 +离开页面前判断数据是否改动并提示
实现原理:1.判断页面是否有数据改动, 可以在watch方法中深度监听form这个对象是否有改动.(这里要注意, isDataChangeCount之所以用Number来判断变化次数, 是因为页面加载完时, form会出现一次数据变化, 因此只用true和false来判断是不准确的)2.在beforeRouteLeave方法里进行对isDataChangeCount的判断,进而实现对应的提示和操作一个常规的表单验证export default { data () { // 在这里声.
2020-11-11 16:46:01
2524
3
原创 element回到顶部组件el-backtop的全局注册,按需使用
前置bug: 直接在子页面添加el-backtop组件没有生效后续修改: 在layout页面添加el-backtop组件, 按需展示实现原理:一般在项目的layout布局页面, el-main板块可滑动,因此针对el-main板块做回到顶部的操作,然后根据页面的路由来按需展示该功能, 上代码-----layout.vue<template> <div> <el-header></el-header> <el-container.
2020-10-27 16:21:06
707
原创 echarts柱状图负值-动态设置圆角样式
如图, 柱状图有负数时,圆角的样式需要进行动态调整 series: [ { type: 'bar', barWidth: '30', // 在这里对data进行自定义配置即可 data: seriesData.map(item => { // console.log(item, 'item') return { val.
2020-10-27 16:01:17
3804
原创 vue点击目标区域之外隐藏/关闭目标区域
如图为自己写的下拉框, 点击头部可实现控制下拉框盒子的显示与隐藏, 但是点击除了头部与下拉框以外的区域, 也需要关闭下拉框盒子, 实现方式如下：html代码：（stop修饰符是用来阻止事件冒泡）<template> <div class="root"> <div class="dropdownMenu"> <div class="top" @click.stop="showDropdown=!showDropdown"&.
2020-09-24 17:44:21
8299
原创 刷新后vuex数据丢失解决方案- vuex-persistedstate持久化插件
问题: 刷新后vuex数据丢失导致页面报错解决: 使用vuex的插件vuex-persistedstate安装npm install --save vuex-persistedstate在store文件中进行配置import Vuex from 'vuex'import createPersistedState from 'vuex-persistedstate' // /引入插件Vue.use(Vuex)const store = new Vuex.Store({ st
2020-08-31 15:39:16
316
原创 el-table: 相同内容则自动合并行 mix 手动进行某几行的合并
给el-table加上:span-method="objectSpanMethod"方法 <el-table :data="tableData" :span-method="objectSpanMethod"> <el-table-column width="80" prop="order" label="序号" align="center"><.
2020-08-25 16:22:28
538
1
原创 echarts柱状图X轴文字过长换行显示
// 在option的xAxis的axisLabel里添加配置 axisLabel: { // rotate: '45', interval: 0, color: '#767676', fontSize: 12, // x轴文本换行 formatter: function (params) { var newParamsName = '' // 最终拼接成的字符串 var paramsNameNu
2020-08-25 15:51:28
4186
2
原创 element常用知识点记录
el-table序号翻页递增<el-table-column align="center" type="index" label="序号" :index="(pageNum-1)*pageSize + 1" width="80"></el-table-column>el-dialog外部锁定(点击外部时不关闭对话框)// 将Dial.
2020-08-25 15:46:38
348
原创 echarts的dispatchAction操作: 默认选中最右一项tooltip, dataZoom可视区域默认置于最左
// 1.获取营业收入 getIncomeData () { let params = { method: 'get', url: `/mobile/finManage/cmfh/indicatorValueList/${this.indicatorCode1}` } this.httpRequest(params).then(...
2020-08-25 15:43:20
2662
1
原创 echarts双y轴的设置
柱状图与折线图同在一个图表内, 实现双y轴– common/echarts.js文件里import echarts from 'echarts'const chart = { myIncomeChart (xdata, incomedata, yoydata, yoyMin, yoyMax, incomeMax, incomeMin) { const option = { ...
2020-08-25 15:08:39
1015
原创 echarts折线/柱状图的区域点击事件
缺陷: 柱状图数据过于悬殊时, 需要精准点击到柱状图, 体验感差需求: 点击红色框区域都能联动 // 用getZr方法绑定click chart.getZr().on('click', async (params) => { // 无论是否点击到图本身,都能拿到坐标 const pointInPixel = [params.offsetX, params.offsetY] if (chart.containPixel('grid', pointInPixel)) { .
2020-08-21 17:13:51
1552
1
原创 vue路由url不存在则跳转指定页面
方法1：路由守卫拦截判断router.beforeEach((to, from, next) => { if (to.matched.length === 0) { // 如果未匹配到路由 from.name ? next({ name: from.name }) : next('/login') } else { next() // 如果匹配到正确跳转 }})方法2：对路由做重定向// routes里加上 { path: '*',redirect: '.
2020-07-16 11:13:38
5136
原创 vue路由跳转时取消之前的请求 cancelToken以及解决路由重复点击报错问题
// 1.请求拦截器window._axiosPromiseArr = [] // axios中设置放置要取消的对象axios.interceptors.request.use(config => { config.cancelToken = new axios.CancelToken(cancel => { window._axiosPromiseArr.push({ cancel })}) return config}, error => { return Pr
2020-07-09 10:46:45
1439
原创 移动端iOS关于时间比较判断的坑
// 1. 原代码getCurrentTime () { const startTime = new Date("2019/12/12 00:00:00") // 页面开始时间 const endTime = new Date("2019/12/20 24:00:00") // 页面结束时间 const nowTime = new Date() /* iOS无法识别00:00:00和24:00:00这两个时间临界值, 会转成NAN, 因此导致if判断条件不成立
2020-06-23 17:06:09
548
原创 vue实现导航tab吸顶 & 点击锚点动画跳转 & 监听滚动
示例图页面代码 // 导航tab部分, 利用isFixed实现吸顶 <div class="floor bgW" ref="floorFixed" :class="{'isFixed': isFixed}"> <header v-for="(item,index) in navList" @click="clickToFloor(index)" :class="{'
2020-06-16 12:05:41
1902
原创 vue获取当前时间 & 动态加载js包 &全局滚动条优化
el-table序号翻页递增<el-table-column align="center" type="index" label="序号" :index="(pageNum-1)*pageSize + 1" width="80"></el-t...
2020-05-08 11:23:31
233
原创 css获取屏幕可视区域的高度(一屏展示,不产生纵向滚动条)
需求: 两个div内容只占屏幕的一屏,不要产生纵向滚动条<div class="topBanner"> 这个banner的高度为100px </div><div class="targetBox"> 这个盒子的高度跟屏幕保持一致 </div>--css.topBanner{ width: 100%; height: 100px;}...
2019-10-25 17:25:16
2623
原创 flex布局: 一行显示固定个数,强制换行且均匀分布(超出的分布靠左)
如图需求:1. 一行显示3个2. 强制换行3. 宽度不写死4. 高度固定-- html<div class="mycards"> <div class="card_item"></div> <div class="card_item"></div> <div class="card_item"&g...
2019-10-24 16:02:22
77698
15
原创 前端面试题大杂烩
一、HTML / CSS简述对 Web 语义化的理解？就是让浏览器更好的读懂你写的代码，在进行 HTML 结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简介明了，易于进行 Web 操作和网站 SEO,方便团队协作的一种标准，以图实现一种“无障碍”的 Web 开发。①去掉或者丢失样式的时候能够让页面呈现出清晰的结构；②有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信...
2019-10-22 10:55:37
2067
原创 vscode保存时自动格式化代码及配置
设置json文件以让vscode保存代码时 自动按照eslint格式化“文件-首选项-设置” :{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 "edito...
2019-10-18 15:48:59
5277
1
原创 微信小程序的异步请求/ promise封装 / async&await改造
1. 小程序原生发送异步请求: wx.request// 原生发送异步请求wx.request({ url: '', // 请求的路径 method: "", // 请求的方式 data: {}, // 请求的数据 header: {}, // 请求头 success: (res) => { // res 响应的数据 }})2. 用 promise 封装...
2019-09-01 14:27:40
4174
1
原创 解决微信小程序中scroll-view横向滚动的问题
解决微信小程序中scroll-view横向滚动的缺陷问题需求: 在首页的vue文件中实现横向滚动, 书写代码如下<div class="list"> <scroll-view class="scroll-view_H" scroll-x style="width: 100%"> // 元素内容 </scroll-view></div&...
2019-09-01 14:18:20
443
1
原创 Web API重要知识点_简要总结
Web API重要知识点总结找元素的方法document.getElementById(); //通过id找到元素，找到的就是元素，找不到返回nulldocument.getElementsByClassName(); //通过类名找到元素，永远得到伪数组，找到几个，伪数组里元素就有几个document.getElementsByTagName(); //通过标签名找到元素，永远得到伪数组...
2019-08-23 21:23:51
350
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人