- 博客(40)
- 收藏
- 关注
RSS订阅原创 工作中常用到的前端小知识
1.使用css写出一个三角形角标元素宽高设置为0，通过border属性来设置，让其它三个方向的border颜色为透明或者和背景色保持一致，剩余一条border的颜色设置为需要的颜色。div { width: 0; height: 0; border: 5px solid transparent; border-top-color: red;}2.水平垂直居中一般只使用两种方式定位或者flex就够用了div { width: 100px; heig
2021-12-30 10:26:49
220
原创 创建form 并提交
let data = new FormData(); let form = document.createElement('form') document.body.appendChild(form) form.action=this.action // 后台地址 form.method='post' form.acceptCharset = 'utf-8' ...
2021-12-29 17:04:36
613
原创 如何获取url 中 你需要的参数
let url ='http://localhost:9528/static/html/pc.html#/pages/product/product?hs-code=hs123456&code1=ss&code2=33 //地址 let query = decodeURI(url.substring(1)); let vars = query.split("?")[1]; let varList = vars ? vars.spli...
2021-12-27 14:20:41
1241
原创 20个简洁的 JS 代码片段
20个简洁的 JS 代码片段1、单行 If-Else 语句这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句，而不是在多行上编写 if-else。例如：const age = 12;let ageGroup;// LONG FORMif (age > 18) { ageGroup = "An adult";} else { ageGroup = "A child";}// SHORTHANDageGroup = age > 18 ? "An
2021-08-03 15:29:41
581
原创 防止音频的多次点击
小程序自定义音频 音频疯狂点击 代码会持续加载 出现进度条和时间不受控制的加载设置一个变量 flag :true点击按钮的时候 判断flag是否为true 判断进去后把变量flag 设置为false 所以的逻辑走完 给true但是因为页面按钮还能正常点击 导致代码疯狂执行音频的内置样式 style="pointer-events:{{flag?'auto':'none'}}" 当逻辑走完 才可以点击这样疯狂点击也不会出错...
2021-07-30 14:53:09
106
原创 小程序不能正常缩放 在所有的markers在视野内
onReady: function () { this.mapCtx = wx.createMapContext('map'); //创建初始地图 }, //坐标点出现在一个视野范围 includePoints: function () { var that = this; that.mapCtx.includePoints({ padding: [100, 80, 100, 80], points: that.data.markers ..
2021-06-04 10:16:18
298
原创 js 根据经纬度计算两地之间的距离
function space(lat1, lng1, lat2, lng2) {console.log(lat1, lng1, lat2, lng2)var radLat1 = lat1 * Math.PI / 180.0;var radLat2 = lat2 * Math.PI / 180.0;var a = radLat1 - radLat2;var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;var s = 2 * Math.as
2021-05-11 15:19:43
134
原创 vuex 刷新数据丢失
数据存在sessionStorage 页面关闭数据就被清除 保证下次进入 数据是最新的//在页面加载时读取sessionStorage里的状态信息if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessi
2021-03-31 10:18:53
83
原创 前端 RSA加密 （解决了字节过长 中文乱码的问题）
1. 先npm下载 下载指定版本npm install jsencrypt@3.0.0-rc.12. 在当前页引入import { RsaService } from '~/utils/rsa.service';3. 封装 rsa.service.tsimport JSEncrypt from 'jsencrypt';export class RsaService{ //rsa加密 public static rsaEncrypt(obj){ if(obj == nu
2021-03-03 11:01:35
1901
3
原创 zooomcharts的使用 （1.18.8版本 + ts ）
zooomcharts的使用 （1.18.8版本 + ts ）1. 下载指定版本npm install --save @dvsl/zoomcharts@1.18.82. 在index.html里面用 ZoomChartsLicense 和 ZoomChartsLicenseKey3.在页面引用import * as zc from "@dvsl/zoomcharts"4. 在页面的使用 let NetChart = zc.NetChart; let chart = new N
2021-01-29 15:01:05
815
原创 base64图片 下载
base64图片 下载1.获取的数据是base64图片格式2.下列代码可以直接复制 下载 const imgUrl =（base64图片） if (window.navigator.msSaveOrOpenBlob) { // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片 var bstr = atob(imgUrl.split(',')[1]) var n = bstr.length var u8arr = ne
2021-01-29 14:48:36
1055
原创 前端自己导出excel表格 不需要调接口（可导出全部的数据）
前端自己导出excel表格 不需要调接口（可导出全部的数据）1.下载npm install -S file-saver xlsx2.把js放在对应的位置 全部复制（Export2Excel.js）( ~/assets/excel/Export2Excel)import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) { var out = []; var rows =
2021-01-26 11:07:38
739
原创 前端模糊查询当前列表
前端模糊查询当前列表说明： this.accountDetailsData 和 this.accountDetailsDataOld 的值都是一样的 开始出现了 原数组老是被改变 使用了很多方法不行就使用了2个变量1.在html页面 <el-table stripe :data="searchInputAccount ?accountDetailsData : accountDetailsDataOld" border style="width: 100%;margin-top: 15px"&
2021-01-22 15:03:04
647
原创 JS中的扩展运算符…
JS中的扩展运算符…JS中的扩展运算符一般用于以下情况：1.数组和对象的深拷贝(仅限单层数组或对象的深拷贝，实际上对于数组和对象的嵌套来说还是浅拷贝)let arr = ['a', 'b']let arr1 = [...arr]let [...arr2] = arr console.log(arr1, arr2) //输出['a', 'b'] ['a', 'b']这里数组arr和arr1和arr2存储在不同的对内存地址中，互相之间不会产生任何影响。2.数组或对象的拼接let arr =
2021-01-12 17:34:49
883
原创 Object.keys方法之详解
Object.keys方法之详解一、语法 Object.keys(obj)二、处理对象，返回可枚举的属性数组 let person = {name:"张三",age:25,address:"深圳",getName:function(){}} Object.keys(person) // ["name", "age", "address","getName"]三、处理数组，返回索引值数组 let arr = [1,2,3,4,5,6] Object.keys(arr) // ["0",
2021-01-08 15:21:44
359
原创 如何在el-date-picker上实现初始值
如何在el-date-picker上实现初始值1.主要在el-date-picker 上添加一个数组 :default-value=“this.searchCriteriaInfo.returnVisit” <el-date-picker clearable v-model="searchCriteriaInfo.returnVisit" :default-value="this.searc
2020-12-24 10:56:39
6934
原创 Vue过滤器使用（格式化时间）
Vue过滤器使用（格式化时间）在main.js中注册全局过滤器// 全局注册格式化时间过滤器Vue.filter('dateFormat', originVal => { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0'
2020-12-17 16:10:27
590
1
原创 vue实现路由懒加载
vue路由懒加载一. 意义为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。二、定义懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。三、使用常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import例子：未用懒加载，vue中路由代码如下import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vu
2020-12-16 16:40:15
177
原创 vue设置缓存的方法 (有的页面需要缓存 有的页面不需要)
vue设置缓存的方法1.在App.vue中判定要不要缓存 <template> <div id="app"> <router-view v-if="!$route.meta.keepAlive" /> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> </div></templ
2020-12-16 16:17:53
1643
2
原创 判断是安卓还是苹果系统
判断是安卓还是苹果系统 var u = navigator.userAgent; if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {} if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {}userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值语法：navigator.userAge
2020-12-14 13:40:05
390
原创 用vant中的插件配置rem的适配
用vant中的插件配置rem的适配postcss-pxtorem 是一款postcss插件，用于将单位转化为remlib-flexible 用于设置rem基准值npm install postcss-pxtorem --save-devnpm i -S amfe-flexible在main.js中引入lib-flexibleimport 'lib-flexible';在postcss.config.js文件中进行配置 module.exports = { plugins:
2020-12-14 10:23:16
131
原创 下载less 依赖
下载less 依赖1.安装 less 和 less-loadernpm install less less-loader --save-dev打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面添加一段{test: /.less$/,loader: "style-loader!css-loader!less-loader" }...
2020-12-14 10:19:45
2735
原创 截取url中?后面的数据，并转化成对象
js截取url中?后面的数据，并转化成对象//自动获取地址栏链接带？以及后面的字符串var url = window.location.search;//定义一个空对象var obj = {};if(url.indexOf("?") != -1){//如果字符串里面存在? var str = url.substring(1); //从url的索引1开始提取字符串 var arr = str.split("&"); //如果存在&符号，则再以&符号进行分割
2020-12-14 10:14:28
431
原创 vue刷新当前页面（不会出现闪屏） （ https://www.jianshu.com/p/b6d7db35b6e4 ）
vue刷新当前页面（不会出现闪屏）vue刷新当前页面 不会出现闪屏父子组件传值 也可以在父组件完成所有的操作 不需要到子组件1. 在app.vue的加上v-if属性<router-view v-if="isRouterAlive"></router-view>2. 在data里面加上isRouterAlive,当然这个属性名可以自己定义，默认值为truedata () { return { isRouterAlive: true
2020-12-14 10:11:35
714
原创 手机端自适应正方形 （适应绝对的正方形）
手机端自适应正方形父级设置宽为任意，高设置为0，设置padding-top：width。由于父级使用的padding撑开的内容区域，所以不能操作内容区域，顾子集不设置宽高，使用position：absolute（绝对定位）top、right、bottom、left为零。...
2020-12-14 09:53:29
316
原创 怎么配置echarts （亲测有效）
怎么配置echarts1.安装npm install echarts --save 下载2,在main.js中引用import echarts from "echarts";Vue.prototype.$echarts = echarts;3.在需要使用的页面再次引用var echarts = require('echarts');4.在页面的 放一个容器<div id="echartContainer" style="width:100%; height:300px">
2020-12-14 09:46:46
207
原创 在vue项目中使用animate.css （亲测有效）
在vue项目中使用animate.css第一步 安装 npm install animate.css --save 第二步: 引用 （ 在main.js中引用 ） import animate from 'animate.css' Vue.use(animate); 第三步: 使用<p class="animated swing">11111</p>
2020-12-14 09:39:19
264
原创 文件下载的时候 给的是数据流 转换blob 下载 （亲测有效）
文件下载的时候 给的是二进制流 转换blob 下载只需要在router 里面添加一个 responseType格式downloadArchiveData(params) { return myAxios({ method: 'post', url: '/olap-apply/caseArchive/downloadArchiveData', params: params, responseType: 'blob' （只需要在这添加一个格式） })},
2020-12-11 16:21:00
1062
原创 城市的3级联动 插件 （亲测有效）
城市的3级联动 插件安装cnpm install vue-area-linkage --save 组件cnpm install area-data --save 城市数据来源依赖在main.js中引用import 'vue-area-linkage/dist/index.css';import VueAreaLinkage from 'vue-area-linkage';import { pca, pcaa } from 'area-data';Vue.prototype.$pcaa =
2020-12-11 16:13:54
238
原创 ASE加密的使用方法 （亲测有效）
ASE加密的使用方法安装npm install crypto-js --save-dev// ASE加密private encrypt(data) { const CryptoJS = require("crypto-js"); const key = CryptoJS.enc.Latin1.parse("跟后端一致的加密方法"); const iv = CryptoJS.enc.Latin1.parse("跟后端一致的加密方法"); return CryptoJS.AES.enc
2020-12-11 16:07:17
942
原创 formatter（value,row,index）{} 参数的含义 （亲测有效）
formatter （value,row,index）{} 参数的含义formatter 属于列参数，表示对于当前列的数据进行格式化操作，它是一个函数，有三个参数，分别是value，row,indexvalue：表示当前单元格中的值row：表示当前行index：表示当前行的下标可以使用return返回想要的数据显示在单元格中在element 中 el-table 中使用：<el-table-column label="接通状态" :show-overflow-tooltip="true"
2020-12-11 15:56:29
4019
1
原创 element时间选择器的选择时间限制在一个月（亲测有效）
时间选择器的选择时间限制在一个月（亲测有效）时间选择器的选择时间限制在一个月<el-date-picker type="daterange" unlink-panels value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>日期
2020-12-11 15:51:52
4875
1
原创 moment的使用在vue项目中的使用 （亲测有效）
moment的使用"moment": "^2.22.2",通过版本号复制到package.json中 "dependencies"中npm install在页面引用import Moment from 'moment';在方法中使用return this.moment(parseInt(timestamp)).format("YYYY-MM-DD HH:mm:ss")
2020-12-11 15:40:10
822
原创 ES6中的import与export对class操作相关用法举例
ES6中的import与export对class操作相关用法举例ES6中的import与export对class操作相关用法举例一、指定输出类名// export 输出export class App extends React.Componet { // ..code}// import 引入import {App} from './app';二、不指定输出类名// export 输出export default class App extends React.Compon
2020-12-11 15:32:38
3118
原创 for...of循环 js方法
for…of循环for...of 循环的编写方式和 for...in 循环的基本一样，只是将 in 替换为 of，可以忽略索引。for...of 解决了 for 和 for…in 循环的不足之处。你可以随时停止或退出 for…of 循环const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];for (const digit of digits) { if (digit % 2 === 0) { continue; } console.log(
2020-12-11 15:25:42
191
原创 **Vue-CLI 3.x 设置反向代理 解决跨域问题**
Vue-CLI 3.x 设置反向代理 解决跨域问题在项目的根目录下新建 vue.config.js 文件，自Vue CLI 3开始，项目中所有的配置信息都写在这个文件中（2在config目录中配置）代码如下：module.exports = {devServer: {proxy: {‘/api’: {target: ‘’, // 重新映射的新地址ws: true, //// 是否启用websocketschangeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，
2020-12-11 14:57:04
294
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人