- 博客(80)
- 收藏
- 关注
RSS订阅原创 js去除字符串中的空格
方法从字符串的两端清除空格，返回一个新的字符串，而不修改原始字符串。此上下文中的空格是指所有的。匹配一个空白字符，包括空格、制表符、换页符和换行符。匹配一个水平制表符，相当于按了一次Tab键。（空格、tab、不换行空格等）以及所有。符（如 LF、CR 等）。1、不处理中间的空格。
2023-04-18 17:40:23
1010
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
22332
5
原创 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
14108
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
1626
原创 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
4980
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
1224
原创 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
2427
原创 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
2351
原创 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
536
原创 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
129
原创 echarts地图学习（使用geoJson数据绘制地图）
参考文档使用echarts完成中国省市区县镇地图展示echarts地图（中国地图展示各省数据）echarts实现中国地图区域分布图 vue + echarts利用echarts中的map地图中的中国地图，并使中国地图显示效果为轮廓显示到市级级别效果可视化数据大屏echarts地图省份地区绘制并轮播切换地区数据vue使用echarts来绘制中国地图下钻省市区县级地图Echarts地图详解（地图样式、合并地图、增加地图）标题...
2021-09-02 14:53:16
3433
原创 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
563
原创 html之结构详解
概述<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。titletitle 标签定义文档的标题，在所有 HTML/XHTML 文档中都是必需的。<head> <title&g
2021-04-28 15:44:49
194
原创 vue中使用wangeditor富文本编辑器
前端使用富文本编辑器的插件有很多，今天献上wangeditor的使用教程，教你如何在vue中使用富文本编辑器先敬上官网wangeditor是一个萌新富文本编辑器，基于js和css，重点在于它轻量，如果你需要的功能不是很复杂，那么选它没错了，刚好能满足你！第一步：先保证你的电脑中安装有node，当然使用cdn也可以，下载到本地也行，我这里用的vue-cli，顺便下载到项目依赖中了本地下载：...
2021-01-29 16:54:36
2515
原创 ant design of vue 之富文本编辑组件（腾讯云）封装
最重要的是获取外部图片的url地址，需要将其资源上传到腾讯云，再将腾讯云的图片地址替换原来的地址，然后再存到数据库中本次使用wangeditor富文本编辑器，查看官网wangeditor是一个萌新富文本编辑器，基于js和css，重点在于它轻量，如果你需要的功能不是很复杂，那么选它没错了，刚好能满足你！安装npm i wangeditor -S设置组件<template>...
2021-01-29 16:53:42
6099
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
1122
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
2904
原创 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
2900
原创 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
1205
原创 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
765
原创 高德地图（前端入门学习）
参考文档官方教程基础知识lng：经度lat：纬度在百度地图中，习惯经度在前，纬度在后地球上同一个地理位置的经纬度，在不同的坐标系中，会有少于偏移，国内目前常见的坐标系主要分为三种：地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系。百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。准备1、注册开发者账号2、创建
2020-12-22 14:52:49
1074
原创 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
3409
原创 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
1948
原创 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
10002
原创 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
1582
原创 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
425
原创 vscode运行卡顿解决方案
卡顿原因主要是rg.exe扩展程序占用CPU过高，那么只需要禁用它即可。解决方案打开 vs code ，文件->首选项->设置->搜索“search.followSymlinks”取消勾选即可。
2020-08-31 09:58:06
13736
原创 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
2167
原创 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
7469
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
6057
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
1688
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
566
原创 svn的使用
一、使用svn1、安装TortoiseSVN小乌龟版本管理工具安装详情2、TortoiseSVN 的使用a、检出项目b、新增文件后需要add到svn管理，否则不检测。增加完毕后，变成了蓝色加号，表示新增加的版本库文件。c、同理删除文件也必须用svn删除，而不是直接删除d、版本提交3、vscode中使用svn插件vscode中使用svn插件，前提得安装好了TortoiseSVN...
2020-06-23 11:04:20
135
原创 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
1462
原创 查看、修改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
14158
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人