摘要: 在a组件页面内有b组件,b组件产生的滚动条太丑不好看但是又不想改变b组件(b组件公共用的地方很多)又不想专门复制份在此基础上改。 只要在使用的组件上增加css代码即可同时让组件内滚动条生效,原理是因为此滚动条相当于未定义类的当前组件全局。所以可以直接使用并生效 comp.vue <style sco 阅读全文
posted @ 2023-06-14 17:49 少哨兵 阅读(13) 评论(0) 推荐(0) 编辑
摘要: 标题比较绕口,大概意思就是封装一个可拖拽组件,但是因为组件内有文件或者表单或者其它原因而不可在这个区域内使用拖拽,所以在绑定拖拽区域方法的同时限制不可拖拽区域。 实现方式很简单 直接看代码 drag.js import Vue from 'vue' export const drag = Vue.d 阅读全文
posted @ 2023-06-14 16:48 少哨兵 阅读(74) 评论(0) 推荐(0) 编辑
摘要: 首先看一个数据结构: 1:无缺陷 2:有缺陷-》缺陷1,缺陷2,缺陷3 3:审核不通过 把它们集成到一个平面数据,进行下拉所选就变成了: 1:无缺陷,2:审核不通过,3:缺陷一,4:缺陷二,5:缺陷三。 因为字典项是个平面的,所以在类似的大批量的情况下,有缺陷这个类如果还按照这种结构除非自己去归类。 阅读全文
posted @ 2023-05-29 11:25 少哨兵 阅读(339) 评论(0) 推荐(0) 编辑
摘要: 在vue中,通过自定义指令绑定一个拖拽事件,有时候还需要相对应的阻止拖拽事件,为了在可拖拽区块内如果含表单等鼠标操作复制事件而不需要拖拽的某一块时使用。 directives: { /*自定义拖拽*/ dragm: { inserted: function(el, binding, vnode) { 阅读全文
posted @ 2022-10-21 09:40 少哨兵 阅读(140) 评论(0) 推荐(0) 编辑
摘要: vue+echart+自定义指令:自适应图表,图表根据宽高拉伸变化而重置变化。 之前有用到过其它方式实现,现在只用指令来实现: <template> <div class="box"> <div ref="zhex" v-resize="resize" style="width:40%;height 阅读全文
posted @ 2022-09-23 14:20 少哨兵 阅读(169) 评论(0) 推荐(0) 编辑
摘要: 有的项目不允许访问外网,所以有的地图需要验证自己申请好的key就不能用了,要自己用canvas画,这里echart都有现成的,结合echartmap进行配置就行了:整合到vue项目中 需要加载一个china.js文件,如果地图有覆盖物或者需要指定城市坐标,额外引入些经纬度坐标。 index.html 阅读全文
posted @ 2022-05-20 14:12 少哨兵 阅读(142) 评论(0) 推荐(0) 编辑
摘要: 问题是这样的:在表头渲染一个按钮,点击会弹出当前列的搜索框pop,当点击第二列弹出pop时其余已经弹出的也不会消失。 就算绑定了点击此处以外消失的指令也没用: 那么怎么解决呢,通过实现发现,双击的时候是可以的,也就是@dblclick 但是通过点击改成了双击后出现搜索层肯定不理想,还是想通过单机点出 阅读全文
posted @ 2022-05-06 15:00 少哨兵 阅读(1865) 评论(0) 推荐(0) 编辑
摘要: 尤其是地图组件比较庞大,再导入大批量数据最容易造成卡顿的出现。 尤其是渲染次数多,交互多的情况。 所以每次重新加载数据一定要先销毁之前的。 不然越越卡直到卡死 父组件: <div class="mapchart"> <amap :key="mapkey" ref='mymap'></amap> </ 阅读全文
posted @ 2022-05-05 17:39 少哨兵 阅读(869) 评论(0) 推荐(0) 编辑
摘要: 需求是当点击区间开始时间后只能选择之后的七天(或其它自定义时间)内的时间,记住,不是当前后的时间 而是点击开始时间后的区间限制,超出这个区间都点不了。 这里直接配置再data的option内 <el-date-picker style="width: 240px" v-model="timerran 阅读全文
posted @ 2022-04-27 14:45 少哨兵 阅读(195) 评论(0) 推荐(0) 编辑
摘要: 主要需要设置 dataZoom start: 1, end: 50 滚动条显示的固定位置, width:4,滚动条调整宽度 id: 'dataZoomY', 如果是条形图需要设置此项 如果是x轴的柱状图设置; id: 'dataZoomX', dataZoom: [ // { // id: 'dat 阅读全文
posted @ 2022-04-14 14:39 少哨兵 阅读(1636) 评论(0) 推荐(0) 编辑