全易_CSDN博客-前端原生技术：JavaScript,前端JS框架：Vue,前端原生技术：css领域博主

原创 element 表格翻页记忆勾选

给el-table标签放入row-key属性：给type=“selection” 的el-table-column标签放入row-key属性：效果：

2021-01-07 16:21:43 37

要使用4.1.0版本的echarts！！！否则报Map china not exists. The GeoJSON of the map must be provided安装：npm install echarts@4.1.0 --save引入：import * as echarts from 'echarts'import 'echarts/map/js/china'Vue.prototype.$echarts = echarts;使用：<template>

2020-12-31 13:46:42 65

原创 uniapp 监听网络情况

局部监听：放在页面文件的onShow()里即可网络有变化uni.onNetworkStatusChange()就会执行输出网络情况uni.onNetworkStatusChange(function (res) { console.log(res.isConnected); console.log(res.networkType);});全局监听放在App.vue的onShow()里，搭配vueX使用：...

2020-12-29 14:53:52 124

原创 uniapp 监听更新升级情况

/* ----------------------------- 检查程序更新情况 ----------------------------- */const updateManager = uni.getUpdateManager();// 当向小程序后台请求完新版本信息updateManager.onCheckForUpdate(function(res) { console.log("有更新：", res.hasUpdate); // 请求完新版本信息的回调});// 当新版本下载完成u

2020-12-29 14:45:17 102

原创 uniapp 启用服务推送

一定要放在事件直接执行的地方，比如点击事件// 一定要放在事件直接执行的地方，比如点击事件uni.requestSubscribeMessage({ tmplIds: [''], // 需要订阅的消息模板的id的集合 success (res) { console.log(res); // 然后业务代码 }})官方说明...

2020-12-29 14:42:01 43

原创 vue 报Failed to mount component: template or render function not defined.

如果使用require()引入页面文件的话，要加.default。{ path: 'home', name: 'Home', component: require("@/pages/home").default, meta:{ title: '首页', id:"0" } },

2020-12-24 14:52:14 20

原创 js 内置的三种弹框

confirm()if (confirm("提示文字")) { console.log("点击了确定"); } else { console.log("点击了取消"); }alert()console.log(alert("提示文字"));if (alert("提示文字")) { console.log("点击了确定");} else { console.log("点击了取消");}prompt()let value = prompt("提示文.

2020-12-23 15:05:35 49

原创 element 表格选中项不可操作

2020-12-23 12:07:12 32

原创 element 表格默认选中

背景：默认选中的数据接口会返回值会放在最前面。例如选中的有8个，那么表格前8条数据就该是选中的。所以，接口eternal是返回有几个选中的数字其实下图还存在问题，返回的eternal应该有分页概念...

2020-12-23 10:59:28 43

原创 vue引入高德地图

1. 官方获取key：https://console.amap.com/dev/key/app2. index.html引入<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script> 3.配置build/webpack.base.conf.js：externals: { 'AMap': 'AMap' },重启项目

2020-12-20 13:21:52 119

原创 uniapp实现微信小程序点亮发送给朋友权限

uni.showShareMenu();效果：

2020-11-27 16:07:10 122

原创 uniapp实现微信小程序点亮分享到朋友圈权限

在可分享的页面文件里写：onShareAppMessage(){ return { from:"menu" }},onShareTimeline(){},微信官方文档：效果：

2020-11-27 16:02:35 99

原创 sm2、sm3 前端使用国密加密解密

安装：npm install --save sm-crypto引入：const sm2 = require('sm-crypto').sm2const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1加密：let encryptData = sm2.doEncrypt(msgString, publicKey, cipherMode) // 加密结果conso.log("加密结果：",encryptData);解密：let decryptData

2020-11-23 13:50:06 757

原创 js 数组转字符串，字符串转数组

数组转字符串var arr=["呀覅发","附件我发我","就让我委","那就按嗯"]; console.log(arr.join()); //默认按,分割console.log(arr.join("-")); //按-分割console.log(arr.join("/")); // 按/分割字符串转数组var str = "拿出来死啊，忘记烦恼是，积分晚礼服你，忘了粉色浪费你发，阿吉尔菲娜另外恶霸，服务冷风撒，放牛娃"; console.log(str.split("，"

2020-10-29 10:02:33 115

原创 uniapp 请求封装，拦截器：请求拦截、响应拦截

目录结构：全局请求封装：request.js// 全局请求封装const token = uni.getStorageSync('token');import service from "./service.js"; // 请求字典export default (url, method, params) => { uni.showLoading({ title: "加载中" }); const api = service.filter(item => { re

2020-10-27 13:03:44 1408 5

原创 js 对象动态增加属性key

属性[变量] = "值";示例：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>动态增加key</title> </head> <body> <scrip.

2020-10-24 15:26:11 311

原创 vue项目游客模式下的数据封装

简历游客模式的数据：全局接口封装：调用没区别，还是本来的调法，不用任何改动，如图：

2020-09-30 11:53:48 74

原创 vue项目部署时有二级目录，页面路径前加固定前缀

比如：实现：config/index.js文件，build对象下的assetsPublicPath属性，值为你的前缀即可：src/router/index.js文件，加入base属性，值和上面的一样搞定！

2020-09-30 10:11:15 642

原创 git 改密码后 fatal: Authentication failed for “xxxxxxxxxxxxxxxxxxxxx“

需要改本地的git密码记录搞定！

2020-09-27 18:15:44 80

原创 git 删除线上仓库的分支

git push origin --delete 分支比如删除patch-1分支：刷新再看：

2020-09-27 15:33:09 263

原创 unicloud 介绍看官网【前端写接口不愁】

官网：https://uniapp.dcloud.io/uniCloud/READMEuniCloud 主要包括3部分：云函数：在云端运行的js代码。运行在定制过的node环境中，有良好的性能和强大的功能。ServerLess环境无需自行加购服务器处理增容，云函数按量付费，不管多大的并发都扛得住（阿里云serverLess已经经过了双11的考验）。数据库：可在云函数中读写的、基于 NoSQL 的 JSON 数据库。这种数据库对于前端工程师更自然，不需要学习SQL、不需要理解关系型和设计主键。存储

2020-09-25 12:12:24 478

原创 echarts折线图有两条虚线

itemStyle: { normal: { lineStyle: { //系列级个性化折线样式 width: 2, type: 'dashed' // 虚线 } }}

2020-09-18 09:57:45 325

原创 echarts柱状图，每根柱子颜色不一样

itemStyle: { normal: { color: function(params) { let colors = ['#23b2ff', '#6de5b7', '#f1af5a']; return colors[params.dataIndex]; } } }

2020-09-18 09:48:38 257

原创 js浏览器关闭 or 刷新

js浏览器关闭 or 刷新<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>浏览器关闭 or 刷新</title></head><body> <input type="button" onclick="disp_confirm()" value="Display a confirm box" /> <scri

2020-09-07 14:35:44 73

原创 .dmg文件转.iso的工具：dmg2img

正在转：已转完：

2020-09-01 09:41:29 158 2

转载 Whistle的使用

安装npm install -g whistle启动w2 start重启w2 restart停止w2 stophttps://juejin.im/post/6859305679006466055

2020-08-21 10:06:26 140

原创 js操作css变量（属性）

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> :root { --bg: white; }.

2020-08-20 16:44:02 212

原创 css选择前几个元素或者后几个元素

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #nth-test div:nth-child(-n + 4).

2020-08-18 11:42:40 1397

原创 vue项目有多个接口请求基路径url地址的配置方式

config/index.js文件：

2020-08-15 20:52:15 1836 7

原创解决vue项目中i18n data里切换翻译不生效

2020-08-12 13:22:15 405

原创 vue项目引入i18n国际化切换语言翻译功能

安装：npm install vue-i18n --save 建立语言资源： src/assets/languages例如中文和英文文件：英文文件：export default { menu: { home: "home", msg: "this is an about page" }, content: { main: "this is content" }}中文文件：export default { menu: { hom

2020-08-12 12:02:45 208

原创 html复杂表格，横向多级表头，纵向多级表头

th标签有两个属性可用于占位：rowspan=“数字” 表示该单元格占 n行colspan=“数字” 表示该单元格占 n列 <table class="table" cellpadding="1" cellspacing="1" border="1"> <tr> <th colspan="3" rowspan="2">用电分类</th>  <t

2020-08-06 10:19:17 512

原创 vue div模块位置拖动、宽高调整插件【vue-grid-layout】

github：https://github.com/jbaysolutions/vue-grid-layout安装：npm install vue-grid-layout --save引入：import VueGridLayout from 'vue-grid-layout';使用： data() { return { elements: [ { x: 0, y: 0, w: 2, h: 2, i: "0" }, { x: 2, y: 0, w: 2, h:

2020-08-05 13:40:32 525 2

原创内网ip对外访问，免费内网穿透，生成临时对外演示网址

下载工具：http://www.u.tools/安装完 alt+space 唤醒使用工具，安装内网穿透的插件：使用：效果：

2020-08-04 17:19:13 419

原创 vue 全局批量封装功能及调用

这样调用：或入口文件全局挂载到Vue上调用：效果：

2020-08-04 14:38:05 77

原创 vue 全局批量注册指令 directives

const directives = { focus: (el) => { el.focus(); }, }export default { install(Vue) { Object.keys(directives).forEach(item => { Vue.directive(item, { inserted: directives[item] }) }) }}import direct.

2020-08-04 14:22:43 366

原创 vue 全局批量注册过滤器 filters

export default { numberFormatter: (num, digits) => { const si = [ { value: 1E18, symbol: 'E' }, { value: 1E15, symbol: 'P' }, { value: 1E12, symbol: 'T' }, { value: 1E9, symbol: 'G' }, { value: 1E6, symbol: 'M' }, .

2020-08-04 13:55:31 131

原创 vue 小型状态管理器

大型项目中的数据状态会比较复杂，一般都会使用 vuex 来管理。但在一些小型项目或状态简单的项目中，为了管理几个状态而引入一个库，显得有些笨重。在 2.6.0+ 版本中，新增的 Vue.observable 可以帮助我们解决这个尴尬的问题，它能让一个对象变成响应式数据建立store文件：import Vue from 'vue'export const state = Vue.observable({ count: 0})export const mutations = { SET

2020-07-29 10:38:28 144

原创 vue实现导入excel文件

安装依赖：npm install -S file-saver xlsxnpm install -D script-loaderHTML部分：<div> <input type="file" @change="ImpData(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/

2020-07-27 18:08:41 273

原创 js 正则匹配，从字符串中提取数字

/[^\d.]/glet num = "谷(2588.7元/kwh)".replace(/[^\d.]/g, "");console.log(num);

2020-07-27 14:53:42 819

dmg2img.zip

.dmg文件转.iso的工具：dmg2img.dmg文件转.iso的工具：dmg2img.dmg文件转.iso的工具：dmg2img.dmg文件转.iso的工具：dmg2img.dmg文件转.iso的工具：dmg2img.dmg文件转.iso的工具：dmg2img.dmg文件转.iso的工具：dmg2img.dmg文件转.iso的工具：dmg2img.dmg文件转.iso的工具：dmg2img.dmg文件转.iso的工具：dmg2img.dmg文件转.iso的工具：dmg2img

2020-09-01