- 博客(37)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 使用jsMind实现可拖拽思维导图
1.安装依赖：npm install vue-jsmind2.在main.js中引入：import jm from 'vue-jsmind'Vue.use(jm)if (window.jsMind) { Vue.prototype.jsMind = window.jsMind}3.拖拽完成时间需要引入文件jsmindDrag.js，下载地址：https://download.youkuaiyun.com/download/qq_40364610/852185574.数据格式：{ "
2022-04-25 11:08:57
4617
2
原创 el-table增加顶部滚动条，表格实现上下双滚动条
效果图：实现方式：1.加一个div,宽度和表格相同：2.监听表格宽度，并给元素和滚动条元素绑定滚动事件：原理：两个滚动条滚动时，同时控制另一个滚动条滚动。tableWidth: { handler(newVal, oldVal) { // 监听滚动条 setTimeout(() => { this.tableDom = this.$refs.tableRef.bodyWrapper this.tableDom.addEventListener(
2021-06-17 13:46:21
4039
3
原创 vue实现点击按钮滚动页面到指定位置
方法：将要滚动的指定位置div最外层大盒子进行命名，如图：<template> <el-tooltip class="item" effect="dark" content="图表" placement="right"> <el-button type="primary" size="mini" @click="handleToChart" plain> <svg-icon icon-class="icon-chart" class="icon
2021-04-12 17:39:03
3567
4
原创 vue监听节流处理
场景：关键字搜索查询数据，当搜索关键字一直处于点击加载，会重复追加数据的问题：解决方案：使用setTimeout进行节流处理：watch: { // 输入过滤条件的监听 chooseCondition: { handler(val, oldVal) { if(val.length > 0 && val.trim() == '' && oldVal.trim() == '') { } else { clear
2021-04-12 11:52:10
495
原创 el-form自定义验证
el-form表达中自定义验证，主要是在rules中使用validator声明自定义验证，并在data中进行写逻辑。例子。js代码如下：data() { // 自定义验证 const validTrim = (rule, value, callback) => { if (!value.trim()) { callback(new Error('请输入名称')) } else { callback() }
2021-01-21 08:52:59
1048
原创 mui实现移动端扫一扫功能
在实现扫一扫功能时，由于第一次接触，因此在找方案时花费了大量的时间，找的方案兼容性都不太行，后来突然想到之前有一个项目是用到了mui框架，当时有印象说这个框架能够调用底层原生的功能，因此抱着试试的态度使用了mui来实现扫一扫的功能，没想到真的是可以使用。提示：mui的项目功能测试运行不可以直接在浏览器的移动端模式，必须使用手机进行联调，我当时是在Hbuilder开发工具使用手机联调模式测试的。至于这个方案是否兼容IOS，目前还没试过功能完整代码：mui包我没找到在哪上传，大家可以自行下.
2021-01-14 17:31:41
1132
1
原创 左侧导航点击滑动效果
最主要的是transition: transform .3s cubic-bezier(.645,.045,.355,1);，让切换tab有一个滑动的动画效果，完整组件代码：<template> <div class="module_box"> <div class="module_title"> <img src="../../../assets/img/analysis/icon-analysis.png" width="30"/>
2021-01-14 16:55:48
303
原创 el-table使用递归组件实现多级表头
<el-table ref="multipleTable" :data="tableData" max-height="430" style="width: 100%"> <el-table-column prop="schoolName" label="学科" align="center" :min-width="firstColumnWidth" fixed> <template slot="header" slot-scope="
2021-01-14 14:38:36
2057
4
原创 el-table fixed滚动条有缝隙
.el-table__fixed, .el-table__fixed-right { height: 100%!important;}
2020-12-16 18:59:09
1035
原创 el-table使用fixed错位问题
解决方案：/*解决表格fixed错位问题*/ .el-table{ overflow: auto; } .el-table__header-wrapper,.el-table__body-wrapper,.el-table__footer-wrapper{overflow:visible;} .el-table__body-wrapper{ overflow-x:visible !important; } /* 这个是为了解决前面样式覆盖之后伪类带出来的竖线 */
2020-11-10 11:18:24
2618
原创 js和vue计算DOM元素距离底部的距离
js参考地址当前元素与底部的距离 = 可视区窗口高度 + 文档滚动高度 - 当前元素与页面顶部距离 - 当前元素高度vue:window.innerHeight - e.target.getBoundingClientRect().y -e.target.getBoundingClientRect().heighte是当前元素参数$event参考地址...
2020-09-29 16:12:39
9554
原创 手动导出Echarts图表（兼容IE）
// 导出图表功能 handleExport(index) { let canvasImg = '' let imgName = '' canvasImg = document.getElementById("scatterEchart").getElementsByTagName("canvas")[0] let image = canvasImg.toDataURL("image/png") let $a = document.crea
2020-09-29 13:50:12
327
原创 Echart图表响应式
window.addEventListener('resize', ()=> { this.$echarts.init(document.getElementById('radarChart')).resize()})
2020-09-29 13:47:47
249
原创 vue动态更新Echart图表，数据改变，视图不更新问题
let brokenLineEchart= this.$echarts.init(document.getElementById("scatterEchart"));brokenLineEchart.setOption({ backgroundColor: '#ffffff', grid: { //Echarts组件 离容器的距离 left: '5%', right: '2%', top: 80, bottom: '100', containLabel: t
2020-09-29 13:46:14
2561
原创 el-table动态渲染不换行
<el-table-column prop="schoolName" label="教师名" :min-width="firstColumnWidth" fixed> <template slot="header" slot-scope="scope"> {{firstColumn(scope)}} </template></el-table-column><el-table-column v-for="(item
2020-09-29 11:59:42
693
2
原创 vue模块化创建指令directive实现el-select加载更多
1.在until下面创建directive.js文件注册 el-select-loadmore指令：import Vue from 'vue'// select懒加载(分页)指令const selectLoadMore = Vue.directive('el-select-loadmore',{ bind(el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el
2020-09-29 11:47:40
443
原创 vue项目不支持IE
vue项目在IE浏览器运行报错：[vuex] vuex requires a Promise polyfill in this browser.解决方案：第一步：npm install babel-polyfill --save第二步：在main.ts中 import “babel-polyfill”：大写的警告：此处引入一定要引入到vue前面，否则无效，如图：...
2020-08-25 19:52:15
243
原创 treeselect使用
引入：import Treeselect from '@riophae/vue-treeselect'import '@riophae/vue-treeselect/dist/vue-treeselect.css'注册组件：components: {Treeselect},data() { return { normalizer(node) { // 去掉children=[]的children属性 respectively if (node.chi
2020-07-22 16:22:33
1669
原创 滴滴面试题
一.首先，面试官问，下面代码的输出结果for(var i=0; i<5; i++) { setTimeout(function () { console.log(i) })}输出结果：5 5 5 5 5原因是setTimeout为异步操作，每次循环都会将setTimeout放到任务队列中，当执行完所有for中的代码才会执行任务队列中的任务，而此时i=5。然后，紧接着面试官会问怎么才能输出0 1 2 3 4，在这里我介绍两种方法分别是：第一种，将var改为let,因为let：f
2020-07-07 15:04:40
492
原创 treeselect组件处理children=[]的情况
<treeselect :options="gridArr" v-model="form.gid" :disable-branch-nodes="true" :normalizer="normalizer" @select="onClickGid" placeholder="请选择最小单元" noOptionsText="暂无数据" style="width: 270px;"/>关键代码（该部分代码写在data中）：data() { return { normaliz
2020-05-15 15:54:21
1818
原创 Element中el-select在form多数组中的使用
v-bind="{ remoteMethod: remoteMethod.bind(null,index) }"将当前的索引传递到方法中，告诉下面当前要修改的值： <el-select v-model="item.materialCode" filterable remote reserve-keyword no-data-text placeholder="请输入关键词" v-bind="{ remoteMethod: remoteMethod.bind(null,in
2020-05-15 15:48:49
975
原创 vue-treeselect的使用
官方文档：https://www.vue-treeselect.cn/导入引用：import Treeselect from '@riophae/vue-treeselect'import '@riophae/vue-treeselect/dist/vue-treeselect.css'注冊:components: { Treeselect },html代码：<el-form-...
2020-04-27 16:20:40
1336
原创 Elemnet中select显示多个值
关键代码： :label="${item.materialCode}-${item.materialName}"<el-select v-model="form.materialCode" filterable remote reserve-keyword no-data-text placeh...
2020-04-27 16:15:22
340
原创 vue中导出和下载文件
html代码：<span @click.stop="downloadFile(item)">下载</span>js代码：import { downloadFile } from '@/utils/index'downloadFile(data) { //请求后台 qualityFile.downloadFile({ fileId: data.file.i...
2020-04-15 17:32:27
1313
原创 element-ui树形图，名字过长滚动条问题
<el-tree ref="tree" v-loading="treeLoading" default-expand-all :expand-on-click-node="false" :data="treeData" :filter-node-method="filterNode" :props="defaultProps" style="margin-to...
2020-04-13 14:00:59
645
原创 element-ui组件中el-date-picker日期插件设置可选日期范围
html部分：<el-date-picker v-else-if="timeType==2" v-model="time" type="month" placeholder="选择年月" value-format="yyyy-MM" :picker-options="pickerOptions1...
2020-04-13 13:37:54
1505
原创 微信小程序canva绘制图片分享朋友圈
1.html部分.canvas-box{ width: 100%; position: fixed; left: 0; top: 999999rpx;}<button class="savesharebtn" open-type="openSetting" bindopensetting="handleSetting" wx:if="{{(!isGroupon) &...
2020-03-27 15:18:05
1294
原创 activeX控件在vue项目和js原生中的使用
1.在js原生中的使用1.1引入activeX控件。代码如下：<object classid="clsid:5C39237F-7BD0-404E-ACAE-AF3C00FFA88A" codebase="UhfAx.CAB#version=1,0,0,1" height="0" id="uhfAx" style="display:none" viewastext width="0">...
2020-03-12 18:05:24
2850
1
原创 vue+element项目中select下拉框label想要显示多个值
<el-select v-model="form.plantBatchId" collapse-tags filterable placeholder="请选择品种种类" style="width: 270px;"> <el-option v-for="item in plan...
2020-03-09 10:36:49
4773
1
原创 vue项目中遍历form表单验证问题
1.html代码：主要代码是： :prop="children.${index}.metre" :rules=“groupRules.groupMetre”<div v-for="(item,index) in form.children" class="child-list"> <el-form-item label="总长度" :prop="`children.${in...
2020-03-09 10:32:59
1396
原创 vue使用百度地图API通过经纬度定位子公司的分布情况
1.引入百度地图秘钥：<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>2.完整代码：<template> <div ref="map_chart" class="map_chart" /></tem...
2020-03-06 13:40:49
697
原创 vue项目使用高德地图的定位及关键字搜索功能
1.首先在index.html引入高德地图的秘钥。如图：注意：如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch，否则功能无法使用，并会报错2. 定位功能，代码如下：const map = new AMap.Map(this.$refs.container, { resizeEnable: true }...
2020-03-06 13:30:42
5189
10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人