- 博客(52)
- 收藏
- 关注
RSS订阅原创 html：a标签href属性详解（特殊功能邮件、电话等）
这是常见的创建按钮或链接，将用户的电子邮件程序打开，让他们发送新邮件。这是通过使用一个 mailto 链接完成的。函数，但是这个函数为空，所以我们调用的是一个空函数，相当于。链接返回到页面顶部。这种行为是 HTML5 的特性。1、本功能可以使用的前提是用户的电脑安装了邮件客户端。当前页面如果滚动了，可以使用这种方式回到顶部。是一个伪协议，可以让我们通过超链接去调用。并不会发生实质性的改变，类似占位符的功能。3、邮件发送到多个邮箱，可以使用分号。，即不执行任何事件，地址不发生跳转。2、各个参数都有的邮件。
2022-12-20 15:24:02
4011
原创 elementui：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
24279
6
原创 地图技术知识：使用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
15121
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
1965
原创 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
5272
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
1427
原创 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
2598
原创 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
2494
原创 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
595
原创 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
180
原创 echarts地图学习（使用geoJson数据绘制地图）
参考文档使用echarts完成中国省市区县镇地图展示echarts地图（中国地图展示各省数据）echarts实现中国地图区域分布图 vue + echarts利用echarts中的map地图中的中国地图，并使中国地图显示效果为轮廓显示到市级级别效果可视化数据大屏echarts地图省份地区绘制并轮播切换地区数据vue使用echarts来绘制中国地图下钻省市区县级地图Echarts地图详解（地图样式、合并地图、增加地图）标题...
2021-09-02 14:53:16
4359
原创 vue项目经验：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
736
原创 html：结构详解
概述<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。titletitle 标签定义文档的标题，在所有 HTML/XHTML 文档中都是必需的。<head> <title&g
2021-04-28 15:44:49
228
原创 vue项目经验：wangeditor富文本编辑器
前端使用富文本编辑器的插件有很多，今天献上wangeditor的使用教程，教你如何在vue中使用富文本编辑器先敬上官网wangeditor是一个萌新富文本编辑器，基于js和css，重点在于它轻量，如果你需要的功能不是很复杂，那么选它没错了，刚好能满足你！第一步：先保证你的电脑中安装有node，当然使用cdn也可以，下载到本地也行，我这里用的vue-cli，顺便下载到项目依赖中了本地下载：...
2021-01-29 16:54:36
2592
原创 ant design of vue富文本编辑组件（腾讯云）封装
最重要的是获取外部图片的url地址，需要将其资源上传到腾讯云，再将腾讯云的图片地址替换原来的地址，然后再存到数据库中本次使用wangeditor富文本编辑器，查看官网wangeditor是一个萌新富文本编辑器，基于js和css，重点在于它轻量，如果你需要的功能不是很复杂，那么选它没错了，刚好能满足你！安装npm i wangeditor -S设置组件<template>...
2021-01-29 16:53:42
6309
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
1294
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
3136
原创 地图技术知识：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
3354
1
原创 地图技术知识：高德地图前端入门学习
参考文档官方教程基础知识lng：经度lat：纬度在百度地图中，习惯经度在前，纬度在后地球上同一个地理位置的经纬度，在不同的坐标系中，会有少于偏移，国内目前常见的坐标系主要分为三种：地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。火星坐标系——GCJ-02：中国国内使用的被强制加密后的坐标体系，高德坐标就属于该种坐标体系。百度坐标系——BD-09：百度地图所使用的坐标体系，是在火星坐标系的基础上又进行了一次加密处理。准备1、注册开发者账号2、创建
2020-12-22 14:52:49
1139
原创 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
12901
原创 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
2269
原创 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
7968
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
6328
5
原创 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
590
原创 svn：基础使用
一、使用svn1、安装TortoiseSVN小乌龟版本管理工具安装详情2、TortoiseSVN 的使用a、检出项目b、新增文件后需要add到svn管理，否则不检测。增加完毕后，变成了蓝色加号，表示新增加的版本库文件。c、同理删除文件也必须用svn删除，而不是直接删除d、版本提交3、vscode中使用svn插件vscode中使用svn插件，前提得安装好了TortoiseSVN...
2020-06-23 11:04:20
168
原创 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
14578
1
原创 js：常用正则表达式
手机号验证/^1(3|4|5|6|7|8|9)\d{9}$/手机号中间隐藏四位（脱敏）phone = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');身份证验证/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([
2020-06-13 18:37:58
783
原创 ant design of vue自定义字体图标（阿里巴巴矢量图标库的使用）
symbol引用（阿里巴巴矢量图标库）这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。可以通过一些技巧，支持像字体那样，通过font-size,color来调整样式。下面是ant design of vue官网的介绍下面介绍使用方式1、打开阿里巴巴矢量图标库，找到项目，选择symbol方式，复制代码如：//at.alicdn.com/t/font_1848039_9sjfmhyi7iv.js2、在项目中写入通用js文件(我是放入src下core中的my_icon.js中
2020-05-28 16:56:14
3907
原创 vue项目经验：window.onresize的使用
重点：window.onresize只能在一个组件中使用，如果多个组件调用则会出现覆盖情况，所以我的解决方案是在App.vue中使用，获取document.documentElement.clientWidth（即浏览器宽度）存放在vuex中，别的组件只需要用computed(计算属性)将vuex的clientWidth获取，然后通过watch监听clientWidth的值，即可触发组件事件App.vue代码<script>export default { name: 'app',
2020-05-25 19:57:41
3177
3
原创 ant design of vue学习之表格Table
Ant design vue之表格Table学习操作插槽<span slot="action" slot-scope="record"> <a href="javascript:;">详情</a> <a href="javascript:;">编辑</a> <a-dropdown> <a-menu...
2020-05-18 17:16:50
3414
原创 ant design of vue 学习之表单Form（升级）
labelInValue（下拉框）<a-form-item label="第一完成人" v-bind="formItemLayout"> <a-select labelInValue placeholder="请选择第一完成人名字" v-decorator="['firstCompleter',{ru...
2020-05-18 17:01:22
1217
原创 ant design of vue 学习之表单Form
Ant Design Vue 学习之表单欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导...
2020-05-18 16:27:05
3074
原创 vue项目经验：如何通过src路径下载图片
前端通过src路径下载图片方案js方式下载vue方式下载vue项目将图片转base64码后再转成文件类型最后上传腾讯云(一下代码可以忽视，我自己项目的需求)方案创建一个img元素以及一个canvas元素，然后将图片绘制到canvas，再通过canvas的toDataUrl() API可以将图片转base64码，然后模拟点击事件即可下载图片。注意：在本地或者网站下载外链url图片时涉及到跨域，...
2020-05-18 13:49:48
3639
原创 vue项目经验：导出Word文件（数据流方式）
安装依赖：jquery 和file-savernpm install jquery file-saver --savejquery.wordexport.js// 导入js文件import $ from 'jquery'import saveAs from 'file-saver'if (typeof $ !== "undefined" && typeof saveAs !== "undefined") { (function ($) { $.fn
2020-05-18 10:26:02
7187
原创 vue项目经验：导出Excel表格（简单）
一、安装依赖npm install -S file-saver xlsxnpm install -D script-loader二、下载文件在 /src 目录下新建 vendor文件夹，用于存放 Blob.js 和 Export2Excel.js 文件。百度网盘下载地址链接: https://pan.baidu.com/s/1efys5Awc5BxMdK71Jy1vKw 提取码: k...
2020-05-15 16:33:41
796
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人