- 博客(53)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 uniapp中上传图片
uniapp上传图片一、使用ColorUI二、上传图片1、html代码片段2、methods中代码片段:2.1 选择图片2.2 上传图片传递 formdata 格式的图片数据到后台2.3 预览图片2.4 取消上传 删除图片一、使用ColorUI在uniapp项目中使用了ColorUI的一些样式，所以就在这里再记录一下使用方法uniapp项目中引入ColorUI ：参考链接ColorUI文档colorui 下载连接大致流程：先去官网下载colorui压缩包，解压到本地将里面的c
2021-08-24 17:27:39
5458
2
原创 vue项目上传github后GitHub Pages地址访问空白
vue项目上传github后GitHub Pages地址访问空白原因一可能是没有上传dist文件解决办法原因二路径配置不对解决办法原因一可能是没有上传dist文件解决办法1、在项目中执行 npm run build 将vue项目打包2、在.gitignore文件中删除掉 /dist/，就是允许上传dist文件（.gitignore中的文件都是默认上传到远程仓库的）3、然后直接push 就可以将dist文件一起上传了4、最后在生成的GitHub Pages地址后面拼接上dist下面的in
2021-05-01 12:48:29
1436
原创 vue项目部署到github并生成可访问地址
vue项目部署到github并生成可访问地址先在github上面创建自己的仓库上传本地项目代码到远程仓库生成github page地址先在github上面创建自己的仓库整个创建步骤如下：1、选择到自己的仓库页面下2、点击按钮新建仓库3、创建仓库步骤如下4、创建完成后页面如下：上传本地项目代码到远程仓库1、自己要先安装好git，可以去官网上面根据安装步骤安装好2、在要上传代码的本地项目文件中，鼠标右键点击Git Bash Hhere3、执行 git init 命令 ，文件中会生成一
2021-05-01 12:31:15
594
1
原创 v-chart柱状图点击改变颜色
ve-histogram点击时修改颜色完整代码展示效果完整代码<template> <ve-histogram ref="chart_histogram" height="380px" style="margin-top:50px" :width='chartWidth' :data="chartData" :setting
2021-04-13 12:10:33
1024
原创 解决el-table大数据表格卡顿问题
解决el-table大数据表格卡顿问题使用umyui中的表格组件使用umyui中的ux-grid树表格使用umyui中的表格组件umyui官网当u-table元素中注入data对象数组后，添加use-virtual属性开启虚拟，同时设置row-height行高(它有默认值，请看文档)，同时必须给定height，或者max-height。使用umyui中的ux-grid树表格api与elment-ui中表格的api使用方法差不多...
2021-03-18 13:35:26
3419
转载 vxe-table列宽、错位问题解决
vxe-table列宽、错位问题解决问题解决方法1解决方法2问题在项目中切换标签页时，vxe-table不能自适应页面宽度，设置了最小宽度就只能安最小宽度显示表格，不能自适应显示解决方法11、vxe-table中添加属性：:auto-resize="true" 就可以自动重新计算表格，默认是关闭的<vxe-table auto-resize ... ></vxe-table>解决方法22、使用手动调用 recalculate 方法去重新计算表格使用了k
2021-02-26 15:28:07
8528
原创 vxe-table行列计算
vxe-table行列计算vxe-table文档实现功能实现效果图完整代码vxe-table文档vxe-table文档实现功能根据树状结构数据，在vxe-table可编辑表格表格中实现如下功能：每一行的第一列数据等于当前行数据的和；父类的每一列数据等于子类每一项相加；自定义计算的单元格禁用，其余单元格可编辑数据。实现效果图完整代码<template> <!-- activeCellMethod: 判断单元格是否禁用 --> <vxe-table
2021-02-03 17:27:50
1923
原创 vue实现返回页面时回到原来的位置
使用vue中的导航守卫 beforeRouteEnter 与 beforeRouteLeave beforeRouteEnter(to, from, next) { next(vm => { // 回到原来的位置 const position = JSON.parse(window.sessionStorage.getItem('position')) document.querySelector('.list-row').scrollTop =
2021-01-12 16:51:25
2540
原创 v-charts环图点击事件
v-charts环图自定义点击事件突出显示多块需求完整代码效果展示v-charts需求环图展示统计的数据，默认展示的块需要突出高亮显示，点击某个条件块时，若是突出显示的则取消突出显示，不是突出显示的则高亮突出显示，并根据点击的条件去后台查询数据。完整代码<template> <div class="content"> <div class="top-content"> <div class="chartBox">
2020-12-21 22:33:48
3682
3
原创 表格转图片下载
vue页面下将带有二维码的表格转成图片并下载1、生成二维码2、将html转为图片并下载3、完整代码4、完成效果要求将带有二维码的表格转为图片格式下载下来使用dom-to-image将html转为图片，详细使用方法见官方文档：dom-to-image1、生成二维码这里我是使用QRCode 、html2canvas 插件来生成的二维码前面有写一篇文章比较详细的介绍了二维码的生成，这里的代码基本上和之前是一样的// 二维码import QRCode from 'qrcode'import htm
2020-12-21 21:35:00
331
原创 v-charts环图不显示问题
解决v-charts环图不显示问题在vue项目中使用vant组件和v-charts组件来实现滑动展示两个不同的环图，开始的时候环图一直显示不出来，解决办法： created() { this.$nextTick(() => { // 解决v-charts不显示问题 // 调用以下的方法实现环图重新渲染 this.$refs.chart_one.echarts.resize() this.$refs.chart_two.echarts.re
2020-12-16 21:51:05
1681
原创 mt-cell-swipe的使用
mt-cell-swipe的使用安装使用示例1：content 使用纯文本方式（官网示例）示例2：content 使用HTML方式（开发中使用）content 使用HTML方式显示mint ui 文档安装npm i mint-ui -S使用采用按需引入：import { CellSwipe } from 'mint-ui';Vue.component(CellSwipe.name, CellSwipe);示例1：content 使用纯文本方式（官网示例）增加右滑动按钮<mt-
2020-12-15 22:28:30
604
原创 tree-select使用
tree-select使用安装基本使用在vxe-table中使用官方文档安装npm install --save @riophae/vue-treeselect基本使用在vue中的使用：<!-- Vue SFC --><template> <div> <treeselect :multiple="true" :options="options" placeholder="Select your favourite(s).
2020-12-15 21:46:13
3261
8
原创 在前端生成二维码下载
前端生成二维码并下载完整代码完整代码<template> <div class="ypl-flex"> <div class="invitePosterPage flex"> <button @click="downLoad">下载二维码</button> <img v-if="posterDataUrl" :src="posterDataUrl" class="poster-bg" alt=
2020-11-16 13:02:20
348
原创 v-charts中柱状图和环图的使用
v-charts柱状图使用、环图监听点击事件及监听点击事件v-charts中柱状图和环图的使用v-charts的使用安装引入柱状图、环图柱状图的使用环图的使用环形图效果v-charts中柱状图和环图的使用v-charts的使用安装npm i v-charts echarts -S引入柱状图、环图main.js中引入// 柱状图import VeHistogram from 'v-charts/lib/histogram.common'//饼图import VeRing from 'v-
2020-11-03 17:39:36
2764
1
原创 v-charts柱状图使用
v-charts柱状图使用效果图按需引入柱状图使用柱状图效果图按需引入柱状图import Vue from 'vue'// 柱状图import VeHistogram from 'v-charts/lib/histogram.common'Vue.component(VeHistogram.name, VeHistogram)使用柱状图<template> <div class="contents"> <div class="chartBox"&
2020-10-09 19:29:40
4432
原创 Hbuild中App打包发布
Hbuild中uni-app代码打包发布成App点击文件：出现如下配置内容：配置完成后，开始打包：点击发行，然后选择 原生App-云打包，会出来以下页面：以上是我打包的测试版本，就选择了公用证书，然后直接点击打包即可。打包完成后会返回一个App的下载连接地址，也可以通过二维码生成器将连接地址生成一个二维码，让别人扫我们的二维码就可以下载了。...
2020-09-29 23:25:09
827
原创 uni-app蓝牙开发流程
1、openBluetoothAdapter首先要初始化蓝牙模块openBluetoothAdapter，即查看蓝牙是否可用，若初始化失败，则是蓝牙未打开，提示用户打开蓝牙。若已经打开蓝牙，则准备进行蓝牙搜索。2、搜索蓝牙startBluetoothDevicesDiscovery 和关闭蓝牙stopBluetoothDevicesDiscovery搜索蓝牙startBluetoothDevicesDiscovery，执行搜索方法，开始搜索蓝牙设备。这一步需要和关闭搜索蓝牙stopBluetoo
2020-09-29 22:54:52
3500
原创 get方法传递数组参数
url传值 参数拼接url如果使用get方式传递数组，只需传入多个同名参数即可eg：https://test.net/do.action?list=val1&list=val2&list=val3此时list在后台即可使用数组方式接收
2020-09-29 22:49:32
4303
原创 防抖与节流
防抖与节流防抖与节流的深入理解在vue中使用防抖函数防抖与节流的深入理解1. 防抖持续触发不执行不触发的一段时间之后再执行函数防抖，这里的抖动就是执行的意思。即持续触发一个事件，不是一直去执行函数，而是等最后一次触发结束后，过一段时间，再去执行函数。应用场景：根据输入框内容去查询数据函数实现：function debounce(func, delay) { let timeout return function() { clearTimeout(timeout) // 如
2020-09-29 22:47:26
118
原创 动态切换样式
前端实现标签默认全选与点击标签选中切换html代码JavaScript代码样式代码整体展示效果图html代码 <div class="filterBox"> <div class="filterTitle"> 请选择 </div> <div class="filterContent"> <span v-for="(item,index) in company
2020-09-23 20:56:03
980
原创 前端获取当前地址
1、利用HTML5 地理定位 获取当前位置经纬度navigator.geolocation.getCurrentPosition(success,error)getCurrentPosition() 方法的第一个参数用于处理成功返回的数据。它规定当获取用户位置成功时运行的函数；getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数2、利用百度地图中的api将经纬度转换成地址名称引入百度地图使用HTML5获取到当前位置经纬度调用百度地图
2020-08-04 22:14:46
2286
原创 vue封装数据加载组件
根据输入内容，去后台查询相关数据，每次返回20条数据，滑动到底部时增加索引（即页数）再去后台查询数据，将返回数据拼接在原数组后面。1、封装组件<template> <!-- 搜索组件 --> <div > <!-- 这里使用的是mint ui里面的表单组件，也可以改成element ui的输入框组件或者表单组件 --> <mt-field v-model="name" :disabled="disabled" :label="
2020-07-21 21:22:45
556
原创 调用高德地图和百度地图
1、h5调用高德、百度地图App//高德地图 百度地图 使用a标签跳转<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a><a href="http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content=所在位置的简介（可选）&output=html">百度
2020-07-13 22:21:10
1605
原创 前端实现点击拨号、下载文件功能
1、在js中创建a标签实现报号功能点击电话图标跳转到手机拨号页面实现拨号功能的a标签写法：<a href="tel:13764567708"/> js 中实现拨号功能方法： // 拨号 传入需要拨打的电话号码 dial(phoneNum) { const a = document.createElement('a') a.setAttribute('href', '')// href链接 a.setAttribute('targe
2020-06-30 22:35:01
342
原创 鼠标样式设置
1、cursor语法- cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)常用cursor光标说明1）、div{ cursor:default }默认正常鼠标指针2）、div{ cursor:h
2020-06-22 17:25:05
219
原创 纯前端导入excel表格数据
安装插件 js-xlsxnpm install xlsx --savejs-xlsx使用js-xlsx时，前端可以将后端返回的json数据拼接成自己需要导出的格式，下载到电脑中，完全不依赖后端。导入只需像平时一样选择文件，然后解析excel表格数据，转换成json格式。<template><div class="index" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中..."
2020-06-18 20:51:12
1812
2
原创 前端导出多级表头excel
1、安装插件npm install xlsx --savenpm install file-saver --save2、使用Export2Excel.js 文件中：/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) { var out = []; var rows = table.querySelectorAl
2020-06-18 09:20:32
2249
原创 pl-table大数据表格
pl-table是基于element ui的一个大数据表格插件，在el-tabled的功能上增加了一些功能。由于做vue前端项目页面性能优化时，需要优化表格数据太多页面卡顿的问题，发现了这个好用的插件，下面附上表格地址链接： pl-table pl-table导出数据插件还没有进行深入开发使用pl-table，等后续更新具体用法再附上代码。……...
2020-06-12 17:21:41
11111
2
原创 offsetWidth clientHeight的理解及使用
原文： https://www.cnblogs.com/ifworld/p/7605954.html offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
2020-06-10 21:24:23
322
原创 值得收藏的开源项目
1、Spring Boot开源前后端分离项目1、美人鱼NiceFish（美人鱼） 是一个系列项目，目标是示范前后端分离的开发模式:前端浏览器、移动端、Electron 环境中的各种开发模式；后端有两个版本：SpringBoot 版本和 SpringCloud 版本，前端有 Angular 、React 以及 Electron 等版本。2、微人事微人事是一个前后端分离的人力资源管理系统，项目采用 SpringBoot + Vue 开发。项目打通了前后端，并且提供了非常详尽的文档，从 Spring Bo
2020-06-04 21:19:51
208
原创 npm命令
zlib: unexpected end of file解决方法运行npm cache clean --force 清空npm缓存即可决这个问题
2020-06-03 22:08:41
187
原创 vue移动端适配方案
一、flexible.jsflexible.js+rem进行移动端适配npm install -gvue-cli vue init webpack my-projectcd my-projectnpm run dev
2020-06-03 10:47:58
822
原创 css实现左右小三角和梯形
需求：根据梯形中显示的左右小三角图标，点击梯形div实现将内容收缩显示的功能，同时切换小三角形状vue template里面的代码 <div class="triangle-btn" @click="showLeftForm=!showLeftForm"> <div class="shape-space"/> <div v-if="!showLeftForm" class="triangle-right"/> &
2020-05-14 21:02:44
704
原创 js截取时间段
需求：后台需要保存一个时间段的值，根据element ui提供的时间段选择组件保存的是一个数组，所以需要前端先装换查字符串，提交给后台，数据在组件回显的时候又需要将其转换数组，所以下面先总结一下数组转字符串和字符串转数组的方法：1、js数组转字符串1、toString()var a = [1,2,3,4,5,6,7,8,9,0]; //定义数组var s = a.toString(); //把数组转换为字符串console.log(s); //返回字符串“1,2,3,4,5,6,7,8,9,0
2020-05-11 14:06:46
1780
原创 表格选择列显示、拖拽排序、导出excel
1、需要提前按照拖动组件// 导出功能import { export_array_to_excel2 } from '@/utils/tableToExcel'export default { methods: { // 公共的导出方法 //第一个参数：所有的表头字段 //第二参数：选择展示的表头字段 //第三参数：表格数据 //第四个参数...
2020-04-26 20:47:13
1057
原创 el-tree的使用
1、要求只展开二级节点，且根据选择的节点id去后台拿数据并展示在表格中，刷新页面，并展开相应的父节点，当页面跳转后，返回当前页面，依然保持在之前选中的节点位置。将多选框设置为单选，根据点击的节点id去后台取数据。具体代码如下：<template> <div class="app-container"> //el-scrollbar 设置滚动条 &l...
2020-04-18 11:23:18
2568
1
原创 vxe-table封装多条件查询组件
1、multiQuery.vue引用了queryButton 组件<template> <div > <div sclass="button-row"> <queryButton @insertEvent="insertEvent" @doSubmit="doSubmit" @reset="reset" @save="openF...
2020-04-17 13:42:39
3042
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人