- 博客(37)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 【Echarts折线图拐点拖拽功能实现+解决datazoom设置startValue,endValue引发的拖拽点位置不对问题】
拖拽功能根据官方例子比较简单，但是根据一般需求需要限制拖拽只能沿着Y轴拖拽，这个时候应该怎么办呢？本案例使用的是vue-echarts（Apache ECharts component for Vue.js.）</核心部分：1.通过echarts的graphic组件实现拖拽2.通过dataZoom事件更新startValue,endValue，解决datazoom设置startValue,endValue引发的拖拽点位置不对问题。
2023-07-25 14:58:45
1754
原创 解决上层div遮挡下层div时无法触发click,hover等事件的问题
（也就是上面图中的leftAngel和rightAngel俩个元素）设置pointer-events: none;时，就可以触发底层元素的click,hover等事件了。比如这个自定义的漏斗组件，当我们想要为展示不开的数据增加tip提示时发现，下面的元素被上层元素遮挡，导致事件无法透传。
2023-01-17 15:58:16
2819
原创 Vue文本内容单行或多行超出显示省略号判断，超出显示tooltip提示
Vue文本内容单行或多行超出显示省略号判断，超出显示tooltip提示
2022-08-12 18:25:59
7736
1
转载 es6解构赋值学习总结之函数参数的默认值（建议大家多读阮一峰老师的es6入门）
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2。1.当调用具有默认参数的函数时，调用时如果传入参数会覆盖在函数定义时的右侧表达式，然后通过解构赋值的形式替换默认参数。在给函数赋值默认的对象参数时，如果不提供赋值={}的操作，当我们调用foo()无参函数时，则会报错。当使用剩余参数时，注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。的原因，这行代码会报错。.
2022-08-10 18:52:24
877
原创 ios 上传formdata兼容性问题处理总结
这样在ios中newFormData()得到的对象就是和其他系统一致了。ios系统上的formdata对象是。导致在上传时后端无法识别。
2022-07-21 18:12:13
2266
原创 常见图片上传（根据arrarbuffer转base64,根据图片url转blob或formdata)学习总结之地球是个圆url-＞blob-＞formdata-＞Arraybuffer-＞base64
常见图片上传（根据arrarbuffer转base64,根据图片url转blob或formdata)学习总结之地球是个圆url->blob->formdata->Arraybuffer->base64
2022-07-14 18:45:43
384
原创 Vue3响应式原理ref及reactive实现原理浅析
源码搜索发现：执行顺序：ref()=>createRef()=>new RefImpl()同时通过源码查看发现RefImpl类中的set方法会判断如果是包裹对象的话，会将ref({})中的对象通过reactive包裹起来。
2022-06-13 15:24:51
1115
1
原创 checkbox这类组件的通过伪元素实现自定义图标
你还在为checkbox这类组件的勾选样式不符合ui设计而苦脑吗？下面手摸手教你修改三方组件的样式通过调试发现其实就是通过伪元素实现的加载对应的字体图标:deep(.nut-checkbox__icon)::before { width: 18px; height: 18px; content: ''; background: url('../../../../../../assets/icons/select_all.png') no-repeat 0 0; backgrou.
2022-05-30 18:08:14
531
原创 关于nut-datapicker组件无法通过teleport改变的解决方案
之前提到过vue中更改挂载点使用Teleport组件可以说是相当的人性在使用nut-datapicker时发现不生效mmp <!-- 日期选择弹窗 --> <div id="datepicker"></div> <div v-if="state.showDatepicker"> <teleport to="#datepicker"> <nut-datepicker ref="datepic.
2022-05-27 15:39:55
647
原创 三方组件tabpane不能自适应高度的解决方案（element ivew nut-ui）应该都可以
tabs选项卡tabpane 解决高度自适应问题
2022-05-26 17:21:33
1342
原创 vue3 provide inject 添加响应性
众所周知：vue 在提供provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。处理响应性vue2中可以使用computed来实现响应式app.component('todo-list', { // ... provide() { return { todoLength: Vue.computed(() =.
2022-05-20 18:04:04
5460
1
原创 vue3 使用第三方组件样式无法修改成功的解决方案
问题描述：在Vue组件中，若在style标签上添加scoped属性，则表明style标签中的样式只作用于此Vue组件，这样可以避免样式的全局污染。开发过程中，修改第三方组件样式时会碰到scoped中进行样式穿透后样式不生效的问题。无效写法： <div id="mydialog"> <nut-dialog :close-on-click-overlay="true" content="您修改后的报价还未保存，是否保存后退出？" .
2022-05-16 11:23:36
2087
原创 你还只会用元素来写必填标识吗？
// 必填标识样式.formItem-required::before { content: '*'; display: inline-flex; align-items: center; height: inherit; margin-right: 0.2rem; color: red;}
2022-03-11 15:28:50
169
原创 远程搜索多选组件实现
效果展示页面部分<div class="m-section__content"> <div id="dropdown" class="m-dropdown m-dropdown--inline m-dropdown--arrow posi_re" data-dropdown-toggle="click" data-dropdown-persistent="true" aria-expanded="true"> <input type="text" re
2022-03-09 16:27:44
350
原创 原生table实现thead固定，tbody高度超出时滚动的实现方法
<div class="table-wrapper"> <table cellpadding="0" cellspacing="0"> <thead> <th >序号</th> <th *ngFor="let item of columns; let i = index">{{item.title}}</th> <.
2022-03-09 16:23:49
851
原创 webpack构建流程
webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来从启动到结束会依次执行以下三大步骤：1.初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数2.编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理3.输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文
2022-03-08 16:25:43
1772
原创 angular框架中提取公共服务及公用方法的实现
公共服务的提取ListServiceInit 服务类：可以通过Injector来检索出全局注册的服务import { ChangeDetectorRef, Injector } from "@angular/core";import { LoggerFactory } from "app/core/logger-factory.service";import { Logger } from "app/core/logger.service";import { BsModalService }
2022-03-03 09:39:04
927
原创 vue-cli2脚手架项目wepack配置关系梳理
一般的目录结构如下：基本运行流程build目录：主要是用于存放webpack配置相关的文件config目录：主要存放项目中本地，测试，预发布，正式的相关环境变量具体流程：1.在项目的packcage.json文件中配置运行脚本运行npm run dev即运行属性值对应的命令webpack-dev-server --inline --progress --config build/webpack.dev.conf.js运行npm run buildProd时执行node bui
2022-02-28 15:40:38
329
翻译 js new操作符的实现过程
一.在JavaScript中，new操作符用于创建一个给定构造函数的实例对象例子function Person(name, age){ this.name = name; this.age = age;}Person.prototype.sayName = function () { console.log(this.name)}const person = new Person('Tom', 20)console.log(person) // Person {n.
2022-01-24 14:58:22
1004
原创 树形结构修改属性名（正则实现）
DistrictCityTree_YH().then((res) => { const reg = new RegExp('regionName', 'g'); //异步获取数据后，转为json字符串进行全局替换 let dictionary_YH = JSON.stringify(res).replace(reg, 'label');});效果展示转换前：转换后：...
2022-01-06 17:04:16
745
原创 手摸手和你说iview，element等组件增加自定义参数的方法（天真的以为是自定义事件，实则是回调函数 我潮了）
文档写明是props属性，很多人可能会下意识的认为是自定义事件:before-upload=“beforeUpload($event,‘123’)”，其实是通过props传递回调函数实现的，如下获取函数后在传参到新的函数就可以实现自定义增加参数的功能了 <Upload ref="upload" :on-success="uploadSuccess" :headers="uploadHeaders" :show-upload-list="false".
2021-12-29 15:16:35
470
原创 vue 使用自定义指令添加滚动加载功能（以iview下拉组件为例(组件自带远程搜索功能)，其他组件同上）
* 页面需要三个参数： * option：远程搜索返回的数据 * count：所有数据总条数 * pageindex：当前页码 * query：远程搜索查询条件 * */<FormItem label="车务通客户"> <Select ref="select" v-model="formValidate.customers" v-scroll="getCustomers" multiple .
2021-12-24 11:41:58
690
原创 js基础语法细节
如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。 isNaN函数会首先尝试将这个参数转换为数值，然后才会对转换后的结果是否是NaN进行判断。test('isNaN()', () => { expect(isNaN('Hello')).toBe(true); expect(isNaN([123])).toBe(false);})Number.isNaN() 方法确定传递的值是否为 NaN，并且检查其类型是否为 Numbe
2021-12-23 15:38:12
267
原创 js实现ts中省略参数功能
//利用变量解构赋值实现export default class Parameter { /** * @param() '{ pageIndex = 1, pageSize = 2, rules = [], sortConditions = [] }' */ constructor({ pageIndex = 1, pageSize = 2, rules = [], sortConditions = [] }) { this.pageCondition
2021-12-10 15:44:10
889
原创 js树形结构根据对应节点属性获取改节点并且返回所有直系父辈实现
实现思路：深层递归循环 { this.$refs['card'].$el.style.height = document.body.clientHeight - 104 + 'px';
2021-11-12 13:38:50
1180
原创 iview tab组件标题自定义
iview tab组件：<Tabs v-model="selectedTab" type="card"> <TabPane v-for="item in materialTypeList" :key="item.Id" :label="setTabPaneLabel(item.Name)" :name="item.Name" > </TabPane></Tabs>
2021-11-09 16:40:22
486
原创 element 级联多选控制省市区单独展示
实现效果数据结构代码部分选择上一级禁选下一级，同时改变展示区域的tag <el-cascader v-model="formValidate.regions" :props="props2" :options="options" clearable :class="isError ? 'isError' : ''" @change="handleChangeM" ></el-casc
2021-11-09 16:20:30
532
原创 js上传文件转二进制格式
html部分 <Upload ref="upload" :on-success="uploadSuccess" :headers="uploadHeaders" :show-upload-list="false" :action="actionUrl" :max-size="2048" :accept="accept" :format="format" :on-format-err
2021-11-09 14:28:07
7383
2
原创 js数组对象之多条件去重赋值
js数组对象之多条件去重，借助冒泡排序思想应用场景：当需要根据多个条件进行数组去重并且将某些属性进行赋值时。for (let i = 0; i < this.businessPolicyFiles.length - 1; i++) { for (let j = i + 1; j < this.businessPolicyFiles.length; j++) { if (this.businessPolicyFiles[i].policyFileType === this.busine
2021-09-15 17:37:06
862
原创 js之数组动态条件排序
数组动态多条件排序代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style> </style></head><body> <script> let jsonStudents = [ { name: "Dawson", to
2021-09-14 15:27:11
237
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人