![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端经验记录
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
一些css 技巧的记录
记录一下,忘记的时候翻一翻的CSS 技巧。1. input 输入框的样式 如下,box-sizing 设为border-box 且 左右 padding 有.1rem ,这样子输入框内部就可以有一个比较友好的内边距。 .search-input box-sizing: border-box width: 100% height: .6...原创 2018-12-06 17:21:55 · 140 阅读 · 0 评论 -
Mac 上 npm install 报错
克隆好项目后,使用npm install ,有如下报错是permission 的问题。我们按照如下的步骤操作一下吧,哎。- 新建一个文件mkdir ~/.npm-global- 设置npm 使用新的路径npm config set prefix '~/.npm-global'- 打开或者创建 ~//profile ,把下面这行添加进去。export PAT...原创 2019-04-30 16:45:20 · 2415 阅读 · 1 评论 -
Mac 上升级Node.js 版本
Node.js 升级的话,可以在npm 里面,使用第三方模块 n .但是在Mac 上使用命令sudo npm install -g n但是,会报错!如下。我们在github 上找到了 n :https://github.com/tj/n然后,按照它的ReadMe 中 Install 第二种方式下载:首先下载下来这个库,然后解压,改名为n,把它挪到 /usr/lo...原创 2019-04-30 15:48:49 · 342 阅读 · 0 评论 -
使用iView 插件的时候 babel-plugin-import 的使用
项目在使用iView 插件的时候,官方推荐,配置一下 .babelrc 文件,使用 babel 插件babel-plugin-import 来实现按需加载组件。首先,如果我们不使用babel-plugin-import 插件的时候,使用iView 方式。如下。是在全局的 main.js 中代码,引入iview。// The Vue build version to load with ...原创 2019-04-25 11:31:55 · 1223 阅读 · 0 评论 -
Redux 基本概念 1
Redux 实际上是一个数据层框架,它将数据存储在Store 中。每个组件可以从Store 中获取数据,也可以修改Store 中的数据。Redux 的工作流程 Redux Flow如下,请求Store数据:React Components 向 Action Creators 发送请求获取Store 中的数据,Action Creators 向Store 提交请求,Store 则向Reduc...原创 2019-03-04 23:19:39 · 177 阅读 · 0 评论 -
echarts tooltip 按值的降序显示tip 信息
遇到了一个小改进点。就是echarts 图的tooltip 的内容 ,希望按照每条线当前的值进行降序显示。查询 echarts 官方文档,https://www.echartsjs.com/option.html#tooltip修改tooltip 的formatter 属性即可。下面贴一下该部分的代码。option = { tooltip: { ...原创 2019-02-13 14:43:42 · 2095 阅读 · 0 评论 -
less 的学习
首先,Less 是 css 的预处理语言。less 文件的扩展名是.less ,需要将它进行编译,转化为.css文件,浏览器才可以使用。将 .less 转化为 .css 一般有三种方式: 1. Koala 自动监视编译 / Webpack / FIS 2. Sublime 插件 less2css 自动编译 && Lessc 3. less.min.js ...原创 2019-02-17 16:29:42 · 326 阅读 · 0 评论 -
React 中一些性能改进的点
1. 在class 中的constructor 函数中使用bind 绑定组件内函数的作用域,如下。 这样可以保证,整个文件里,该函数的作用域绑定只执行一次。且可以避免子组件的一些无必要的渲染。 constructor(props) { super(props); this.handleDelete = this.handleDelete.bind(this) ...原创 2019-01-30 15:23:57 · 148 阅读 · 0 评论 -
react 项目中使用Sass
使用react 脚手架新建了一个项目,想要引入 sass 。本来是想用Less 的,但是在 npm run eject (网上的说法要暴露配置文件),时,项目提示:Create React App 2 supports TypeScript, Sass, CSS Modules .... 于是,还是用Sass 好了。但是,Sass 也不是直接写代码用就好。还是需要下载 node-sas...原创 2019-02-21 14:40:04 · 5761 阅读 · 1 评论 -
fixed 不生效 的一种情况
前几天,使用layui 生成一个弹出框,本来它是fixed 的。像下面这样。index = layer.open({ type: 1, shade: 0, title: false, area: ['100%', '90px']...原创 2018-12-25 10:55:19 · 1347 阅读 · 0 评论 -
vue 一个组件的 name 有哪些情况下会使用到
遇到了,就记录在这儿。1. 做递归组件时会要用到 如下<template> <div> <div class="item" v-for="(item,index) of list" :key="index" > <div class="item-title bord原创 2018-12-16 22:10:43 · 366 阅读 · 0 评论 -
截流函数
在touch 事件中,总是会频繁去触发调用对应的事件函数。可以通过截流函数,减少调用。下面就是一个例子。<template> <ul class="list"> <li class="item" v-for="item of letters" :key="item" :ref="i原创 2018-12-07 11:23:21 · 882 阅读 · 0 评论 -
Vue 获取div 的宽度
在template 某个元素中添加ref 属性。之前使用ref 的style.width 就可以获取得到。但今天在使用的时候突然不能获得了。尝试了下面的方式即可:在js 中获取这个 ref 的 “clientWidth” 属性const eWidth = this.$refs.echartsWrapper.clientWidth具体原因,占个坑先...原创 2019-05-21 14:34:11 · 30076 阅读 · 3 评论