自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(341)
  • 资源 (14)
  • 收藏
  • 关注

原创 Tab 标签页下拉菜单相关操作逻辑处理

右击 Tab 标签页显示下拉菜单项,例如:刷新当前页、关闭当前页、关闭左侧、关闭右侧、关闭其他、关闭所有等操作。

2022-11-18 11:44:53 128

原创 Dropdown 下拉菜单实现标签页的相关操作

Dropdown 组件是向下弹窗列表。点击或移入触电,会出现一个下拉菜单,可以在列表中进行选择,并执行相应的命令。

2022-11-18 10:26:55 142

转载 Vue3 实现背景水印功能

在 web 的世界里,对于图片文档等增加水印处理是十分有必要的。水印的添加根据环境可以分为两大类,前端浏览器环境添加和后端服务环境添加。通过 canvas 创建一张含有水印信息的背景图片,通过 hooks 函数插入到页面中。

2022-11-10 17:51:56 36

转载 git 创建新分支后上传报错 [rejected] test -> test (non-fast-forward) 解决方法

原因分析是远程库和本地文件存在差异,因为本地 test 是 develop 分支进行修改,所以直接强制推送。

2022-11-01 20:00:53 11

原创 基于 element,阅读 ScrollBar 滚动组件源码

即当 wrap 滚动的时候,thumb 应该向下滚动的距离正好是 transform: translateY(wrap.scrolltop / wrap.clientheight )。thumb 滚动条拖拽处理逻辑:在拖拽 thumb 的过程中,动态的计算 thumb 顶部(左侧)到 track 顶部(左侧)的距离占 track 本身高度(宽度)的百分比,然后利用这个百分比动态改变 wrap.scrolltop 的值,从而触发页面滚动以及滚动条位置的重新计算,实现滚动效果。// 滚动到指定位置。

2022-11-01 19:59:38 178

原创 虚拟滚动(Virtual Scrolling)实现

针对大数据列表一般不会一次性加载,会采用上拉加载或者分页的方式展示。如果 10W 条数据,列表对应着 10W 个 DOM 节点,性能方面体验可能会不太好,因此引入虚拟滚动来优化。虚拟滚动:要渲染完整列表对应的高度是通过 [虚拟计算] 的,并不是文档中存在对应的 DON 节点数。只要 [虚拟列表高度] > [列表可视区高度] 时,就会产生滚动条即可发生滚动操作。在滚动操作时,保证 [实际渲染的列表] 一直存在 [列表可视区] 中,并且动态切换需要渲染的列表数据。

2022-11-01 19:56:58 229

原创 ant-design-vue 库 Loading 组件封装

ant-design-vue 库中 Spin :用于页面和区块的加载中状态。页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

2022-09-20 18:07:13 758

原创 Vue 注册组件,抽离 withInstall 方法

在组件中,我们通常需要使用 Vue.component 去注册组件后才能使用。最后,我们引入 withInstall 方法,组件注册方法变得更简洁了。

2022-08-11 11:49:57 550

转载 npm install 时,出现 cb() never called

npm install 时,解决 cb() never called 问题

2022-07-25 14:28:04 76

转载 运行项目时,出现 Syntax Error: TypeError: token.type.endsWith is not a function 的解决方案

问题描述当为项目代码拉取分支后执行npm install下载依赖包,然后执行npm run serve发现项目运行失败,提示信息为SyntaxError: TypeError: token.type.endsWith is not a function。解决方案将 babel-eslint 版本为10.1.0,把版本降为8.2.2,即重新安装指定版本的依赖。npm install babel-eslint@8.2.2 --save...

2022-03-16 23:35:57 3785 1

转载 git 合并分支时,出现“Please enter a commit message to explain why this merge is necessary”如何退出

git 合并分支时,出现 Please enter a commit message to explain why this merge is necessary 问题解决方案:按i键,进入插入(insert)描述操作,可以选择不输入按Esc键,结束插入描述操作按:wq,表示保存并结束本次操作enter 键即可结束本次错误信息...

2022-03-16 23:31:07 2960

转载 npm install 报错 --ignore-scripts

如果npm install报错,单独安装这个包,加上参数:–ignore-scriptsnpm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! deasync@0.1.21 install: `node ./build.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the deasync@0.1.21 install script.npm ERR! This is probably not a

2022-02-24 11:40:30 2038

原创 Node 相关 API

Node 的 path.resolve 方法import { resolve } from 'path'function pathResolve(dir: string) { return resolve(process.cwd(), '.', dir)}安装依赖yarn add @types/node --devresolve 方法path.resolve([…paths])里的每个参数都类似在当前目录执行一个 cd 操作,从左到右执行,返回的是最后的当前目录。path.

2022-02-22 17:36:11 287

原创 理解 Vue 中的 provide 和 inject

父子组件通过 props 和 emits 来通信。即:父元素通过 props 把数据传递给子元素,子元素通过 emits 通知父元素内部的变化,还可以通过 defineExpose API 的方式暴露给父元素方法,让父元素调用。作用:Vue 还提供了 provide 和 inject API 实现祖先元素和后代元素的通信。使用方法:使用 provide 函数向所有子元素提供数据,子元素内部通过 inject 函数注入使用。使用场景:组件设计内部交互的逻辑,对应子组件提供什么数据,对父组件提供什么方法,

2022-01-28 10:40:32 818

原创 Vue3 setup 函数中的语法糖

setupsetup 函数结束两个参数:props 和 context 一个普通 javascript 对象,暴露了其他可能在 setup 中的值。export default { setup (props, context) { const visible = toRef(props, 'visible') console.log(visible.value) const { attrs, slots, emit, expose } = context }}at

2022-01-27 10:54:55 1365

原创 JavaScript 中空值判断的常用用法

对项目中的有些空值判断进行容错处理,例如三目运算、|、&、if else 等,下面有几个处理空值的方法:!用 ! 做类型判断,通常用来与变量求布尔值,除了 null、undefined、0、NaN 和空字符串为 true 之外,其余都为 false。// 都为 true!null!undefined!''// 都为false!100!'hello'!!!! 用来做类型判断,对第一次 ! 操作后的类型进行取反,可以简化 null、undefined和空字符串的判断逻辑。va

2022-01-26 14:13:51 1302

原创 Vueuse 工具库中常用的 hooks

在 Vue 2.2 中,我们引入了 model 组件选项,允许组件自定义用于 v-model 的 prop 和事件。在 Vue 3 中,双向数据绑定的 API 已经标准化,以减少开发者在使用 v-model 指令时的混淆,并且更加灵活。Vue2 中的 v-model 使用在 2.x 中,在组件上使用 v-model 相当于绑定 value prop 并触发 input 事件:<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --

2022-01-26 14:08:18 1159

转载 Ant Design Vue 展开行

只展开当前行table 中重要的属性如下:参数说明rowKey表格行 key 的取值,可以是字符串或一个函数expandedRowKeys展开的行,控制属性。expandedRowRender额外的展开行实现案例如下:const columns = function (h) { return [ { title: "姓名", dataIndex: "name", key: "name", width: 100 }, { title: "年

2021-11-09 20:31:50 514

转载 JSX 实现动态组件

Vue2 实现动态组件// template<component :is="currentTabComponent" />// JSX<component is={this.currentTabComponent} />实际上,上述 JSX 是不生效的。解决方案方法一const tabData = [ { key: 'weightList', name: '司磅', componentName: 'weight' }, { key: 'quality

2021-11-09 19:56:20 540

原创 tableSearch 组件

table-search

2021-08-29 11:32:12 624

原创 使用 Set 数据结构 或 reduce 求并集、交集

const arr = this.tableData.reduce((prev, next) => { prev.push(next.globalInvId) return prev}, [])const brr = data.reduce((prev, next) => { if (arr.includes(next.globalInvId)) { prev.push(next) return prev } return prev}, [])if

2021-08-25 14:30:19 183

原创 antd-vue table 分页缓存已勾选数据

<a-table size="small" bordered rowKey={this.rowKey} row-selection={{ type: this.selectType, selectedRows: this.selectedRows, selectedRowKeys: this.selectedRowKeys, onChange: this.handleSelectChange.bind(this), }} scroll={ { y:

2021-08-25 11:13:50 904

原创 antd-vue table 动态添加必填项

import Schema from 'async-validator'async handleValidate () { const length = this.tableData.length for (let index = 0; index < length; index++) { for await (let form of (this.tableData[index].extraInfo || [])) { if (form.required) {

2021-08-25 11:13:21 2090

原创 element-ui Checkbox 多选框如何指定绑定的值

Checkbox 多选框,在单独使用可以表示两种状态之间的切换。在el-checkbox元素中定义v-model绑定变量,单一的checkbox中,默认绑定变量的值会是Boolean。// `checked` 为 true 或 false<el-checkbox v-model="checked">备选项</el-checkbox>我们可以看到的是,绑定变量 checked 为 true 或 false。如果我们想将 true 或 false,转换为 1 或 0,或者 Y

2021-08-20 16:40:51 1998

转载 ant-design-vue select 组件 placeholder 被隐藏不显示问题

问题描述:select 组件绑定了 v-model 和 placeholder,当 v-modal 绑定的属性为空时,select 组件的 placeholder 属性不显示。// 初始化 level = '' <a-select v-model="level" placeholder="选择日志级别" allow-clear> <a-select-option value="info">一般</a-select-option> <a-sele..

2021-05-09 10:32:25 2066

转载 Vue 项目中 JSX 语法如何使用 scopedSlots

面试官:Vue如何在 JSX 中使用 scopedSlots ? scopedSlots 和 slot-scope 的区别scopedSlots 和 slot-scope 的区别作用相同:都是作用域插槽 场景不同:slot-scope 是模板语法,scopedSlots 则是编程式语法 使用不同:在 template 中使用 slot-scope,在 render 函数中使用 scopedSlots在 template 中如何使用在 JSX 中如何使用...

2021-03-17 20:06:55 3336

转载 JS number 倒序输出 string

用 JavaScript 写一个函数,输入 int 型,返回整数逆序后的字符串。如:输入整型 1234,返回字符串“4321”。要求必须使用递归函数调用,不能用全局变量,输入函数必须只有一个参数传入,必须返回字符串。输入为一个参数 int 型,输出为字符串。(一)非递归函数:我们将 int 型转化为 string ,再把每个字符分开,接着做反转,最后将每个字符链接起来。const...

2021-02-21 13:58:34 406

原创 Vue 富文本编辑器(Vue-Quill-Editor)

Vue-Quill-Editor:基于Quill、适用于Vue2的富文本编辑器。1.首先安装依赖包npm install vue-quill-editor --save2.引入样式(这里是组件引入,非全局引入)import 'quill/dist/quill.core.css';import 'quill/dist/quill.snow.css';import 'quill...

2021-02-19 23:13:44 135

转载 如何实现输入银行卡号每隔四位自动添加一个空格的功能?

由于银行卡号是相对比较长的,一般银行卡的都是呈现每隔四位数自动补齐一个空格,且再次输入光标不会错位。这里我们使用 element-ui 库中 的 el-input 组件中的 input 事件,对输入的数据进行处理,代码实现如下:<el-input ref="cardInput" v-model="input" placeholder="请输入内容" @input="formatCardNumber"/>我们可以看到 input 事件中的formatCardNumber 方法,就是对输.

2021-02-19 22:25:36 1675

原创 Taro 小程序父组件如何向子组件传参

父组件向子组件传参,子组件在 this.props 中可以接收父组件传递过来的参数。首先定义父组件:classClientextendsComponent{render(){const{ list, type }=this.statereturn(<View><ViewclassName="list">{list.map((list,index)...

2021-02-18 23:11:34 778

转载 element-ui table 组件多列排序样式问题

在 element-ui 官网中,table 组件提供排序功能,但是无法支持多列数据进行排序,那么我们需要如何修改样式呢?<el-table:data="tableData":header-cell-class-name="handleTheadAddClass"@sort-change="handleSortChange"@selection-change="handleSelectionChange"><el-table-columnprop="...

2021-02-17 23:13:38 760

转载  vue 插槽之 v-slot 与 slot-scope 的有什么不同?

v-slot与slot-scope的有什么不同?父组件向子组件里面插入一些东西1.基本使用<SlotDemo:url="website.url">{{website.title}}</SlotDemo><a:href="url"><slot>默认内容</slot></a>exportdefault{props:['url']}2.作用域插槽<...

2021-02-17 22:26:27 2040

转载 深入浅出 webpack 之配置 devServer

devServer可以用来提高开发效率,它提供一下配置可以改变devServer 的默认行为。除了在配置问题通过devServer 传入参数外,还可以通过命令行参数传入。注意:只用在通过 devServer 去启动 webpack 时,配置文件里devServer 才会生效,因为这些参数所对应的功能都是devServer 提供的,webpack 本身并不认识devServer 配置项。1.hotdevServer.hot 配置是否启用模块热替换功能。devServer 默认行为是在发现...

2021-02-16 17:56:37 1304

转载 【前端词典】这些功能其实不需要 JS,CSS 就能搞定

今天我们大家介绍一些可能你乍一眼以为一定需要 JavaScript 才能完成的功能,其实 CSS 就能完成,甚至更加简单。1.每个单词的首字母大写其实我第一次看到这个功能的时候,就是使用 JS 去实现这个功能,想都没有想 CSS 可以完成这个功能。方法如下:funtion capitalizeFirst(str) { let result = '' result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpper

2021-02-16 16:50:01 95

转载 异步迭代器 for await of

for of方法能够遍历具有Symbol.iterator接口的同步迭代器数据,但是不能遍历异步迭代器。ES9新增的for await of可以用来遍历具有Symbol.asyncIterator方法的数据结构,也就是异步迭代器,且会等待前一个成员的状态改变后才会遍历到下一个成员,相当于async函数内部的await。现在我们有三个异步任务,想要实现依次输出结果,该如何实现呢?// for ...

2021-02-16 16:16:11 248

转载 路由和菜单 - Vue 动态权限路由实现菜单列表之进阶版

路由和菜单是组织起一个应用的关键骨架,为了方便管理,使用了中心化的方式,在 router.config.js统一配置和管理。基本结构在这一部分,脚手架通过结合一些配置文件、基本算法及工具函数,搭建好了路由和菜单的基本框架,主要涉及以下几个模块/功能:路由管理 通过约定的语法根据在 router.config.js 中配置路由。 菜单生成 根据路由配置来生成菜单。菜单项名称,嵌套路径与路由高度耦合。 面包屑 组件 PageHeader 中内置的面包屑也可由脚手架提供的配置信息自动生成。下面简

2021-02-16 15:09:54 944 2

原创 git 常用命令

一、创建版本库1.git clone <url> :克隆远程版本库2.git init:初始化本地版本库二、修改和提交1.git status:查看状态2.git diff:查看变更内容3.git add .:跟踪所有改动过的内容4.git add <file>:跟踪指定的文件5.git my <old> <new>:修改文件名6.gut rm <file>:删除文件7.git rm -cached <

2021-02-16 14:42:30 72

原创 使用 async-validator 自定义校验规则实现 table 组件的循环表单校验功能

const validators = []async validate () { try { await Promise.all([...validators.map(vm => vm.validate())]) return true } catch (err) { return false }}import Reg from '@/utils/utils-libs/validator.js...

2021-02-09 17:11:06 2175

原创 ant-design-vue 表单验证和 validator 自定义表单验证

在ant-design-vue中,提供FormModel表单组件,且支持v-model数据绑定,同时可以校验和提交功能的表单。一、表单验证<a-form-model ref="form" :rules="rules" :model="form" layout="inline" :label-col="{span: 10}" :wrapper-col="{span: 14}"> <a-form-model-item label="密...

2021-02-09 11:56:41 13357 2

原创 element-ui table 默认选中

getInit(){constunwatcher=this.$watch('baseForm',function(val){if(val.tableData.length){val.tableData.forEach(item=>{this.$nextTick(()=>{this.$refs.signTable.toggleRowSelection(...

2021-02-09 11:35:37 818

echarts legend 排列问题

legend 图例组件可以分组展示。详细说明:https://blog.csdn.net/qq_36437172/article/details/106125254

2020-05-14

echarts 路径图

路径图:用于带有起点和重点信息的线数据的绘制,主要用于地图上的航班,路线的可视化。支持二维的直角坐标系和地理坐标系。详细介绍:https://blog.csdn.net/qq_36437172/article/details/106123884

2020-05-14

echarts 地图类型热力图

根据地理区域数据的可视化,除了在地图上添加散点之外,我们也可以制作地图类型的热力图,详细介绍:https://blog.csdn.net/qq_36437172/article/details/106121650

2020-05-14

echarts 柱状图渐变色背景

该案例设置 echarts 柱状图渐变色,同样也可以应用折线图、圆形图等。效果说明:https://blog.csdn.net/qq_36437172/article/details/106115048

2020-05-14

echarts 地图上如何打点

除了  scatter (散点图) 在地图上标记的方式之外,我们也可以使用 markPoint 图表标注的方式在地图上标记.

2020-05-13

echarts 设置地图外边框、地图背景渐变以及在地图上打点.js

主要配置 echart 中 地图的外边框和地图整体背景颜色渐变以及在对应的地图上做标记等功能。详细效果图:https://blog.csdn.net/qq_36437172/article/details/106099547

2020-05-13

echarts 图表加水平直线或者标准线.js

echarts 图表加水平直线或者标准线。添加标准线上的折线一种颜色,标准线下的折线又是一种颜色来区分标准线以上或者以下的数据。

2020-05-04

axios 常用配置以及请求方法封装

使用 axios 的基本配置(axios.create()、baseURL、拦截器)和 post、get、download、upload 等方法的封装。

2019-10-13

基于 echarts 第三方库制作地图信息

使用 echarts 第三库,开发地图组件信息,掌握 registerMap、geo 组件、visualMap 视觉映射组件等组件的配置信息

2019-10-05

choose_goods.html

CSS 实现勾选商品规格:颜色、版本等参数样式,采用 input 标签 type=radio 实现单选功能。

2019-08-30

基于element-ui 使用 upload 预览图片 (含删除功能)

基于element-ui 使用 upload 预览图片 (含删除功能)参考链接:https://blog.csdn.net/qq_36437172/article/details/100034867

2019-08-23

vue 上传图片进行裁剪(VueCropper)

使用 VueCropper 第三方库,对上传的图片进行移动,缩放,裁剪等功能。

2019-04-18

微信小程序 swiper 组件实现层叠轮播图,同时在轮播图中自定义信息

微信小程序 swiper 组件实现层叠轮播图,同时自定义指示点样式和图片描述信息

2019-03-24

vue 封装的 echarts 组件

vue 封装的 echarts 组件,主要传递四个参数到组件中,title、legend、series、xAxis,分别表示文章标题、区域名称、区域数据以及X轴坐标。组件被同一个页面多次调用,数据被覆盖问题解决办法。

2019-03-05

空空如也

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

TA关注的人

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