![](https://img-blog.csdnimg.cn/2019092409533858.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
张兴华(MarsXH.Chang)
行动是治愈恐惧的良药,犹豫拖延将不断滋生恐惧!
展开
-
Element表格表头/单元格合并、动态表头、斜线三分头
Element表格表头/单元格合并、动态表头、斜线三分头。原创 2024-02-28 13:55:13 · 553 阅读 · 1 评论 -
基于Element的Select下拉选组件(支持快速全选)
Select下拉选增强 支持快速多选、tooltip等示例图。原创 2023-05-31 19:04:49 · 1221 阅读 · 0 评论 -
文件上传校验文件是否更改(文件是否可读)
文件上传之后(文件信息暂存在前端,还未上传到后端),如修改原文件名,然后点击上传,会导致上传失败。所以在上传到后端之前需要校验文件。原创 2023-03-30 16:05:19 · 615 阅读 · 1 评论 -
vue获取数据的两种方式实践+简单骨架屏实现
从技术角度讲,两种方式都不错 —— 就看你想要的用户体验是哪种。那么我们来实践一下这两种获取数据的方式,以及用户体验优化的一点思考。**一、首先是第一种:导航完成之后获取,**这种方式是我们大部分都在使用的,(因为可能一开始我们只知道这种方式使用这种方式时,我们会马上导航和渲染组件,然后在组件的created钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态,还可以在不同视图间展示不同的 loading 状态。原创 2023-03-30 15:55:49 · 2129 阅读 · 0 评论 -
Element el-table 等表格组件超出隐藏(show-overflow-tooltip)按需展示且可鼠标移入
表格文字超出列宽 … 隐藏,并显示 popover/tooltip 。虽然最新的 Element Table 提供了show-overflow-tooltip属性可以很容易实现。而且可以按实际是否超出展示/隐藏 提示窗。但却不可以将鼠标移入提示窗,导致一些关键信息不能选择复制等问题。特实现了一种即可按需展示提示框,又可移入鼠标的方案。...原创 2022-08-31 16:58:24 · 4940 阅读 · 1 评论 -
动态获取并设置 iframe 自适应高度
实际需求:页面中有一些固定元素 + 内嵌 iframe 页面,此时如果给 iframe 设置固定高度会导致 iframe 内部滚动,体验不佳。于是需要动态获取 iframe 实际高度并设置,但有些 iframe 页面会有占位 loading or 骨架屏等,导致一开始就获取高度会不准。所以给出解决方案如下:...原创 2022-08-31 16:19:55 · 2311 阅读 · 0 评论 -
Vue 单/多图片(可全屏预览)翻页轮播组件
支持单/多张图翻页轮播可全屏预览自定义图片宽高自定义无图提示语自带图片加载loading可将源码根据实际需求改造。效果图全屏预览单图,多图翻页轮播使用<image-preview :imgList="['url1', 'url2']"></image-preview>源码<template> <div :class="['image-preview-wrapper', imgList.length ? 'has-border'.原创 2022-03-09 18:31:12 · 3161 阅读 · 2 评论 -
源码探秘之 vue-property-decorator
本文只浅析@Prop属性装饰器和@Watch方法装饰器的核心源码,其他原理相似,暂不赘述。关于JS装饰器可查看本人另一篇:JS Decorator —— 装饰器(装饰模式)关于@Component类装饰器及vue-class-component源码可查看本人另一篇:源码探秘之 vue-class-component先回顾一下使用 vue+ts 开发的一个组件例子:<template></template><script lang="ts">// 此处是.原创 2022-03-07 12:12:34 · 947 阅读 · 0 评论 -
源码探秘之 vue-class-component
本文只浅析@Component类装饰器的核心源码,其他原理相似,暂不赘述。关于JS装饰器可查看本人另一篇:JS Decorator —— 装饰器(装饰模式)先看一个使用 vue+ts 开发的一个组件例子:<template></template><script lang="ts">// 此处是从vue-property-decorator 统一引入的,实际 Component 定义在 vue-class-component 包内import { Com.原创 2022-03-07 10:48:05 · 1309 阅读 · 0 评论 -
终极解决TS 或者 Vetur 报错,Cannot find module ‘@/xx/xxx‘,找不到*.vue 等编译问题
报错详情:类似于// 编译器报错:Cannot find module '@/xx/xxx' or its corresponding type declarations.Vetur(2307)// 编译器报错:找不到模块“XXX.vue”或其相应的类型声明。ts(2307)// 或者 控制台报错 this.$router 等解决方案配置:// tsconfig.json{ "compilerOptions": { "target": "esnext",原创 2021-12-13 10:23:46 · 34830 阅读 · 4 评论 -
Element 表格固定列横向滚动条无法拖动的问题解决
在Element-UI中,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条,解决的办法就是将固定区域底部留出一个滚动条高度的距离。如下图所示为对固定列区域调整后的效果图:下面是解决问题所需的代码:.el-table .el-table__fixed { height:auto !important; bottom:16px; }需要注意的是,上面的代码需要放在全局的样式文件中才有效果。码字不易,觉得有帮助的小伙伴记得点个赞鼓励下~原创 2021-11-20 10:38:49 · 4329 阅读 · 3 评论 -
解决按钮点击后长按回车无限触发点击事件问题
思路:包一层 UI 库的 button,在里面监听 onkeydown 和 onkeyup,用 flag 阻止长按回车一直触发。然后在项目全局重新注册 el-button 覆盖掉UI内的按钮组件。优点即开即用,将组件添加到项目内,引入注册即可。也不会阻止第一次回车触发的点击事件,保留原有逻辑。不需要改项目中的原button代码。使用(Element-UI)// main.jsimport DDButton from '@/components/button.vue';// 覆盖原创 2021-11-03 10:28:00 · 1557 阅读 · 0 评论 -
Element DatePicker 日期最多选三十天
<el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>data() { return { pickerOptions: { onPick: fu原创 2021-11-03 10:21:38 · 522 阅读 · 0 评论 -
Element + Vue2.6.x 分页 Mixin 封装
<template> <el-table v-loading="tableLoading" :data="tableData" border :max-height="tableHeight - 100"> <!-- 分页参数 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page原创 2021-11-03 10:20:08 · 341 阅读 · 0 评论 -
Element 树表格自定义全选 Header
<el-table-column width="40" :render-header="headerRender"> <template slot-scope="scope"> <el-checkbox v-model="scope.row.isSelected" :disabled="scope.row.isDisabled" @change="val => selectRow(val, scope.row)" &原创 2021-11-03 10:17:56 · 462 阅读 · 0 评论 -
踩坑日记 - Sortable 拖动树表格排序
以 Element 树表格为例,实现了树表格的同级之间排序(跨级也有代码,但还有问题)踩坑点:onMove回调中 oldIndex 会随时变化,若想拿到最开始拖动的Row,需要使用onChoose 。在onChoose需将 oldIndex 或者 oldRow 存储一下,供后续onMove和onEnd使用。onMove 中可以使用return false 阻止拖动因为是树形结构,所以回调中返回的 Index 并不准确,所以要预先在onChoose 时将树数据扁平化,才能根据返回的Index获.原创 2021-09-15 10:59:40 · 2459 阅读 · 1 评论 -
Antd 树表格 defaultExpandAllRows 踩坑
问题背景在使用 antdv 中树形表格时,设置了默认展开所有节点属性::defaultExpandAllRows="true"。但是在重新获取新的数据后(即经历了tableData置空再赋值),却没有再默认展开节点。原因解析defaultExpandAllRows这个属性仅仅是用来设置默认值的,只在第一次渲染的时候起作用,当我们获取了数据之后再重新加载时,这时已经是第N次渲染了,所以它并没有默认展开。解决方案方案一:数据没有加载之前不渲染。// 增加 v-if<a-table v原创 2021-05-15 16:25:06 · 3986 阅读 · 1 评论 -
Nuxt源码 — plugin (middleware) 参数之谜
在我们使用 Nuxt 框架的时候,往往在 Plugins or Middleware 中用到一些参数($axios、app、store、redirect...)。很多喜爱研究的小伙伴不知道他们到底如何来的。如中间件中:// 中间件export default async function ({ app, $axios, store, error, redirect, req }) { if (req && req.url === '/__webpack_hmr') return原创 2020-12-11 16:19:04 · 2078 阅读 · 0 评论 -
移动端——Uni-app 使用 Cavans 压缩图片插件
等比例压缩图片 可指定图片宽高,兼容 H5 和 小程序使用(引入组件,调用组件内 compress 方法)<compress ref="compress" />import compress from '@/components/compress.vue'components: { compress }// 在需要压缩时调用uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = c原创 2020-12-07 11:46:11 · 845 阅读 · 2 评论 -
深入浅出 Vue —— 第一篇、变化侦测
序、Vue.js 简介时至今日,Vue.js 就像曾经的 JQuery,已经成为前端工程师必备的技能。不可否认,它可以极大的提高我们的开发效率,并且很容易学习。这就造成了一个很普遍的现象,大部分前端工程师对框架以及第三方周边插件的关注程度越来越高,甚至把自己全部的关注点都放在了框架上。在我看来,这多少有点亚健康,不是很利于前端工程师的技术成长。因为我发现大家关注框架时,更多的是关注其用法(包括框架自身、第三方插件和 UI 组件库等)、奇淫技巧和最佳实践等。大家在使用 Vue.js 开发项目时,不免原创 2020-11-11 11:10:56 · 1639 阅读 · 0 评论 -
Vue 前端导出 PDF & Excel(jspdf、html2canvas、vue-json-excel)
有时我们前端会遇到懒蛋子后端 or 膈应人的产品,让我们前端自己导出 PDF & Excel,没关系,心(bao)平(tiao)气(ru)和(lei) 的跟他说:我可以!一、html2canvas + jsPDF 导出 PDF插件用到的是:html2canvas 和 jsPDF.js思想就是先把页面用 html2canvas 转换成 canvas,然后再借助 jsPDF 把 canvas 导出成 PDF 文件。1、install html2canvas 插件 npm install h.原创 2020-11-04 14:28:39 · 1830 阅读 · 0 评论 -
JS (webRTC) / Vue (Nuxt & Node) 获取用户本机 IP
获取用户本机 IP,偶尔前端小伙伴会遇到这样奇(e)葩(xin)的需求,当然是极其偶尔。第一种:JS 通过 webRTC 获取这就是网上大多数的解法:function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs //compatibility for firefox and chrome var myPeerConnection = window.RTCPeerConnection ||.原创 2020-07-23 16:03:32 · 2231 阅读 · 3 评论 -
NUXT 踩坑 —— nuxt 使用 keep-alive 和 keep-alive-props
1、在标签上添加属性<nuxt keep-alive :keep-alive-props="{ include: includeArr }" />// jsdata () { return { includeArr: ['cardApplyQuery'] // 需要缓存的组件名数组 }}2、在组件中添加name属性这个是好多网上教程没有点明的,这里重点提出。一定要在组件中加上对应的nameexport default { name: 'cardApplyQuery'原创 2020-07-08 10:02:23 · 4634 阅读 · 0 评论 -
NUXT 踩坑 —— 封装 Axios 请求拦截
1、配置 nuxt.config.js//添加模块modules: [ 'cookie-universal-nuxt', "@nuxtjs/axios",]//添加插件引用plugins:[ '@/plugins/axios',]2、新增 plugins/axios.jsimport { Message } from "element-ui";export default ({ redirect, $axios }) => { $axios.onRequest(co原创 2020-07-08 09:56:08 · 7220 阅读 · 3 评论 -
Nuxt 报错 Document / Window not defined 亲测解决方案(vue2Editor富文本编辑器之类三方包)
本文主要介绍 vue2Editor 在 Nuxt 中的使用,以及报错解决方案(亲测有效)。1、问题背景项目中要使用富文本编辑器,看了下一些流行的编辑器(UEditor、wangEditor、vue2Editor、quill…),最后选择了 vue2Editor,虽然功能不多,star 也不多,但是我喜欢它的超轻量(只有200+K),反正我们的需求也不需要那么多功能。但上天往往爱考验我,...原创 2020-03-27 14:47:14 · 7102 阅读 · 8 评论 -
Vue 中的 Render 全面详解 (渲染函数 & JSX)
相信大家都或多或少的在 code 中见过 或使用过 render,如果你对它还是一脸懵逼,那就快上车!今天就带你来盘它。原创 2019-11-18 14:59:23 · 7508 阅读 · 3 评论 -
Axios详解
首先祝广大程序猿们节日快乐!一、axios简介基于promise,用于浏览器和node.js的http客户端二、特点支持浏览器和 node.js支持 promise能拦截请求和响应能转换请求和响应数据能取消请求自动转换 JSON 数据浏览器端支持防止 CSRF (跨站请求伪造)三、安装1、 利用 npm 安装 npm install axios --save2、 ...原创 2019-10-24 11:29:12 · 1544 阅读 · 0 评论 -
Vue 实现点击空白处隐藏某节点(三种方式:指令、普通、遮罩)
在项目中往往会有这样的需求: 弹出框(或Popover)在 show 后,点击空白处可以将其 hide。针对此需求,整理了三种实现方式,大家按实际情况选择。当然,我们做项目肯定会用到 UI 框架,常见的 Element 中的组件提供了这样的方法。但是,就算使用框架,有些时候还是要用到的,比如:Element 中的 Popover,当我们想使用手动方式(trigger 触发方式为 man...原创 2019-10-23 10:03:06 · 2224 阅读 · 3 评论 -
Vue-懒加载(判断元素是否在可视区域内)
上公式:元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop)并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度)上代码:一个多图表 懒加载 例子<template> <div :id="boxId" style="height: 450px"> <di...原创 2019-10-15 15:33:31 · 6118 阅读 · 2 评论 -
JS(Vue)数据处理实战(二)
有如下需求:将数据通过表格展示。数据:result: { BIOS: { Passed: 16, Failed: 2, Not Run: 61, In Progress: 3, No checkpoint: 1 }, BMC: { Not Run: 30, Passed: 27, In Progress: 1, No checkpoint: 1...原创 2019-07-12 12:52:57 · 356 阅读 · 0 评论 -
Element-UI可编辑表格的实现
一、 可编辑单元格的实现实现效果:点击可编辑实现原理:在单元格中放置span 和 input ,绑定data中同一的数据,捕捉点击单元格事件和失去焦点事件,添加/删除 元素的相应class,控制span 和 input 框的显示。实现代码:Style:.tb-edit .input-box { display: none}.tb-edit .current-cell .inp...原创 2018-10-30 10:43:41 · 88151 阅读 · 13 评论 -
Vue 中 css scoped 样式穿透 ( stylus[>>>] / sass / less[/deep/] )
scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped1、stylus的样式穿透 使用 >>>.wrapper >>> .swiper-pagination-bullet-...原创 2019-10-09 10:59:34 · 2425 阅读 · 0 评论 -
Vue Element 导航子路由不选中问题
首先说下遇到的问题1.进入嵌套路由,当前父导航无法高亮显示2.页面刷新后导航重置问题3.在嵌套路由刷新页面也会导致导航重置问题接下来是解决方案:elementUI 里面有个属性 default-active(当前激活菜单的 index)<el-menu :default-active="activeIndex" @select="handleSelect" rou...原创 2019-09-30 15:51:50 · 1379 阅读 · 0 评论 -
Vuetify Warning: Unable to locate target [data-app]
今天在大改 nuxt 项目 layout 的时候,将 Vuetify 的 side nav 换成 Element 的折叠式 nav 后,发现了一个 Warning,虽然不影响使用,但是控制台输出一堆,一个有强迫症的程序猿是忍受不了的。先来看下 Warning:这个提示也是很明显的,意思大概就是 找不到 ‘data-app’ 这个属性目标。并且我发现好多 Vuetify 的组件都会提示...原创 2019-09-30 09:19:32 · 2801 阅读 · 0 评论 -
vue移动端分页
Pagination.vue<template><div id="pagination" :style="{'justify-content':textAlign}"> <div> <div> <span class="pages">共 {{allCounts原创 2018-11-06 18:03:37 · 1985 阅读 · 0 评论 -
mint-ui上拉加载数据-无限滚动
&lt;ul class="wait-list" v-infinite-scroll="getCardList" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0" infinite-scroll-immediate-check=&qu原创 2018-11-06 18:02:10 · 1805 阅读 · 0 评论 -
vue webpack打包后.css文件里的背景图片路径错误解决方法
一般情况下,通过webpack+vuecli默认打包的css、js等资源,路径都是绝对的。但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径,那么要解决这种问题,就得引用相对路径。解决办法打开webpack.prod.conf.js找到output:增加 publicPath: ‘./’, 即可,如图。那么这样后,资源的引用路径就正确了...原创 2018-11-01 09:54:33 · 2219 阅读 · 0 评论 -
使用Vue-Router的导航守卫-无限循环问题
我在项目里面用到了的是全局守卫,beforeEach,方便管理不过遇到了一个问题,就是在beforeEach()中设置好判断条件后出现了无限循环的问题当时的代码如下:router.beforeEach((to, from, next) =&gt; { if (isLogin) { next() } else { console.log('测试') ...原创 2018-10-31 10:28:34 · 4398 阅读 · 2 评论 -
vue组件-动态搜索下拉框组件
组件dropdown.vue代码如下:<template> <div class="vue-dropdown default-theme"> <div class="search-module clearfix"> <input class="search-text" @keyup='search($event)'原创 2018-10-30 10:52:39 · 6637 阅读 · 2 评论 -
vue小项目-todolist
一、需求简述:1、在输入框内输入待办事项,回车后添加到列表;2、点击此事项可以将其状态改为已完成,再次点击变为未完成;3、可以实现已完成、未完成筛选;4、计数;5、在全部列表中可以进行删除;二、实现要点:1、在输入框内输入待办事项,回车后添加到列表;输入框监听回车按键,调用clickenter方法,向存放全部数据的数组rowdatas中push一组数据。clickenter() ...原创 2018-10-30 10:50:46 · 540 阅读 · 0 评论