- 博客(80)
- 收藏
- 关注
原创 js去除字符串中的空格
方法从字符串的两端清除空格,返回一个新的字符串,而不修改原始字符串。此上下文中的空格是指所有的。匹配一个空白字符,包括空格、制表符、换页符和换行符。匹配一个水平制表符,相当于按了一次Tab键。(空格、tab、不换行空格等)以及所有。符(如 LF、CR 等)。1、不处理中间的空格。
2023-04-18 17:40:23
1078
1
原创 element中table多选框的勾选与回显处理
1、通过@selection-change="handleSelectionChange"获取勾选的数据2、通过this.$refs.multipleTable.toggleRowSelection(row, true);将数据回显注意:toggleRowSelection方法的row数据必须是从tableData中获取<template> <div> <el-table ref="multipleTable" :data="tab
2021-12-22 16:01:47
23890
6
原创 vue使用leafLet(绘图工具详解)
安装leafletleaflet.pm绘图工具引入,在项目main.js中import Vue from "vue";import App from "./App.vue";import router from "./router";import store from "./store";// 引入Leaflet对象 挂载到Vue上,便于全局使用,也可以单独页面中单独引用import * as L from "leaflet";import "leaflet/dist/leaflet.
2021-12-06 18:18:36
14814
6
原创 leafLet使用高德、百度、天地图的方式
创建mapProviders.js文件用于leafLet注入天地图等/* eslint-disable */L.TileLayer.ChinaProvider = L.TileLayer.extend({ initialize: function (type, options) { var providers = L.TileLayer.ChinaProvider.providers var parts = type.split('.') var providerNa
2021-12-06 17:28:52
1891
原创 Vue基于Element-ui实现表格弹窗组件
效果图使用方式acTable1 () { this.$modalTable({ title: "表格一", tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
2021-11-04 10:58:56
5195
2
原创 Vue自定义实现Element-ui中Message组件
原文创建message.vue文件首先创建message.vue来规定message组件显示的内容<template> <transition name="message-fade"> <div v-if="visible" :class="wrapClasses"> <img class="message_img" :src="typeImg" /> <span>{
2021-11-03 16:16:12
1355
原创 vue中vuex的使用方法(详解)
文件概要项目地址index.js文件import Vue from 'vue'import Vuex from 'vuex'import moduleA from './modules/moduleA'import moduleB from './modules/moduleB'Vue.use(Vuex)export default new Vuex.Store({ modules: { moduleA, moduleB }, state: { "indexName
2021-10-12 11:21:57
2540
原创 vue项目移动端适配解决方法(最新)
参考文档vant组件库移动适配方案有待验证,看起来比较靠谱vue项目移动端适配解决方法使用 rem 单位进行适配,推荐使用以下两个工具:lib-flexiblepostcss-pxtorem注意:因为lib-flexible主要用于手机自适应,当屏幕尺寸大于540px时,它设置html标签的font-size固定为54px,并不能根据屏幕尺寸调整html标签的font-size的大小,所以如果还想适配电脑端可以修改源码vue项目移动端、pc端适配方案(px转rem)1,安装 lib-fle
2021-09-29 09:35:26
2422
原创 vant 组件库按需引用
文档官网安装vantnpm i vant -S自动按需引入组件 (推荐)babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。1、安装 babel-plugin-importnpm i babel-plugin-import -D2、将 babel.config.js文件修改为module.exports = { presets: [ '@vue/cli-plugin-babel/preset'
2021-09-28 17:40:39
562
原创 element UI 组件库按需引用
文档官网安装ant design of vuenpm i element-ui -S自动按需引入组件 (推荐)借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。1、安装 babel-plugin-componentnpm install babel-plugin-component -D2、将 babel.config.js文件修改为module.exports = { presets: [ '@vue/cli-plug
2021-09-28 16:54:29
165
原创 echarts地图学习(使用geoJson数据绘制地图)
参考文档使用echarts完成中国省市区县镇地图展示echarts地图(中国地图展示各省数据)echarts实现中国地图区域分布图 vue + echarts利用echarts中的map地图中的中国地图,并使中国地图显示效果为轮廓显示到市级级别效果可视化数据大屏echarts地图省份地区绘制并轮播切换地区数据vue使用echarts来绘制中国地图下钻省市区县级地图Echarts地图详解(地图样式、合并地图、增加地图)标题...
2021-09-02 14:53:16
4049
原创 vue-cli3根据不同环境配置打包命令
在vue-cli3的项目中,npm run serve时会把process.env.NODE_ENV设置为development;npm run build 时会把process.env.NODE_ENV设置为production;此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。一、创建环境配置文件1、.env.development文件(开发环境)NODE_ENV=developmentVUE_APP_ENV=development
2021-05-10 16:23:45
607
原创 html之结构详解
概述<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。titletitle 标签定义文档的标题,在所有 HTML/XHTML 文档中都是必需的。<head> <title&g
2021-04-28 15:44:49
219
原创 vue中使用wangeditor富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器先敬上官网wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的功能不是很复杂,那么选它没错了,刚好能满足你!第一步:先保证你的电脑中安装有node,当然使用cdn也可以,下载到本地也行,我这里用的vue-cli,顺便下载到项目依赖中了本地下载:...
2021-01-29 16:54:36
2538
原创 ant design of vue 之富文本编辑组件(腾讯云)封装
最重要的是获取外部图片的url地址,需要将其资源上传到腾讯云,再将腾讯云的图片地址替换原来的地址,然后再存到数据库中本次使用wangeditor富文本编辑器,查看官网wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的功能不是很复杂,那么选它没错了,刚好能满足你!安装npm i wangeditor -S设置组件<template>...
2021-01-29 16:53:42
6251
3
原创 openlayers学习之绘制点、线、多边形、圆(鼠标绘制)
效果图组件代码<template> <div> <div> <span>Geometry type </span> <select v-model="typeSelected" @change="getTypeSelected"> <option value="Point">点&l
2021-01-22 15:25:05
1194
1
原创 openlayers学习之绘制点标记(鼠标单击事件)
步骤思想1、创建地图视图2、创建矢量容器3、创建矢量图层4、将矢量图层添加至地图5、监听地图点击事件6、创建矢量点7、设置样式8、将矢量容器的矢量元素清空9、再将新的矢量点add组件代码<template> <div id="container"> <div id="map" style="width: 100%; height: 100%"></div> </div></templa
2021-01-22 15:24:39
3108
原创 openlayers入门学习
参考文档Openlayers官网EPSG:3857和EPSG:4326区别详解npm安装cnpm i -S olOSM地图服务参考文档01参考文档02组件使用<template> <div class="home"> <div id="map"></div> </div></template><script>import "ol/ol.css";import { Map, Vi
2021-01-22 14:14:58
3098
原创 vue组件封装之图片点击放大预览(BigImg)
组件/* eslint-disable space-before-function-paren */ /* eslint-disable space-before-function-paren */ //eslint-disable-next-line vue/valid-template-root<template> <!-- 过渡动画 --> <transition name="fade"> <div class="img-view"
2021-01-06 14:13:20
1253
原创 ant design of vue 组件库按需引用
安装ant design of vuenpm i --save ant-design-vue方式一: 自动按需引入组件 (推荐)babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。1、安装babel-plugin-import插件npm i babel-plugin-import -D2、修改babel.config.js里代码,增加如下代码:module.exports = { presets: ["@v
2020-12-25 11:09:28
788
原创 高德地图(前端入门学习)
参考文档官方教程基础知识lng:经度lat:纬度在百度地图中,习惯经度在前,纬度在后地球上同一个地理位置的经纬度,在不同的坐标系中,会有少于偏移,国内目前常见的坐标系主要分为三种:地球坐标系——WGS84:常见于 GPS 设备,Google 地图等国际标准的坐标体系。火星坐标系——GCJ-02:中国国内使用的被强制加密后的坐标体系,高德坐标就属于该种坐标体系。百度坐标系——BD-09:百度地图所使用的坐标体系,是在火星坐标系的基础上又进行了一次加密处理。准备1、注册开发者账号2、创建
2020-12-22 14:52:49
1126
原创 eslint禁止检查注解
/* eslint-disable space-before-function-paren *//* eslint-disable space-before-function-paren */// eslint-disable-next-line vue/valid-template-root
2020-12-15 14:01:14
3512
原创 ant design of vue 编辑表格实现方式
<a-table :columns="itemsColumns" :pagination="false" :dataSource="items" rowKey="id" size="small"> <template slot="x" slot-scope="text, record,index"> <a-input
2020-12-10 14:12:27
1975
原创 vue引入外部js文件(第三方js工具或者jq库)
方法一:静态资源导入(或者cdn资源加载)在public文件夹下的index.html文件使用script标签对插件进行引用。可以是项目中的静态资源,也可以是远程资源。例如://本地静态资源,直接放在public文件夹下<script type="text/javascript" src="./wangEditor.min.js"></script>//cdn资源加载<script type="text/javascript" src="https://unpk
2020-12-07 17:18:33
12493
原创 js计算时间差(天、小时、分钟、秒)(日期计算)
<script type="text/javascript"> var date1= '2015/05/01 00:00:00'; //开始时间 var date2 = new Date(); //结束时间 var date3 = date2.getTime() - new Date(date1).getTime(); //时间差的毫秒数 //-------------------...
2020-09-16 16:30:35
1632
原创 Canvas学习之基础知识
Canvas 原点坐标canvas 是一个二维网格canvas 的左上角坐标为 (0,0),即左上角为原点坐标。学习资料文章菜鸟教程-canvas菜鸟教程-参考手册视频创建一个画布(Canvas)<!--canvas默认大小300*150--><canvas id="myCanvas" width="800" height="500"></canvas> #myCanvas { backgroun
2020-09-16 16:28:03
499
原创 vscode运行卡顿解决方案
卡顿原因主要是rg.exe扩展程序占用CPU过高,那么只需要禁用它即可。解决方案打开 vs code ,文件->首选项->设置->搜索“search.followSymlinks”取消勾选即可。
2020-08-31 09:58:06
13936
原创 vue打印功能详解
vue中打印功能安装Print包npm install vue-print-nb --savemain.js全局注册import Print from 'vue-print-nb'Vue.use(Print);使用指定需要打印的div容器,本次叫printTest。可直接写使用组件库,没必要非得写行内样式。 <div id="printTest" > <p>锄禾日当午</p> <p>汗滴禾下土
2020-08-31 09:26:30
2237
原创 vue导出pdf文件(汇总)
方法一:vue-print-nb插件官网地址npm安装npm install vue-print-nb --savemain.js全局注册import Print from 'vue-print-nb'Vue.use(Print);组件使用<template> <div class="home"> <button v-print="printObj">导出pdf</button> <div id="printMe
2020-07-23 20:48:27
7847
2
原创 vue导出Word文件(模板导出)
一、安装js依赖1、docxtemplater官方地址cnpm install docxtemplater pizzip -S2、jszip-utils官方地址cnpm install jszip-utils -S3、jszip官方地址cnpm install jszip -S4、FileSaver官方地址cnpm install file-saver --save二、创建Word模板首先,根据格式样式要求,使用word制作出模板,数据使用{变量}代替。条件判断变量循
2020-07-23 09:15:44
6238
5
原创 js中字符串比较大小
大于(>), 小于(<)运算符javascript字符串在进行大于(小于)比较时,会根据第一个不同的字符的ASCII值码进行比较。1、当数字number与字符串string进行比较大小时,会强制的将数字number转换成字符串string然后再进行比较2、当日期字符串比较,如果,没有具体时分秒,则转为00:00:00进行比较console.log('2020-10-10 09:00' > '2020-10-10') //trueconsole.log('2020-10-01'
2020-07-14 15:43:58
1742
1
原创 vue使用md5加密
当前端给后端传输用户密码等敏感信息时,前端需要使用使用md5加密,防止信息被窃取。后端再将已经加密过的信息再进一步加密存于数据库中。npm安装npm install --save js-md5全局注册使用1、在main.js中全局注册import md5 from 'js-md5';Vue.prototype.$md5 = md5;2、组件使用console.log( this.$md5('123456') ) //e10adc3949ba59abbe56e057f20f883e组
2020-06-23 16:09:55
580
原创 svn的使用
一、使用svn1、安装TortoiseSVN小乌龟版本管理工具安装详情2、TortoiseSVN 的使用a、检出项目b、新增文件后需要add到svn管理,否则不检测。增加完毕后,变成了蓝色加号,表示新增加的版本库文件。c、同理删除文件也必须用svn删除,而不是直接删除d、版本提交3、vscode中使用svn插件vscode中使用svn插件,前提得安装好了TortoiseSVN...
2020-06-23 11:04:20
152
原创 vue调试工具vue-devtools安装
github 克隆vue-devtools官方项目地址git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git此处安装v5.1.1分支,因为如果直接git clone下载的是最新的develop分支,而develop是测试分支,不是正式分支。当然也可以直接切换主分支后再git clone。具体原因打开vue-devtools,安装依赖包cd vue-devtoolscnpm install修改manifest.json文
2020-06-23 10:27:29
1500
原创 查看、修改git账号信息
用户名和邮箱查看git config --global --list // 查看当前git的配置信息git config user.namegit config user.email 修改git config --global user.name "username"git config --global user.email "email"邮箱地址是本地git客户端的一个变量,不随git库而改变。而不同项目,设置的用户名和密码不同。用户名和密码修改打开系统控制台=>
2020-06-23 10:21:30
14499
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人