- 博客(34)
- 收藏
- 关注
RSS订阅原创 vue实现文本复制
PC端import { message } from 'ant-design-vue';export const clipBoard = (value: string) => { const textarea: HTMLTextAreaElement = document.createElement('textarea'); textarea.setAttribute('readonly', 'readonly'); textarea.value = value; document
2021-10-29 11:45:20
2111
1
原创 Node.js学习笔记（三）（fs模块）
fs.stat 文件信息fs.mkdir 创建目录fs.readdir 读取目录fs.rmdir 删除目录fs.writeFile 写入文件fs.readFile 读取文件fs.appendFile 追加文件fs.rename 1、重命名 2、移动文件fs.unlink 删除文件fs.createReadStream 读取文件流fs.createWriteStream 写入文件流rs.pipe(ws) 管道流const fs = require('fs');fs.stat(.
2021-06-30 16:52:57
231
原创 Webpack学习笔记(三)（基础配置详情）
1、entryentry: 入口起点string => ‘./src/index.js’ 单入口打包形成一个chunk，输出一个bundle文件，chunk名称默认为mainarray 多入口 所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件 =>只有在HRM功能中让html热更新生效（开发模块）object 多入口 有几个入口文件就形成几个chunk，输出几个bundle文件，chunk名称为对象的key值1 entry: './src/ind
2021-06-18 16:42:20
196
原创 Webpack学习笔记(二)（优化配置）
webpack优化配置1、开发环境性能优化1.1 HMR(模块热替换)hot module replacement 热模块替换 / 模块热替换作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）极大提升了构建速度代码：只需要在 devServer 中设置 hot 为 true，就会自动开启HMR功能（只能在开发模式下使用）devServer: { contentBase: resolve(__dirname, 'build'), compress: true,
2021-06-17 14:22:46
235
2
原创 Webpack学习笔记(一)（开发及生产基本配置）
一、Webpack简介1.1 webpack是什么webpack 是一种前端资源构建工具，一个静载模块打包器。在webpack看来，前端的所有资源文件（js | json | css | img | less …）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。1.2 webpack核心概念Entry入口：指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。Output输出：指示webpack打包后的资源输出到哪里去，以及如何命名。Load
2021-06-16 14:49:30
185
1
原创 前端实用小技巧
1、css 一行文本超出隐藏overflow: hidden;text-overflow: ellipsis;white-space: nowrap;2、css 多行文本超出隐藏display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;3、解决移动端滑动不流畅overflow: auto;-webkit-overflow-scrolling: touch;4、
2021-02-25 10:13:41
158
1
原创 解决：input输入框里的placeholder 在ios设备上不垂直居中
input输入框里的placeholder 在ios设备上不垂直居中解决：input{ line-height:normal }
2020-08-28 11:55:37
1702
原创 vue实现文字展开收起
思路：主要是css上可以分为两部分，第一部分展示前面两行，第二部分会根据第一部分的行数判断缩进的大小，然后展示第三行。最后通过背景色的控制让两者看上去是一段文字。html<div :class="showTotal ? 'total-introduce' : 'detailed-introduce'"> <div class="intro-content" :title="introduce" ref="desc"> <span class="mer..
2020-06-08 10:51:04
5663
2
原创 keep-alive生命周期
keep-alive：主要用于保留组件状态或避免重新渲染。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。当组件在 keep-alive内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。1.activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated2.deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated..
2020-05-19 11:30:03
3553
原创 验证手机号码
^(?:(?:\\+|00)86)?1(?:(?:3[\\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\\d])|(?:9[1|8|9]))\\d{8}$
2020-04-02 16:12:48
423
原创 检查是否是移动端（Mobile）、ipad、iphone、微信、QQ等
function browserVersions () { let u = window.navigator.userAgent return { trident: u.indexOf('Trident') > -1, // IE内核 presto: u.indexOf('Presto') > -1, // opera内核 webKit: u.index...
2019-05-08 11:05:01
905
原创 解决H5页面软件盘弹出压缩页面问题
var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);if(isAndroid){ var Height = window.inner...
2019-05-08 11:03:51
426
原创 ios下去掉alert的url
window.alert = function(name){ var iframe = document.createElement("IFRAME"); iframe.style.display="none"; iframe.setAttribute("src", 'data:text/plain,'); document.do...
2019-05-08 10:58:42
226
原创 Node.js学习笔记（二）（npm、package.json、commonJs）
npmnpm是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。查看 npm 版本npm -v安装模...
2019-02-19 15:41:21
316
原创 Node.js学习笔记（一）（安装、http模块、url模块）
Node简介Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的...
2019-02-19 13:02:51
1629
原创 Vue-cli+Element（table多级表头及遍历表头）
&amp;lt;el-table :data=&quot;tableData&quot; height=&quot;600&quot; style=&quot;width: 100%&quot;&amp;gt; &amp;lt;el-table-column :label=title[key] v-for=&qu
2019-01-22 12:44:26
7522
原创 Vue-cli+Element（button更改按钮默认样式）
<el-button type="primary">主要按钮</el-button> /* 更改element-UI按钮样式 */ .el-button--primary{ color: #fff; background-color: #FF69B4; border-color: #FF69B4; } .el-button--...
2018-12-25 16:46:22
27689
4
原创 Vue报错（Property or method "xxx" is not defined on the instance but referenced during render.）
报错如下：Property or method “xxx” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initi...
2018-12-14 12:57:12
209089
51
原创 Vue报错（the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" ）
报错如下：the “scope” attribute for scoped slots have been deprecated and replaced by “slot-scope” since 2.5.The new “slot-scope” attribute can also be used on plain elements in addition to to denote sc...
2018-12-13 15:07:13
7051
1
原创 Vue-cli+Element （阻止表单输入框回车刷新页面）
添加回车事件@keyup.enter.native<el-form-item> <el-input placeholder="姓名" v-model="name" @keyup.enter.native="getList(true)"> <i slot="suffix" class="el-input__icon
2018-12-10 16:45:58
1707
原创 Git基本常用命令
Git是目前世界上最先进的分布式版本控制系统。工作区：就是你在电脑上看到的目录，比如目录下testgit里的文件(.git隐藏目录版本库除外)。或者以后需要再新建的目录文件等等都属于工作区范畴。版本库(Repository)：工作区有一个隐藏目录.git,这个不属于工作区，这是版本库。其中版本库里面存了很多东西，其中最重要的就是stage(暂存区)，还有Git为我们自动创建了第一个分支mast...
2018-12-04 16:57:45
128
原创 二进制补零、取值，for..in Key排序问题
二进制（111111）每一位的数值代表着不同的含义，所以有了以下操作var arr= ''//二进制补零var TFlag=(Array(6).join(0) + Number(data.lines[0].TFlag).toString(2)).slice(-6);var base = {'5n':"一",'4n':"二",'3n':"三"};let other = {'2':"四 ",...
2018-12-03 10:37:36
598
原创 Vue-cli+Element （Upload 上传）
<el-form-item label="上传图片"> <div v-for="(item,key) in form.cadImg" :key='key' style="position:relative;display:inline-block;"> <img style="width: 150px; height: 150px;" alt=&
2018-11-28 13:32:17
426
原创 Vue-cli+Element （Pagination 分页）
start+number （0-10，10-10，20-10…）随手记下~略略略(ૢ˃ꌂ˂ૢ)&amp;amp;amp;amp;lt;template&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;el-pagination :page-size=&amp;amp;amp;quot;searchData.number&amp;amp;amp;quot;
2018-11-21 14:51:48
1051
原创 TypeScript 学习笔记（一）（安装、编译）
TypeScriptTypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。1、安装 npm install -g typescript2、创建TypeScript 文件 （文件名以 ts 结尾）.ts 文件不能被浏览器解析，所以要把 .ts 文件编译成浏览器可解析的 .js 文件index.tsconso...
2018-11-16 18:12:52
193
原创 React 学习笔记 （九）（UI框架Antd的使用及配置）
Antd使用1、安装Antdnpm install antd --save2、在项目的 src/App.css文件中引入Antd的 css@import '~antd/dist/antd.css';3、看文档使用 呐~自己看喽 https://ant.design/docs/react/introduce-cn举个栗子（Button）1）先把小Button 引入import...
2018-11-15 15:48:34
1306
原创 React 学习笔记 （八）（react-router 4. x 页面传值）
动态路由传值1.配置（根组件加载组件，注意path写法: /xxx/:id）&amp;lt;Route path='/product/:id' component={RouterProduct}&amp;gt;&amp;lt;/Route&amp;gt;2.跳转（注意写法:es6 模板字符串 键盘esc下面的按钮 不是单引号）&amp;lt;Link to={`/product/${val.id}`}&
2018-11-06 16:43:41
397
原创 React 学习笔记 （七）（路由及路由嵌套 react-router 4.x 基本配置及使用）
react-router根据用户访问的地址动态的加载不同的组件1.安装npm install react-router-dom --save2.引入import { BrowserRouter as Router, Route, Link } from &amp;quot;react-router-dom&amp;quot;;3.使用注意：&amp;amp;lt;1&amp;amp;gt;.要被根组件包裹&
2018-11-06 14:22:35
335
1
原创 React 学习笔记 （六）（生命周期）
&lt;Lifecycle&gt;&lt;/Lifecycle&gt;组件加载时触发的函数constructor —&gt; componentWillMount —&gt; render —&gt; componentDidMountimport React, { Component } from 'react';class Lifecycle extends Component {
2018-11-05 16:31:40
1356
1
原创 React 学习笔记 （五）（获取服务器API接口数据：axios、fetchJSONP）
axios1.安装 axios模块npm install axios --save2.引用 哪里使用引哪里 import axios from 'axios'3.使用import React, { Component } from 'react';import axios from 'axios';export default class Axios extends Compo...
2018-11-05 13:08:55
3209
2
原创 React 学习笔记 （四）（父子组件）
父组件给子组件传值1.父组件调用子组件时指定属性传值 title={this.state.title}传方法 run={this.run}传整个父组件 home={this}2.子组件使用时{this.props.title} —接收值{this.props.home.run} —接收方法{this.props.home} —接收整个父组件父组件调用子组件的数据和方法1、调...
2018-11-01 13:55:49
199
1
原创 React 学习笔记（二） （事件、约束与非约束性组件）
事件对象方法一方法二方法三表单取值键盘事件react实现双向数据绑定约束性组件和非约束性组件非约束性组件 defaultValue：&lt;input type="text" defaultValue=‘111’/&gt;相当于原生DOM的value属性，value就是用户输入的内容，react不管理输入的过程；约束性组件 value与onChange相结合：&lt...
2018-11-01 11:08:33
472
1
原创 React 学习笔记 (一)（创建组件、绑定数据、绑定属性、循环数据、引入图片）
##使用 create-react-app 快速构建 React 开发环境$ cnpm install -g create-react-app$ create-react-app my-app$ cd my-app/$ npm start
2018-10-31 15:41:52
745
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人