- 博客(45)
- 收藏
- 关注
RSS订阅转载 Let’s Encrypt 根证书（DST Root CA X3）ssl过期解决办法
Let’s Encrypt 根证书（DST Root CA X3）根证书过期，浏览器打开 https 网站，提示证书错误，在 Android，Windows，macOS，Linux等老旧系统上的解决办法。
2022-06-09 14:38:19
5948
原创 div水平垂直居中
使用flex布局，为父div添加flex布局样式align-items和justify-content-webkit-display: flex;display: flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: center;justify-content: center;
2022-04-20 15:26:30
135
转载 js数组排序方法
sort 排序// 对数字进行排序，简写const arr = [3, 2, 4, 1, 5]arr.sort((a, b) => a - b)console.log(arr) // [1, 2, 3, 4, 5]// 对字母进行排序，简写const arr = ['b', 'c', 'a', 'e', 'd']arr.sort()console.log(arr) // ['a', 'b', 'c', 'd', 'e']冒泡排序function bubbleSort(.
2022-01-24 16:10:05
208
原创 获取url中的参数
用decodeURIComponent解码，通过name返回需要的值 // 获取url参数 function getUrlKey (name) { return ( decodeURIComponent( (new RegExp( "[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)".
2022-01-24 16:01:40
526
原创 使用indexedDB数据库存储，依赖Dexie
应用场景开发者需要在本地进行永久存储。当我们进行一些较大的SPA页面开发时，我们会需要进行一些数据的本地存储。当数据量不大时，我们可以通过SessionStorage或者LocalStorage来进行存储，但是当数据量较大，或符合一定的规范时，我们可以使用数据库来进行数据的存储。在浏览器提供的数据库中，共有web sql和IndexedDB两种。相较于HTML5已经废弃的web sql来说，更推荐大家使用IndexedDB。概念IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的.
2022-01-24 11:58:59
2505
转载 基于 VUE 和 element-ui 的树形穿梭框组件 el-tree-transfer
el-tree-fransfer 是一个基于 VUE 和 element-ui 的树形穿梭框组件，使用前请确认已经引入element-ui！ 此组件功能类似于element-ui的transfer组件，但是里面的数据是树形结构！ 实际上，el-tree-transfer 依赖的 element-ui 组件分别是 Checkbox 多选框，Button 按钮，和最主要的 Tree 树形控件写成。安装依赖 el-tree-transfernpm install el-tree-transfer --save
2021-09-10 11:56:07
1653
转载 用localStorage 和 sessionStorage 属性在浏览器中存储 key/value 的数据
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。1. Window localStorage 本地存储实例使用 localStorage 创建一个本地存储的 name/value 对，name=“lastname” value=“Smith”, 然后检索 “lastname” 的值，并插入到 id=“result” 的元素上:// 首先在使用.
2021-05-10 14:45:29
613
原创 调用导出文件的方法
调用方法import { postExport } from "../FileSaver.js";export default { name: "vaccinationList", data(){} methods:{ //导出 async exportExcel(){ //参数 let params = { keyword: this.keyword, .
2021-04-28 17:53:44
181
原创 在网页绝对定位处规律分布三列多行的div盒子
效果如下<template> <div> <div v-for="(item, index) in list" :style="[ { width: '350px', height: '180px', position: 'absolute',
2021-04-28 11:29:46
219
原创 表单校验身份证号、手机号
校验身份证号<el-form-item label="身份证号" prop="idCard"> <el-input v-model.trim="info.idCard" maxlength="18" placeholder="请输入身份证号"></el-input></el-form-item> idCard: [ { required: tru.
2021-04-28 10:48:12
1004
原创 js判断字符是否为空
//判断字符是否为空的方法 isEmpty(obj){ var regu = "^[ ]+$"; var re = new RegExp(regu); if(typeof obj == "undefined" || obj == null || obj == "" || re.test(obj)){ return true; ...
2021-03-12 10:22:39
97
原创 vue设置定时任务
created() { this.setTiming();//定时获取数据 }, destroyed(){ window.clearInterval(this.timed);//销毁定时任务 }, methods: { //设置定时获取列表 setTiming(){ this.timed = window.setInterval(() => { setTimeout(() .
2021-03-04 11:05:19
1848
转载 js获取浏览器版本信息
function getBrowserInfo(){ var agent = navigator.userAgent.toLowerCase() ; var regStr_ie = /msie [\d.]+;/gi ; var regStr_ff = /firefox\/[\d.]+/gi var regStr_chrome = /chrome\/[\d.]+/gi ; var regStr_saf = /safari\/[\d.]+/gi ; //IE
2021-03-01 11:40:31
279
原创 vue开发封装组件，传入样式相关的参数，在样式中使用组件中接收的参数
使用场景在使用vue开发时，经常会封装很多的组件方便复用，那么难免就有写样式相关组件，比如需要使用时传入颜色、高度等样式参数。那么问题来了：我们要怎么在样式中使用组件中接收的参数呢？或者说，我们要怎么在样式中使用data中的变量呢？实例<template> <div class="box" :style="styleVar"> </div></template><script>export default { prop.
2021-02-19 11:15:55
1059
原创 js捕捉按下和抬起键盘操作，持续按下不重复执行
<script> export default { data() { return { keyboardControl:false,//键盘是否已按下 } }, created(){ var _self = this; //键盘按下 document.onkeydown = function(e){
2021-01-15 11:01:21
1086
原创 指定div全屏显示
vue引用js文件fullScreen.jsimport { fullScreen } from './fullScreen'2.使用fullScreen方法fullScreen(document.getElementById('player'));3.fullScreen.js//全屏function fullScreen(el) { var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRe.
2021-01-15 10:52:59
836
转载 element el-dialog对话框实现可拖拽、拉伸、双击全屏
使用方法将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可；给elementUI的el-dialog标签上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。给dialog设置 :close-on-click-modal=“false” , 禁止点击遮罩层关闭弹出层如果是form表单，不要将提交等按钮放置el-form-item，以免在上下拉伸时被隐藏import Vue from 'vue';/** 使用方法* .
2021-01-15 10:40:54
2587
1
原创 [JS]xml字符串转xml对象，xml字符串json对象，xml字符串json字符串
/** * xml字符串转换xml对象数据 * @param {Object} xmlStr */function xmlStr2XmlObj(xmlStr) { var xmlObj = {}; if (document.all) { var xmlDom = new ActiveXObject("Microsoft.XMLDOM"); xmlDom.loadXML(xmlStr); xmlObj = xmlDom; } else {
2021-01-15 10:07:32
648
原创 我的开发笔记
用$set()方法重新渲染this.$set(this.student,“age”,23)//this.student为你在data中声明的数组名//age是你要改变的数组下指定的字段名//24是你要变化的值
2021-01-09 17:41:07
220
1
原创 手写一个vue分页组件
先上图父组件<my-page :pageSize="pageSize" :total="allcount" @pageChange="pageChange"></my-page><script>export default { components:{MyPage}, name: 'people', data () { return { pageSize:100, curpage:1, allcount
2020-12-18 19:52:07
510
1
原创 echarts饼图案例
效果图vue饼图组件<template> <div id="pie"></div></template><script> import echarts from "echarts"; import "echarts/lib/chart/pie"; import "echarts/lib/chart/line"; import "echarts/lib/chart/bar"; impor.
2020-09-25 17:49:35
449
原创 echarts柱形图+折线图混合案例
效果图vue柱形图+折线图组件<template> <div ref="two"></div></template><script> import echarts from "echarts"; import "echarts/lib/chart/pie"; import "echarts/lib/chart/line"; import "echarts/lib/chart/bar";..
2020-09-25 17:34:34
14456
1
原创 使用vue-video-player播放视频
安装vue-video-player依赖npm install vue-video-player --savemain.js引入import VueVideoPlayer from 'vue-video-player'import 'video.js/dist/video-js.css'Vue.use(VueVideoPlayer)页面使用<template> <div style="width: 800px;height: 600px;" align=".
2020-09-24 13:26:53
1110
原创 WGS84、GCJ02、BD09、WGS1984、EPSG4326坐标相互转换
安装gcoordnpm install gcoord --save引入gcoord，transform, BD09, WGS84import gcoord from 'gcoord'import { transform, BD09, WGS84 } from 'gcoord'调用methods:{ //WGS84转百度坐标 transformation(latitude,longitude){ if(latitude .
2020-09-23 10:01:05
4461
转载 el-upload上传图片获取该图片的base64编码
<el-upload action="#" :on-change="handleChangeUpload" list-type="picture-card" :auto-upload="false"> <i class="el-icon-plus"></i></el-upload> handleChangeUpload(file, fileList) { this.getBase64(file.raw).then(r
2020-08-29 11:12:21
1229
2
原创 el-table表中标准时间格式改为yyyy-MM-dd HH:mm:ss
<el-table-column :formatter="formatDate" property="time" label="时间" align="center"></el-table-column> //替换表格时间格式 formatDate(row, column) { // 获取单元格数据 let date = row[column.property
2020-07-29 17:13:02
2128
原创 将数组分割成多个小数组
splitArray(array, subGroupLength) { let index = 0; let newArray = []; while(index < array.length) { newArray.push(array.slice(index, index += subGroupLength)); }
2020-07-25 11:15:56
856
原创 vue通过地址传参跳转同一路由页面，页面不刷新的解决办法
路由跳转并传参this.$router.push({name:'scenicStrategyList',query:{typeCode:code}});虽然下一个点击还是当前路由不会刷新当前路由，但我们知道route路由数据此时是发生了变化的，比如route路由数据此时是发生了变化的，比如route路由数据此时是发生了变化的，比如route里传递的参数信息会随着每次不同的点击发生变化，那么我们利用这一点使用vue的watch去检测这样的变化然后再重新请求数据请求接口即得到想要的数据watch:{
2020-07-22 13:27:39
1467
原创 echarts柱状图、曲线图案例，鼠标滚轮控制缩放
1.定义图表标签<div id="graph_count" style="height: 500px;"></div>2.引入echarts资源 import echarts from 'echarts/lib/echarts'; import 'echarts/lib/chart/bar'; import 'echarts/lib/chart/gauge'; import 'echarts/lib/chart/line'; import 'e
2020-05-30 11:02:37
2581
原创 js从数组中随机取出一个元素
var arr = ['j','s','从','数','组','中','随','机','取','出','一','个','元','素'];var item = arr[Math.floor(Math.random()*arr.length)];console.log(item);
2020-05-28 14:59:57
2192
原创 Vue中computed和watch的区别和不同的使用场景
计算属性computed :支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在c
2020-05-26 16:17:05
1135
原创 限制el-input输入框的内容（1）不能输特殊字符（2）只能输纯数字（3）校验IP地址（4）校验经纬度
<el-input :value="form.name" @input="e => form.name = validSe(e)" maxlength="15" placeholder="请输入名称"></el-input>import Vue from "vue"//限制计划名称不能输入特殊符号、不能超过15个字符 Vue.prototyp...
2020-04-29 10:54:17
6197
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人