- 博客(35)
- 收藏
- 关注
RSS订阅原创 vue+Element-ui 导入excel文件生成json数据
1.首先安装依赖import XLSX from "xlsx";2.建立读取excel文件的js文件，以便调用// importExcel.jsreadExcel(file) { return new Promise((resolve, reject) => { const types = file.name.split(".")[1]; const fileType = [ "xlsx", "xlc", "xlm", "x
2021-12-02 15:00:48
1335
2
原创 tsconfig配置详解
{ "compilerOptions": { /* Basic Options */ "target": "es5" /* target用于指定编译后js文件里的语法应该遵循哪个JavaScript的版本的版本目标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */, "module": "commonjs" /* 用来指定编译后的js要使用的模块标准:
2021-10-18 16:04:13
805
原创 小程序写一个自适应内容的步骤条（极简代码）
先上一个效果图，本文主要是提供一个思路，具体的样式还是要根据自己的项目调整思路：核心是需要用到CSS的伪类，before - 画那条线，after - 画小方块。每个item相对定位，用padding-left把左边距空出来，伪类用绝对定位。下面直接上代码了HTML部分<view class="card-list process"> <block wx:for="list" wx:key="id"> <view wx:if="{{index==0}}" cl
2021-07-12 17:40:20
588
原创 微信小程序wxs将数字转换为汉字
/** * 将数字（整数）转为汉字 * @param num * @description 从零到一亿亿，需要小数的可自行截取小数点后面的数字直接替换对应arr1的读法就行了 */var convertToChinaNum = function (num) { var arr1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; var arr2 = ['', '十', '百', '千', '万', '十', '百', '千', '
2021-07-06 19:38:43
1460
原创 微信小程序编译报npm错误
手摸手带你操作错误截图如下，因为我的项目中使用了TS，所以会报。乱码的意思：‘npm‘ 不是内部或外部命令，也不是可运行的程序。1.首先确保你已经安装了nodeJS并且配置系统环境变量，然后会下面比较尴尬的局面，在外部的CMD命令npm是支持的，IDE里面不行2. 分析一下，可能是没有访问环境变量权限，于是已管理员身份重新打开IDE，果然！！！这个狗东西好了！如果你不想每次都右键打开，那你就如下操作，一劳永逸。...
2021-03-22 19:33:22
657
原创 手摸手教你在微信小程序中使用Less和SaaS（微信开发者工具版）
手摸手教你在微信小程序中使用Less和SaaS（微信开发者工具版）1. VScode安装Easy LESS2. VScode拓展文件夹下拷贝Easy LESS插件3.粘贴到微信开发者工具的拓展文件夹4.setting.json设置输出.wxss5.重启微信开发者工具前提：和别人的方法（微信IDE预览+VScode开发）不太一样，我是只使用微信开发者工具开发的。微信开发者工具早在 1.03.2004271 版本之后就开始支持扩展工具了，直接在微信开发者工具里使用的Easy LESS，功能和在VScode
2021-03-22 19:19:07
1781
2
原创 Canvas录制为webm视频文件
这段代码可以将Canvas录制为webm视频文件var canvas = document.getElementById("mycanvas");var stream = canvas.captureStream();var recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });console.log("开始录制");const data = [];recorder.ondataavailable = functi
2021-01-21 15:53:49
534
原创 原生js实现$on、$emit和$off
let obj = {};window.$on = (name, fn) => { if (!obj[name]) { obj[name] = []; } obj[name].push(fn);}window.$emit = (name, value) => { if (obj[name]) { obj[nam...
2019-10-18 11:10:06
1402
原创 windows系统使用tree命令生成项目目录结构
经常在一些技术文档中看到很好看的那种目录结构，如下：├── build├── config├── docs│ └── static│ ├── css│ └── js├── src│ ├── assets│ ├── components│ ├── store│ │ └── modules│ └── views│ ...
2019-06-19 09:46:14
1025
原创 win10 家庭中文版没有Hyper-V，这样安装一步搞定
Hyper-V是Windows自带的虚拟机产品，用的还挺顺手。但是在win10家庭版木有Hyper-V，这让人很DT，如果你和我一样DT，那请看下面的教程。1. 将如下代码添加到记事本中，并另存为Hyper-V.cmd文件pushd "%~dp0"dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txt...
2019-06-12 18:58:47
98549
71
转载 JS 毫秒倒计时
原文：https://www.cnblogs.com/seven077/p/9506765.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
2019-06-03 15:56:21
1031
原创 eggJS 代码调试，很详细！
1. 使用 日志输出 进行调试控制台输出console.log(); // haha使用 logger 模块框架内置了日志 功能，使用 logger.debug() 输出调试信息，推荐在应用代码中使用它。**// controllerthis.logger.debug(‘current user: %j’, this.user);// servicethis.ctx.log...
2019-05-13 20:26:24
8851
原创 eggJS 入门分享
eggJS入门分享快速初始化我们推荐直接使用脚手架，只需几条简单指令，即可快速生成项目:$ mkdir egg-example && cd egg-example$ npm init egg --type=simple$ npm i启动项目:$ npm run dev$ open localhost:7001启动后的界面注意：这里默认地...
2019-05-08 11:30:18
1521
原创 笔记：JS常用utils
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> </style></head><script type="text/javascript"> function...
2019-04-12 18:34:07
595
原创 eggJS 连接和使用Mongodb
开始之前先确保你的电脑已经装了mongoDB，且掌握了基本语法，如果没有请移至：教程：http://www.runoob.com/mongodb/mongodb-tutorial.html官网：https://www.mongodb.com/在学习 mongodb 的过程中需要熟悉几个名词以及他们对应的关系型数据库名词。关系型数据库 mongodb table co...
2019-03-14 18:46:37
4887
4
原创 HTML 模板引擎之Handlebars.js
模板原理模板的诞生是为了将显示与数据分离，模板技术多种多样，但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码介绍Handlebars是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板...
2019-03-12 18:29:35
502
原创 vue中使用Echarts利用watch做动态数据渲染
依旧直接上代码～首先安装引入Echarts，我是直接把Echarts挂到VUE全局变量上了//引入echartsimport Vue from 'vue';import echarts from 'echarts';Vue.prototype.$echarts = echarts;<template> <div class="demo-con...
2018-12-28 14:54:19
11194
原创 vue+elementUI组件table实现前端分页功能
前端分页和后端分页就是请求的差异，前端分页的话只请求一次，所以要在render table组件的时候控制下数据:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" //不多解释再就是设置分页器total等于table数据的长度:total="tableData.length"点击分页...
2018-12-28 11:39:09
18821
23
原创 vue+elementUI组件tree实现单选加条件禁用
elementUI tree：http://element.eleme.io/#/zh-CN/component/tree官方给出的API还是挺全的，但是示例木有给全，有几个API的说明也不是很能理解～tree实现带选择框的要加上node-key="id" show-checkbox两个属性，<el-tree ref="tree2" :data="data2" :props="d...
2018-12-26 10:41:09
18344
7
原创 eggJS 后端定时任务
编写定时任务所有的定时任务都统一存放在app/schedule目录下，每一个文件都是一个独立的定时任务，可以配置定时任务的属性和要执行的方法。一个简单的例子，我们定义一个定时网页转pdf的定时任务，就可以在app/schedule目录下创建一个 outputPDF.js文件const Subscription = require('egg').Subscription;/...
2018-12-25 10:30:11
4564
原创 vue+elementUI实现类似浏览器打开网页的功能（页签功能）
代码没几句，直接上个完成的例子： <template> <div class="animated fadeIn"> <el-card class="box-card"> <p v-for="(nav, index) in navs" :key="index">
2018-12-19 11:57:24
6436
原创 JS 实现textarea一行18个字符最多输入5行的需求
看到这个需求有一部分人认为给textarea加上rows和cols就可以满足需求，emmmm...可以看看属性的定义。所以还是要用JS来计算的，就是在value改变的时候调用计算函数，直接附上完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
2018-12-19 11:49:04
1794
原创 eggJS egg-joi优雅的参数校验
刚刚接触egg没多久，一直使用egg自带的validate做校验，emmm～用过的都知道，之前用hapi的时候感觉joi用着很舒服，然后在网上找了一个插件egg-joi。 我的项目结构 安装依赖npm i egg-joi --save引入插件 app/config/plugin.jsexports.joi = { enable: true, package...
2018-10-29 11:25:27
4873
原创 react 拖拽组件（PC端）
简单封装了下import React from 'react'const addEvent = (el, event, handler) => { if (!el) return; if (el.attachEvent) { el.attachEvent('on' + event, handler); } else if (el.addEventListener) {...
2018-10-11 10:02:09
7239
2
原创 react antd Tabs组件属性activeKey使用方法
项目使用过程中发现的，网上没有找到相关文章，可能就我（菜鸟）遇到了吧，哈哈～提供了这个属性，但是官网没有给出相关demo，开始是通过ref设置activeKey发现无效，最后找到解决办法，代码如下：<Tabs ref={(e) => { this._Tabs = e }} activeKey={this.state.index} onChange{(key)=>{...
2018-10-10 14:47:11
22593
8
原创 RN Animated实现一个小手loop动画，可用于引导点击
直接上代码：class HandIcon extends Component { constructor(props) { super(props); this.state = { offset: new Animated.Value(0), } } componentDidMount() {...
2018-09-12 17:45:07
7569
原创 RN 事件穿透pointerEvents
有时需要点击上层组件触发下层组件的操作，就要用到事件穿透，之前写web知道pointer-eventspointer-events是CSS3中又一冉冉的属性，其支持的值牛毛般多，不过大多都与SVG相关，我们可以不用理会。当下，对于偶们来讲，与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto”类似，一般在一些特殊场合露一手，...
2018-09-12 17:37:48
6538
原创 RN 使用react-native-qrcode生成二维码
生成二维码经常需要，分享一个插件react-native-qrcode先npm install下，然后引用即可npm install react-native-qrcode --saveimport QRCode from 'react-native-qrcode';一个demo： import React, { Component } from 'react'imp...
2018-09-12 17:15:59
3505
原创 RN AsyncStorage的使用
做web的时候保存数据常用的是cookie或者localstorage，那在移动端用什么呢？RN提供了AsyncStorage！代码走起：AsyncStorage在RN里自带的，不用npm install，直接引用即可～import { View, Text, StyleSheet, AsyncStorage } from 'react-native';操作就是增删改查，先是增（...
2018-09-12 17:07:46
1234
原创 RN Animated做个两张图渐隐渐显切换的动画效果
RN小白，刚学一个礼拜，项目中需要这个效果，感觉挺好玩，分享出来。话不多说直接上代码～/** * duration: 1400, // 动画执行时间 * delay: 2000, // 动画间隔时间 * easing: Easing.linear, // 缓动函数 * startOpacity: 0, // 动画初始透明度 * endOpa...
2018-09-12 16:48:19
2333
4
原创 RN Animated做个画线的动画
RN小白，刚学一个礼拜，项目中需要这个效果，感觉挺好玩，分享出来。话不多说直接上代码～import React, {Component} from 'react'import {Text, Animated, Easing, StyleSheet, View} from 'react-native'class LinePlus extends Component { cons...
2018-09-12 16:35:46
551
原创 RN 使用Image包裹TouchableNativeFeedback出现的问题
本组件用于封装视图，使其可以正确响应触摸操作（仅限Android平台）。在Android设备上，这个组件利用原生状态来渲染触摸的反馈。目前它只支持一个单独的View实例作为子节点。在底层实现上，实际会创建一个新的RCTView节点替换当前的子View，并附带一些额外的属性官网例子：renderButton: function() { return ( <Toucha...
2018-09-12 16:13:26
435
转载 笔记：CSS改变webkit的浏览器滚动条样式
直接上代码 Title ::-webkit-scrollbar/*整体部分*/ { width: 10px; height:10px; } ::-webkit-scrollbar-track/*滑动轨道*/ { -
2017-03-08 17:18:51
256
转载 笔记：Jquery遮罩ShowLoading组件
1、意义开发项目中，前台的页面要发请求到服务器，服务器响应请求返回数据到前台，这段时间，有可能因为返回的数据量较大导致前台页面出现短暂性的等待，此时如果用户因不知情而乱点击有可能造成逻辑混乱，所以此时需要在加载数据中将前台进行提示在加载数据中，利用jquery的遮罩组件可以完成这个功能需求。 2、实现步骤（1）下载showLoading.css jquery.showLoading...
2017-02-28 14:43:18
3951
1
原创 笔记：IE上new Date()值为NaN解决办法
主要的变化是对默认的日期格式进行了转换， 基于'/'格式的日期字符串，才是被各个浏览器所广泛支持的，‘-’连接的日期字符串，则是只在chrome下可以正常工作。 '2017-02-28'是无法被各个浏览器中，使用new Date(str)来正确生成日期对象的，正确的用法是'2017/02/28’。代码：str.replace(/-/g,"/"));
2017-02-28 12:53:06
482
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人