叫我官人

原创 vant 图片上传

afterRead (event) { //console.log(event) event.status = 'uploading'; event.message = '上传中...'; if (/\/(?:jpeg|png)/i.test(event.file.type) && event.file.size > 500000) { // 创建Canvas对象(画布) let canvas =...

原创 vue 移动端底部被键盘顶起

这个问题相信做移动端开发的童鞋会有深刻体会，以前用jq开发时就很头疼这个问题，每次底部footer部分需要用position:fixed，如果页面内容不是很长，没有超出屏幕范围，那就还好，没有问题；一旦超出屏幕范围，当你点击输入框，弹出键盘时，底部固定定位的footer部分就会被顶起来，很丑！有木有。在键盘弹起时，页面高度变小，底部固定定位上升，所以我们只需要在页面高度变小时，隐藏底部footer部分，当键盘消失时再显示底部footer部分就可以解决问题了。解决方法：检测浏览器的resize事件，当高度

原创 element 级联懒加载

<template> <div> <div class="search-term"> <el-form :inline="true" :model="searchInfo" class="demo-form-inline"> <el-form-item> <el-input .

原创 es6 树结构递归

recursion(data, current) { let result = []; if (!data) { // return; 中断执行 return; } for (const i in data) { const item = data[i]; if (item.parentId == current) { result.push(item); .

原创 微信小程序--引入第三方框架 Vant (配合vsCode)

1.新建小程序项目文件2.初始化生成项目结构如下，同时我们手动在根目录下新建文件夹miniprogram(为引入vant 做准备)3. 鼠标右键miniprogram文件夹，选在在终端打开输入命令：npm init（记得以管理员身份运行开发工具）,然后一直回车，直至在miniprogram文件夹下，生成package.json文件。3.安装依赖通过npm安装,执行以下命令1：npm install --production2:npm i...

原创 将普通的数组转换为父子结构

//将普通的数组转换为父子结构transformTozTreeFormat: function (sNodes) { var i, l; var r = []; var tmpMap = {}; for (i = 0, l = sNodes.length; i < l; i++) { tmpMap[sNodes[i].id] = sNodes[i]; } for (i = 0, l = sNodes.length; i < l; .

转载 js节流与防抖，防止重复提交、防止频繁重复点击

一、节流、防止短时间多次提交操作现有一提交按钮<button id="submit">提交</button>点击后提交表单信息。但是经常会出现： 1.不小心点了多次，就提交了多次2.网络卡顿的时候网页没反应，用户频繁点击的情况// 即这种写法：var subBtn = document.getE...

原创 JS数组的交集、并集、差集

需求1有两个数组ary1,ary2实现去除ary2与ary1相同的元素打印 -->需求2获得ary1与ary2重复的元素打印 -->需求3去除ary1与ary2重复的元素打印 -->SetES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。...

原创 el-tree 结构使用

<template> <div> <el-tree :data="datas" show-checkbox node-key="id" ref="tree" default-expand-all :default-checked-keys="['01','022']" :...

原创 判断两数组之间是否存在交集关系

/* * @Author: doinb * @Date: 2019-07-29 14:46:09 * @LastEditTime: 2019-08-02 14:52:52 *///判断两数组之间是否存在交集关系let arr1=[1,2,3] let arr2 = [4]let arr3 = [1,2] // 使用includes()、indexOf()// eg1: ar...

原创 vue 登录注册验证

<template> <div class="page"> <div class="login-box"> <p data-v-032893be class="title">欢迎登录</p> <el-tabs v-model="activeName"> <el-tab...

转载 vue 引入svg

创建SvgIcon组件<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg></template><script>export default { ...

原创 ES6删除和过滤对象中部分属性

let student={ age: 20, name: '官人', sex: "男" } // func1: const param = (({name,sex}) => ({name, sex}))(student) console.log(param) // {name: "官人"，sex...

转载 vue关于路由懒加载方案（改进）

路由懒加载当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。如：const Foo = () => import('./Foo.vue')当你觉得你的页面热...

原创 修改数组对象的属性（key）名

例如：把如下data1的key名称修改成data2中的key名称data1: [ { appName: '应用1', capacity: 233456 }, { title: '应用2', key: 124535 }] data2: [ { name: '应用1', value: 233456 }, { name: '应用2', value: 124535 } ]方法： con...

原创 js遍历技巧和方法优化

使用 Array.includes 来处理多重条件// 条件语句function test(fruit) {  if (fruit == 'apple' || fruit == 'strawberry') {    console.log('red');  }}如果我们想要匹配更多的红色水果呢，比方说还有很多红色水果？我们是不是得用更多的 || 来扩展这条语句？function ...

原创 vuex封装

vuex的使用1.组件中通过dispatch事件触发actions eg： methods: { 事件名: function() { this.$store.dispatch("键值名", 需要存储的值); }, }2.通过actions进行commit提交给mutation eg:action.js ...

原创 flutter + 夜神模拟器连接问题处理

adb connect 127.0.0.1:62001当出现链接失效时，且提示：adb unable to connect to 127.0.0.1:62001: cannot connect to 127.0.0.1:6200: 由于目标 计算机积极拒绝，无法连接。（PS:输入此命令前提是需要将夜神模拟器中的bin路径添加到path环境变量中）开始查找原因：1）关闭AS和夜神进程2）cm...

转载 Echarts数据可视化全解注释

https://blog.csdn.net/luanpeng825485697/article/details/76691965

原创 js对时间戳的转换

add0(m) {return m &lt; 10 ? "0" + m : m;},format(shijianchuo) {//shijianchuo是整数，否则要parseInt转换var time = new Date(shijianchuo);var y = time.getFullYear();var m = time.getMonth() + 1;var...

转载 vue3.0快速创建项目

https://blog.csdn.net/xuqipeter/article/details/80452271

原创 TradingView 相关自定义参数配置

1，禁用自带的一些功能disabled_features：[//开启图表功能的字符串文字允许将用户设置保存到本地存储'header_symbol_search'，//头部搜索“header_widget_dom_node”，//隐藏头部组件'source_selection_markers'，//禁用系列和指示器的选择标记“header_indicators”，//图标指标...

原创 vuex一个demo轻松理解

 1.安装vuex$ npm install vuex --save2.在src目录下新建store文件和store.js3.store.js// store.jsimport Vue from 'vue'import VueX from 'Vuex'Vue.use(VueX);const store = new VueX.Store({ //state属性...

原创 vue项目中如何实现国际化

 一、实现国际  首先，我开发是以 vue 为技术栈，所以如题用的国际化插件是 vue-i18n，附上 github 传送门。1、我们得先有开发环境，先有项目跑起来，我推荐如果是喜欢用 vue 的小伙伴，可以尝试 vue-cli　官方脚手架。这边有我整理的一个脚手架 demo ，有助于你快速的进行 vue 模块化开发。2、我们需要安装 vue-i18n, 推荐 npm 包依赖：...

原创 Vue history/hash模式打包页面空白处理

相信很多新手在history/hash模式下被坑的很惨，处理history模式下页面打包空白，经测试ok一、vue项目携带一个#会对开发造成一定的影响：1、微信三方登录回调地址，有#号时，接收不到code参数2、微信H5支付的回调地址，不允许有#3、App分享，处理特殊字符时，可能会对#进行编译4、有点影响美观现在网站大多有三方登录，支付等功能，存在#，项目开发就存在很大...

原创 vue使用socket.io做到数据长链接

vue中使用socket协议vue-cli 脚手架目录结构1.参照vue-socket.io的git地址说明文档进行安装npm install vue-socket.io2.main.js里面注册一下。vue.use 里面的链接是后台的提供给你的socket地址// socketimport VueSocketio from 'vue-socket.io';Vue.use...

原创 css坑点

1、flex布局flex布局2、box-shadow阴影 box-shadow: h-shadow(必选) v-shadow(必选) blur spread color inset;box-shadowExample： box-shadow:0 0 20rpx #aaaaaa;3、line-gradient渐变 background: linear...

原创 js时间相关处理

计算时间差原理：getTime()方法方法定义： getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。通常我们计算时间差都是通过获取两个时间数据，然后分别使用getTime（）方法返回与固定的1970 年 1 月 1 日的时间差，通过对返回毫秒数的差，换算成时间单位，得出两个时间的时间差。开始操作：首先你会有一串初始的时间数据，然后通过 new Date...

原创 从条纹边框的实现谈盒子模型

类似下面这个图形，只使用一个标签，可以有多少种实现方式：  假设我们的单标签为 div: &lt;div&gt;&lt;/div&gt; 定义如下通用 CSS: div{    position:relative;    width: 180px;    height: 180px;} 这一题主要考查的是盒子模型 Box Mo...

原创 VSCode 快捷键和开发插件

VS Code 的常用快捷键和插件一、vs code 的常用快捷键1、注释：　　a) 单行注释：[ctrl+k,ctrl+c] 或 ctrl+/　　b) 取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)　　c) 多行注释：[alt+shift+A]　　d) 多行注释：/**2、移动行：alt+up/down3、显示/隐藏左侧目录栏 ...

原创 vue 吸顶导航

 &lt;!-- 吸顶 --&gt;&lt;template&gt; &lt;div class="scroll"&gt; &lt;div class="header"&gt;header&lt;/div&gt; &lt;div class="nav" :class="navBarFixed == tru

原创 画图解析JS执行过程（js进阶堆栈）

转载 移动端H5页面注意事项

1. 单个页面内容不能过多设计常用尺寸：750 x 1334 / 640 x 1134，包含了手机顶部信号栏的高度。移动端H5活动页面常常需要能够分享到各种社交App中，常用的有 微信、QQ 等。使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏，在qq内置浏览器里不止有 顶部导航，底部也有 操作栏（safari浏览器也一样），这些都会占用设计稿显示区域，因此在 设计环节 就需要...

转载 移动端H5页面开发遇到的坑和解决办法

 1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有...

转载 vue+vuex+axios做登录、注册页权限拦截

在GitHub上有很多写好的模板，这个项目也是基于模板做的。现在记录一下我做的过程1、修改config文件夹里的dev.env.js里的BASE_API，把地址改成请求后端的公共部分 BASE_API: '"http://192.168.xx.xx"', 2、接下来就是操作src文件，先在 views里写好vue组件（login.vue,regist.vue），写好到rou...

转载 移动端HTML5开发心得

1，iOS里固定中有输入或者textarea，用户在里面输入文字，触发键盘，固定容器会客显示，而不是是连续悬浮      解决办法：http：  //dwz.cn/CrwNz2，移动端点击时间300ms的延迟      解决办法：zepto.js或者百度touch.js或者是fastclick.js3，zepto的触摸问题：swipe事件在小米1等低端手机不支持基本不用zepto...

转载 CSS布局方案

我们在日常开发中经常遇到布局问题，下面罗列几种常用的css布局方案话不多说，上代码！ 居中布局 以下居中布局均以不定宽为前提，定宽情况包含其中 1、水平居中  a) inline-block + text-align .parent{text-align: center;}.child{display: inline-block;}...

原创 windows + flutter + vscode 安装，配置，运行（详细版本）

 第一步：安装Git下载地址：https://git-scm.com/download第二步：下载Flutter SDK  Windows桌面右键点击git base here。当然你也可以选择一个文件夹打开git 命令行窗口，输入以下命令下载Flutter SDK。git clone -b alpha https://github.com/flutter/flutter.git...

原创 js一道面试题的艺术

for (var i = 0; i &lt; 5; i++) { console.log(i);}“你说说这几行代码会输出什么？”当面试官在 Sublime 打出这几行代码时，我竟有点蒙蔽。蛤？这不是最简单的一个循环吗？是不是有陷阱啊，我思索一下，这好像和我看的那个闭包的题很像啊，这面试官是不是没写完啊？有毒啊。“应该是直接输出 0 到 4 吧...”，我弱弱的说到。“是...

原创 vue进阶面试题

1、active-class是哪个组件的属性？嵌套路由怎么定义？答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 答：在router目录下的index.js文件中，对path属性加上/:id。  使用router对象的params.id 3、vue-router有哪几种导航钩子？    答：三种，一...