前端js
木易66丶
固本而培元,温故而知新!
展开
-
vue自定义轮播组件
vue自定义轮播组件原创 2023-01-06 17:22:00 · 862 阅读 · 0 评论 -
移动端和PC端判断浏览器环境
根据浏览器内核判断浏览器环境原创 2022-12-19 09:01:13 · 226 阅读 · 0 评论 -
使用nvm安装管理node版本
1.使用场景:当本地项目过多时,不同项目创建使用不同的node版本,我们需要安装不同版本的node,如果反复安装卸载会很麻烦,nvm由此而生。2.下载地址:下载地址:https://github.com/coreybutler/nvm-windows/releaseswindows用户选择 nvm-setup.zip 下载安装解压后为可执行文件,安装时会检测本地node,提示点是3.打开nvm安装目录,运行nvm -V 查看版本4.其他使用指令$ nvm -h //查..原创 2021-10-25 18:21:26 · 714 阅读 · 0 评论 -
vue通过监听动态设置页面样式
data(){ return { topHeight: 300, clientHeight: 0 }}mounted(){ this.clientHeight=`${document.documentElement.clientHeight}` let that=this window.onresize=function(){ that.clientHeight=`${document.documentElemen.原创 2021-07-20 09:50:35 · 686 阅读 · 0 评论 -
Vue 中 Axios 的封装和 API 接口的管理
参考文章https://mp.weixin.qq.com/s/__riUPMh4yRB9J57VGQO4g1.http.jsimport axios from "axios";import { Message } from "element-ui";import _ from "lodash";// create an axios instanceexport default function createRequest(config) { config = _.assign(原创 2021-05-27 16:17:22 · 130 阅读 · 0 评论 -
vue-treeselect极速实现级联选择功能
显示效果如下:使用方式:1.先安装npm install --save @riophae/vue-treeselect2.组件中引入//importthecomponentimportTreeselectfrom"@riophae/vue-treeselect";//importthestylesimport"@riophae/vue-treeselect/dist/vue-treeselect.css";3.组件注册components...原创 2021-05-27 10:21:36 · 2085 阅读 · 0 评论 -
折线图组件封装及数据处理
//折线图组件封装及数据处理<template> <div class="pancelDiv" :id="id" :style="{ height: height, width: width }"></div></template><script>import * as echarts from 'echarts'export default { props: { id: { .原创 2021-05-24 16:40:26 · 254 阅读 · 0 评论 -
基于Ant Design of Vue的级联导航菜单组件
1.显示效果如图2.数据格式3.组件代码<template> <!-- 数据菜单 --> <!-- 这里面只写到了第四层, 需要用到多少,按照这个格式 续写下去就行,核心就是如果 下面还有一层,那么他只能是 这个标签a-sub-menu,只有根 节点才能用这个标签a-menu-item! 另外感觉可以优化的地方是可以将 template单独封装成组件,item原创 2021-05-18 23:05:02 · 1092 阅读 · 0 评论 -
es6变量赋值及数据处理
1.修改对象中的元素const{phone,certType,certCode,birthday,name:driverName,gender:sex}=this.userInfo;2.增加或移除对象中的元素const original = { a: 1, b: 2 }const copy = { ...original, c: 3 } // copy => { a: 1, b: 2, c: 3 }const { a, ...noA } = copy // no...原创 2021-04-30 16:28:41 · 136 阅读 · 0 评论 -
elementUI el-table组件封装(自定义列)
<template> <div class="loading-table" v-loading="tableLoading"> <el-table :data="tableData" border stripe> <el-table-column type="index" label="序号" align="center" width="80"> <template slo.原创 2021-04-08 17:51:26 · 1649 阅读 · 6 评论 -
vue中异步函数async和await的用法
用 async/await 来处理异步 昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,也是需要学习一下了。 先说一下async的用法,它作为一个关键字放到函数前面,async function timeout() { return 'hello world';}只有一个作用, 它的调用会返回一个promise对象。调用一下看看就知道了,怎么调用?async函数也是函数,所以它的...转载 2021-03-16 11:13:38 · 967 阅读 · 0 评论 -
JavaScript前端代码规范
HTML篇#1. 标准模板<!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"> <lin原创 2021-03-15 15:56:23 · 1205 阅读 · 1 评论 -
常用知识点(好记性不如烂笔头,站在岸上学不会游泳)
1.闭包https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures2.this指向https://blog.51cto.com/11871779/21295223.http协议详解https://www.cnblogs.com/an-wen/p/11180076.html4.flex布局http://www.ruanyifeng.com/blog/2015/07./flex-grammar.html5.pr原创 2021-03-02 23:16:28 · 411 阅读 · 0 评论 -
JS进阶必备
01.数组扁平化数组扁平化是指将一个多维数组变为一个一维数组const arr = [1, [2, [3, [4, 5]]], 6];// => [1, 2, 3, 4, 5, 6]方法一:使用flat()const res1 = arr.flat(Infinity);方法二:利用正则const res2 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',');但数据类型都会变为字符串方法三:正则改良版本转载 2020-10-28 17:03:46 · 208 阅读 · 0 评论 -
百度地图开发demo
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {.原创 2020-10-14 12:12:12 · 199 阅读 · 0 评论 -
js深拷贝,删除复制添加节点dom
业务如下:dom中绑定循环数据深拷贝复制:copyThisDom(val, index) { const arr = JSON.parse(JSON.stringify(this.treatmentMethodData[index]));}删除节点:// 清除某一条数据val代表选定的当前数据,index代表数据下标 closeThisDom(val, index) { console.log('clean:', index) t原创 2020-07-07 15:03:13 · 710 阅读 · 0 评论 -
js数据处理
1.const arr = { a:[{item1: 1,item2: 2},{item1: 111,item2: 222},{item1: 11,item2: 22}],b:[{item1: "b1",item2: 2},{item1: 1,item2: 2},{item1: 1,item2: 2}],c:[]}const arr1 = [] Object.keys(arr).for...原创 2019-12-18 09:08:48 · 147 阅读 · 0 评论 -
Ecahrts饼图参数详解
https://blog.csdn.net/sleepwalker_1992/article/details/82532210原创 2019-10-31 17:04:10 · 956 阅读 · 0 评论 -
vue前端跨域问题解决思路
一.如果Content-Type设置为“application/x-www-form-urlencoded;charset=UTF-8”无论是POST请求还是GET请求都是可以通过这种方式成功获取参数,但是如果前端POST请求中的body是Json对象的话,会报上述错误。解决办法:返回请求参数时更改请求类型及请求头,如下export function addRegion(params...原创 2019-10-16 16:58:14 · 1818 阅读 · 0 评论 -
上传图片或者头像实时刷新
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">&a原创 2019-01-19 14:37:38 · 894 阅读 · 0 评论 -
利用javascript保存浏览器div内容为图片
html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。1.http://html2canvas.hertzen.com/ 访问官网,demo拿走,js包也拿走,thanks for Niklas von Hertzen 0.02.个人写的demo...原创 2018-11-29 14:47:59 · 2176 阅读 · 0 评论 -
node.js入门——sublime的配置及使用
Node.js开发入门(一)——安装Node.js及编辑器配置https://blog.csdn.net/falconli/article/details/79284274原创 2018-11-03 16:14:43 · 581 阅读 · 0 评论 -
vue实际项目中的逻辑优化
以下为原创链接:https://blog.csdn.net/qq_24309787/article/details/813546782RRJMBXW33-eyJsaWNlbnNlSWQiOiIyUlJKTUJYVzMzIiwibGljZW5zZWVOYW1lIjoi5b285bK4IHNvZnR3YXJlMiIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVlRW...原创 2020-03-29 08:57:16 · 1004 阅读 · 0 评论 -
mui实现二维码扫描功能
注意事项:1.mui扫描二维码需在HBuilder中真机运行调试,不然无法实现扫描2.正常情况下扫描结果为一个链接,可以通过定义方法将此链接传到后台,此处为ajax方式提交 3.以下为项目代码 ,使用时需要引入mui的样式及js:<!doctype html><html> <head> <meta char...原创 2018-10-19 15:09:24 · 4786 阅读 · 7 评论 -
tp5通过链接跳转实现选项卡切换动态加载页面数据,并通过session动态加载样式
1.通过sx参数控制页面数据加载2.通过session动态加载样式 $(".soft ul li").click(function(){ var picTabNum = $(this).index(); //console.log("当前图片标题下标是:"+picTabNum); ...原创 2018-10-08 13:31:39 · 1333 阅读 · 0 评论 -
百度地图api调用及开发
首先感谢强大的百度地图api~1.使用百度地图接口首先申请key 获取地址:http://lbsyun.baidu.com/apiconsole/key/create2.百度地图开放平台:http://lbsyun.baidu.com/ 右上角导航栏点开发文档可以获取api和各个版本的SDK3.另外附上网上一段麦子学院开源的开发百度地图接口的链接:http://...原创 2018-07-30 21:48:54 · 1708 阅读 · 0 评论 -
js粒子特效——particles
链接:https://pan.baidu.com/s/1KqsZ5I8Qjz_J7ysQtw8tMw提取码:qy381.下载并引入particles.js2.<div class="linebox"><div id="particles-js"></div></div>原创 2019-03-02 11:07:23 · 1842 阅读 · 0 评论 -
js获取验证码倒计时(两种方式,亲测可用)
一.当标签为按钮是,设置disabled属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&...原创 2019-04-15 08:53:43 · 595 阅读 · 0 评论 -
页面添加置顶返回按钮
网页添加置顶返回按钮 <div class="this-topping" style="display: none;"> <span class="icon iconfont icon-dingbu"></span> </div> $(window).scroll(function(event) ...原创 2019-04-29 14:29:23 · 818 阅读 · 0 评论 -
jq实现侧滑导航
代码:<!DOCTYPE html><html><head> <title>测试</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <li...原创 2019-05-05 11:52:17 · 547 阅读 · 0 评论 -
jq遍历input(type='text'),并实时监听文本框内容是否为空及全选反选
一.如下图,监听四个文本框,输入任意三项即可进行查询,否则无法进行查询操作<!DOCTYPE html><html><head> <title></title></head><body><input type="text" name="" value="a"/><input...原创 2019-05-09 14:16:45 · 1860 阅读 · 0 评论 -
apicloud前后端分离实现支付宝支付
项目架构:php+前端+apicloud1.加入支付模块(注:alipay本地可以,打包上线有问题;alipayPlus本地执行不了,线上ok,)2.前端代码<!doctype html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta ...原创 2019-06-28 18:14:06 · 2011 阅读 · 0 评论 -
前端jq实现中英文切换(i18n国际化方式,apicloud打包后也适用)
1.项目文件及目录2.准备jsgithub下载地址:https://github.com/T-baby/jquery.i18n/releases3.页面代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g...转载 2019-07-16 17:57:38 · 2103 阅读 · 2 评论 -
各种cdn插件下载或引入链接
1.tmplhttps://github.com/BorisMoore/jquery-tmpl2.各种cdnhttps://www.bootcdn.cn/3.jquery<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>4.bootstrap&...原创 2019-08-13 18:10:11 · 2177 阅读 · 0 评论 -
js遍历查看对象
param为要查看的对象,Object objectvar property='';for(var item in params){ property += "属性:" + item + "数值:" + params[item] + "\n";}console.log("参数:"+property);原创 2019-10-09 16:50:25 · 150 阅读 · 0 评论 -
jquery&kindeditor文本编辑器插件
百度网盘下载插件:https://pan.baidu.com/s/1zQb4DUF1Sh0uNsMXp5nYOA 密码:1aum引入js:<script charset="utf-8" src="../../kindeditor/kindeditor-all-min.js"></script><script charset="utf-8" src=...原创 2018-06-23 14:06:34 · 1683 阅读 · 2 评论