- 博客(64)
- 收藏
- 关注
RSS订阅原创 高德地图一些常用的地理位置获取方法
1、首先引入plugin//webapi.amap.com/maps?v=1.4.15&key=000&plugin=AMap.CustomLayer,AMap.Geocoder2、mixinimport { uuid } from '@/utils/utils';export default { data() { return { map: null, mapStyle: 'amap://styles/bcb8c05d5306c3
2021-07-15 10:36:32
972
原创 前端选择pdf文件，打开新页面预览
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
2021-07-09 17:50:21
741
原创 vue中将模态框移动到body中的方法
使用如下指令即可 directives:{ toBody:{ inserted(el,binding,vnode){ if(!vnode.context.toBody){ return; } if(window.modalBoxzIndex){ el.style.zIndex = windo
2021-05-18 09:15:13
872
原创 nginx同一个端口不同host代理
#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http { include mime.types; defau.
2021-05-17 10:09:03
361
原创 解决高德地图的marker中文字过长时的换行问题
在全局css中设置，此设置也解决了marker文本过长时设置anchor效果偏差过大的问题.amap-marker-content{ white-space: nowrap;}
2021-04-09 11:39:57
1087
原创 axios多个请求同时触发时，loading图结束过早问题
原因在于loading展示时机没有考虑到多个接口短时间内同时请求的情况/* eslint-disable no-unused-vars */import axios from 'axios'import store from '@/store/index';let reqCount = 0;function addReqCount(){ // 计数器累加 // 每一次请求就加1，只要大于1就展示loading if(!reqCount){ store.commit('chan
2021-03-17 13:49:23
441
原创 关于flex:1的情况下，overflow:auto没有生效的说明
flex:1的元素的父元素必须保证高度或者宽度有具体的数值；如果父元素的高度或者宽度也是flex:1自适应的，那么子元素的overflow:auto就不会生效；.parent{ flex:1; // 没有具体数值不生效 height:calc(100vh - 100px); // 有具体数值 生效}...
2021-03-10 18:03:57
3544
原创 element表格响应式高度
export default { data(){ return { tableMaxHeight:0 } }, mounted(){ this.getTableMaxHeight(); }, updated(){ this.getTableMaxHeight(); }, methods:{ getTableMaxHeight(){
2021-03-04 18:51:51
488
2
原创 高德地图marker拖拽过程中设置Polyline的path
高德地图拖拽marker，重新计算线条path效果 initLine(item) { // 初始化线条 let { x, y } = item; // 获取土地块的中心区域，线条的起点 let pixel = this.map.lngLatToContainer(new AMap.LngLat(x, y)); // 获得 Pixel 对 var path = [ new AM
2021-01-15 16:04:14
1707
2
原创 常用文件格式通过文件名称后缀匹配图片
export default { data () { return { fileTypes: { imgTypes: ['png', 'jpg', 'jpeg', 'jfif', 'gif', 'PNG', 'JPG', 'JPEG', 'JFIF', 'GIF'], docTypes: ['doc', 'docx'], zipTypes: ['zip'], rarTypes: ['rar'], text
2021-01-15 15:49:46
468
原创 简单的按钮点击波纹动效
.ripple { position: relative; overflow: hidden; /*隐藏溢出的径向渐变背景 */ }.ripple:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background
2020-12-23 10:19:38
399
原创 element-ui的菜单默认全部展开并且禁止收起
<template> <el-menu class="el-menu-vertical-demo" @close="handleClose" :default-active="$route.path" ref="menus" :default-openeds='defaultOpeneds' v-menuIcon > </el-menu&.
2020-12-18 09:57:55
6492
1
原创 js根据id递归查找json中的某一项
findItemName(arr) { const len = arr.length; let name; if (this.id) { for (let i = 0; i < len; i++) { if (this.id === arr[i].itemId) { name = arr[i].itemName; break; } else if (arr[i].
2020-12-08 16:45:18
1353
原创 获取浏览器窗口滚动条的宽度
const scrollW = window.innerWidth - document.documentElement.offsetWidth; // 滚动条宽度
2020-08-20 10:45:22
408
原创 vue脚手架打包后，直接启动nodejs服务部署静态文件
1、根路径下新建build.js（注意安装必要的npm包）const { run } = require('runjs')const chalk = require('chalk')const path = require('path');const rawArgv = process.argv.slice(2)const args = rawArgv.join(' ')if (process.env.npm_config_preview || rawArgv.includes('--previ
2020-07-31 23:02:46
1110
原创 js深拷贝
function deepCopy(obj: any) { let result: any = Array.isArray(obj) ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] === "object" && obj[key] !== null) { result[key] = deepCopy(obj[key]); //递
2020-07-29 11:16:50
111
原创 微信分享简单代码块
import { getWxShareConfig } from '@/apis/common';import { isWxClient } from '@/assets/js/utils';export default { mounted () { }, methods: { /** * * @param {*} config 参数 * @param config.title * @param config.desc * @para
2020-07-22 14:38:32
392
原创 前端webSocket初始化，心跳检测代码块
class WSocket { ws=null; timeout=20000; timeoutObj= null; serverTimeoutObj=null; init () { this.ws = new WebSocket(baseUrl); this.ws.addEventListener('open', () => { this.reset().start(); // 心跳检测 }); .
2020-07-08 20:13:34
789
原创 使用xlsx-js插件将JSON转换为excel并导出
import XLSX from 'xlsx';/** * 单个sheet下载 * @param {object[]} json json * @param {object} tableTitle excel表头名称 * @param {string} fileName 文件名称 * @param {object} wbConfig 扩展 * @param {object} woptsConfig 扩展 */function json2Excel(json,tableTitle,fileN
2020-06-16 09:10:41
1428
原创 pm2 在windows环境下执行 pm2 start npm -- run prod 命令报错问题解决方案
出现时机当使用pm2命令执行npm命令时会出现解决方案项目根目录下新建start_prod.js文件（名字随意），安装node-cmd包：const cmd = require('node-cmd');cmd.run('npm run start:prod');完成后 执行 pm2 start start_prod.js -n name完美解决，原因可能是pm2对cmd的某些东西不兼容...
2020-06-13 09:22:59
2346
原创 前端下载文件的几种方法
基于vue的mixinexport default { methods: { /** * @param {string} url * @param {string} fileName * 适用于单个除了img,video,audio，pdf的文件，通过链接直接下载文件 */ downloadWithUrl (url, fileName) { const aLink = document.createElement('a');
2020-06-02 23:02:22
462
原创 web移动端实现响应式布局解决方案
1、移动端的响应式布局主要用到rem，并且rem要跟随页面的尺寸改变而不断调整，两者缺一不可。2、本文没有采用flexible方案，该方案主要是使用js监听window的size，进而改变rem数值；3、采用rem+vw是当前比较合适的解决方案；flexible.css// 对应750px稿图html{font-size:13.33333333vw}// 尺寸过大的兼容方案@media (min-width: 560px) { html { font-size: 54px; }
2020-06-02 22:55:52
493
原创 nuxtjs校验登录中间件和混入（mixin）
middleware — authLogin.jsexport default function ({ route, store, redirect, app, req, res }) { // store.state.auth.loggedIn 是否登录 // 权限页面检查登录状态 if (!store.state.auth.loggedIn) { store.commit('changeShowType', 'login'); // 展示登录框或者可以跳转登录页 cons
2020-05-11 22:15:58
1649
原创 git实用指令
1.强制拉取远程分支覆盖本地git fetch --allgit reset --hard origin/mastergit pull2.远程分支删除后，更新本地分支列表git remote prune origin持续更新
2020-04-18 13:37:45
109
原创 nuxtjs设置环境变量
根目录下新建env.js文件；文件内容如下；export default { dev: { server: { port: 3000, // default: 3000 host: '0.0.0.0' // default: localhost }, // 项目访问路径 api: { port: '', // default...
2020-04-16 21:22:33
2061
原创 关于pm2在windows环境下启动nuxt报Created by npm, please don‘t edit manually.问题
一般是由于node无法操作cmd造成的解决方案：Egnpm install node-cmd --save;in startscript.js:var cmd=require('node-cmd'); cmd.run('npm start');pm2 start startscript.js
2020-03-20 14:38:34
2745
原创 Dockerfile备忘录
Dockerfile在将要打包的文件目录下创建Dockefile# /usr/src/nodejs/hello-docker/DockerfileFROM node:latest# 在容器中创建一个目录RUN mkdir -p /usr/src/nodejs/# 定位到容器的工作目录WORKDIR /usr/src/nodejs/# 把指定目录下的所有文件拷贝到 Imag...
2020-03-17 19:17:23
101
原创 vue-router路由表初始化
import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const createRouter = () => new Router({ mode: 'history', routes: []})const router = createRouter()export function re...
2020-01-15 12:58:06
2121
原创 前端接收二进制流的方式实现下载（get & post）
传送门//请求头要设置这个： { responseType: 'blob' }得到的二进制流传入下面的方法中即可完成下载 exportReport(data) { try { var blob = new Blob([data], { type: "application/vnd.ms-excel;charset=...
2019-12-19 18:10:03
1455
原创 简单实现webSocket + 心跳机制
import { baseUrl } from "../assets/js/baseUrl";class WS { ws: any | null = null; timeOut: number = 5000; timer: any = null; serverTimer: any = null; connect() { this.ws = new WebSocket...
2019-12-18 14:25:38
216
原创 简单实现一个函数调用loading图
const loading: any = { ele: null, render() { var fragment = document.createDocumentFragment(); const div = document.createElement("div"); div.style.position = "fixed"; div.style.to...
2019-12-05 11:08:44
288
原创 axios请求的再次封装
import axios from "axios";import Vue from "vue";import { baseUrl } from "./assets/js/baseUrl";import { loading } from "./views/common/Loading";import { Toast } from "vant";const instance = axios....
2019-12-05 11:07:21
162
原创 js控制input输入框的光标位置
function cursorMove(spos: any) { // spos 光标的位置 -1为最后一位 var tobj: any = document.getElementsByClassName("van-field__control")[0]; if (spos < 0) spos = tobj.value.length; if (tobj.set...
2019-11-22 15:10:47
1001
原创 使用express-session设置服务器session
//安装express-sessionconst session = require('express-session');router.use(session({ secret: '12345-67890',//任意字符，签名字符串 saveUninitialized: false, resave: false, cookie: { maxAg...
2019-11-22 13:47:43
309
原创 vue-ts的模板
import { State, Getter, Action, Mutation, namespace } from "vuex-class";const someModule = namespace(模块名);# state@State(state=>state.模块名.a) a a 就是模块中的 state# [email protected]('...
2019-11-14 14:59:42
784
原创 js原生实现复制
copyCode: function (val,e) { let input = document.createElement('input'); input.setAttribute('readonly', 'readonly');//可设可不设 input.setAttribute('value', val); document...
2019-11-13 13:40:11
245
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人