- 博客(90)
- 收藏
- 关注
RSS订阅转载 uni-app实现聊天消息滚动到底部
参考原文： https://www.cnblogs.com/gongliying/p/11258189.html在开发过程中，也需要对一些细节的高度进行调整，聊天界面需要了解一下API：https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync当前可使用窗口高度： windowHeight底部输入框的高度，根据实际需求，有的...
2019-10-17 11:04:59
4277
原创 webpack 中 clean-weabpack-plugin使用方法
在webpack中打包的文件通常是通过hash生成的，如果文件改动，那么打包的文件就会越来越多，如果想清除之前的文件，可以使用clean-weabpack-plugin插件来处理:但是要注意版本号，因为版本号不同，传参数的方式也不同若版本号是2.0.0 ： plugins: [ new CleanWebpackPlugin() // 这里是不用传参数的 ],若版...
2019-04-10 14:08:07
400
原创 SVGA优雅实现动画
在公司大部分是实现动画，今天分享一个特别好用的工具–SVGA全局安装SVGA npm install svgaplayerweb --save在使用时引入安装包 import SVGA from 'svgaplayerweb';设置Dom节点<div id="demoCanvas" ></div>具体使用const svgUrl = '...
2019-03-01 22:26:18
6014
8
翻译 聊一聊原生浏览器中的模块
自从ES2015定稿以来，我们通过 Babel 等转换工具可以在项目中直接使用【模块】。前端模块化开发已经是不可逆转，在 ECMAScript module 之前我们通过 requirejs、seajs、LABjs，甚至最早的时候我们通过闭包来实现模块化开发。目前一些主流的的浏览器厂商已经在他们新版的浏览器中原生支持了【模块】，今天我们就来原生浏览器中的模块到底如何。目前原生支持模块用法的浏览...
2018-09-25 14:13:04
342
原创 移动端优化方式
面试过程中，面试官通过一些简单的问题，去深挖一下对移动端的性能优化，于是在网上进行了资料查询： 以后在工作中使用的时候，会进行优化的记录、、、、...
2018-05-15 10:56:15
495
转载 淘宝的font-size思考前端设计稿与工作流
看看淘宝在不同分辨率下，呈现的效果： 淘宝的效果，随着分辨率的变化，页面元素的尺寸和间距都相应变化，这是因为淘宝的尺寸也是使用了rem的原因。在介绍它的做法之前，先来了解一点关于viewport的知识，通常我们采用如下代码设置viewport:<meta name="viewport" content="width=device-width, initial-scale=1...
2018-05-15 10:53:03
574
原创 8080端口一直被占用？
在掘金下载一个vue后台管理模板，进行操作后，打开了8080端口，然后进行强制删除，打开其他的软件，还是一直占用端口，解决方法：在桌面底部导航打开—任务管理—详细信息—node.exe;把node选中进行 结束任务，这样再重启一下服务，就不会占用端口。...
2018-04-11 13:59:29
1785
原创 Error: Cannot find module 'node-sass'和 ’These dependencies were not found:
进行sass的安装：npm install sass-loader --save-dev进行配置文件的修改，找到webpack.base.conf.js然后重启一下服务： npm run dev在用vue 框架的时候，安装sass时出现这样的报错： Error: Cannot find module ‘node-sass’；在网上查询解决方法：使用：n...
2018-04-09 16:58:50
1309
原创 原生 js ----原型链记录
// function Elem(id){ // this.elem = document.getElementById(id) // } // Elem.prototype.html = function (val){ // var elem = this.elem // ...
2018-04-09 16:07:32
233
翻译 原生 js ----构造函数
javascript 是一种基于对象的语言，它包含5中原生数据类型：number(数值类型)boolean（布尔值类型）string(字符串类型)null（空）undefined(未定义)除此之外，其他的都是对象，函数也是一个对象；function fn(){ //这是一个函数声明，函数是一个特殊的对象}构造函数定义 构造函数是一个普通的函数，与其他函数没有...
2018-04-09 15:17:35
1291
翻译 Git 与 SVN
SVN 是集中式版本控制系统： 先说集中式版本控制系统，版本库是集中存放在中央服务器的，而干活的时候，用的都是自己的电脑，所以要先从中央服务器取得最新的版本，然后开始干活，干完活了，再把自己的活推送给中央服务器。中央服务器就好比是一个图书馆，你要改一本书，必须先从图书馆借出来，然后回到家自己改，改完了，再放回图书馆。 集中式版本控制系统最大的毛病就是必须联网才能工作，如果在局域网内还好，带宽够...
2018-03-29 09:50:21
1460
原创 ie9 支持占位符
封装placeholder.js,在需要的页面进行引入。import $ from 'jquery'function placeholder() { // 不支持placeholder if(!isSupportPlaceholder()) { // 遍历所有input对象, 除了密码框 $('input').not("input[type='password']")...
2018-03-27 10:02:42
339
原创 路由懒加载
路由的使用——路由懒加载：import home from '@/components/home'（一般的引入组件方式）const login = resolve => require(['@/components/login'], resolve)const routes = [ { path: '/', name: 'home', component:...
2018-03-23 17:08:27
763
原创 ie9 不兼容Grid 栅格？
在做项目的时候，使用的是iview组件框架，但是在ie测试的时候，发现有的竟然不兼容Grid 栅格布局。解决方法： Grid 栅格布局的每一行，都是通过浮动和固定的宽度进行实现的， 所以要给父级进行清除浮动，这样才能实现Grid 栅格布局。...
2018-03-23 17:01:45
3994
2
原创 split()解析
split() 方法主要用于把一个字符串 分割成 字符串数组。 demo: strsplit(){ var nn="欢迎你:回家"; var ann=nn.split(':'); // console.log(ann); var bnn=ann[0]; console.log(bnn); ...
2018-03-20 17:55:11
1426
原创 splice参数作用
splice()方法用于从当前数组中移除一部分连续的元素，还可以在移除的位置进行元素的插入。该方法以数组的形式返回被移除元素的新的数组。语法：array.splice( startDelete, deleteCount,添加的元素)demo: const arr=new Array(4); arr[0]="第一个"; arr[1]="第二个"; arr...
2018-03-19 14:25:53
4261
原创 react 系列 原始封装组件方法
进行开发环境安装（cnpm 建议使用国内淘宝镜像）cnpm install -g create-react-appcreate-react-app 项目名cd 项目名npm start上面运行成功后，就会在网页打开http://localhost:3000/页面。默认目录结构 ；index.js 是入口文件； App.js 在入口文件进行引用，主要用于Do...
2018-02-11 16:26:02
1987
原创 react--系列 记录-1
React 特点1.声明式设计 −React采用声明范式，可以轻松描述应用。2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活 −React可以与已知的库或框架很好地配合。4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。HTML 语言直接写在 JavaScript 语言之中，不加任...
2018-02-08 17:00:14
243
原创 Axios 常用的请求方法别名
Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。常用的请求方法别名一般有: Get/post/http协议请求执行Get请求function get(){ return axios.get('/data.json', { params:{ id:1234 }
2018-02-07 10:50:53
1794
原创 css强制换行和超出部分隐藏实现
字段过长，页面显示效果： 一、强制换行 1 word-break: break-all; 只对英文起作用，以字母作为换行依据。 2 word-wrap: break-word; 只对英文起作用，以单词作为换行依据。 3 white-space: pre-wrap; 只对中文起作用，强制换行。word-break:break-all 和 word-wrap:break-word
2018-01-25 10:18:25
16236
转载 vue系列---params/query 传参方法
声明式： 编程式：router.push(…)这两种方式 都可以实现跳转链接。router.push使用 router/index.jsexport default new Router({ routes: [ { path: '/', name: 'A', component: require('../components/A
2018-01-23 15:34:33
1288
原创 iview系列----表单提示错误信息同时出现多个，怎么才能出现一个？
在使用iview框架的时候，直接使用框架自带的提示错误信息弹窗，但是在测试环节，点击登录按钮时候，多次点击按钮，认为这种弹出提示的次数过多，只出现一次就好。展示效果：在网上怎么搜索资料，都没有找到，太让人苦恼，后来认真看了看官网，使用destroy()方法；在方法里面谁使用了提示错误信息，就在当前的函数，使用ths.$Message.destroy(); 这样就只会出
2018-01-23 14:41:46
2620
3
原创 vue系列---项目打包找不到图片路径
在测试环节发现有图片找不到，发现是图片路径没有写对。 报错如下： 原代码： "/src/assets/img/arrow.png" alt="" class="col-step">这种引入图片的方式是错误的，虽然在页面展示的时候会出现，但是在打包后就会出现编译问题，src是无法编译的。正确的引入格式：第一种： img src="../../assets/i
2018-01-22 10:01:43
3588
原创 vue系列---三元表达式和if进行页面的切换
直接上测试代码：<template> <div class="login-box"> <div class="login"> <div class="login-title"> <h2>登录</h2> &
2018-01-18 14:56:56
12258
原创 vue项目实战总结笔记
公司项目也快接近尾声，在做项目的过程中，自己也遇到好多坑，个人觉得语法结构规范严谨对页面呈现的效果尤为重要。确认项目框架 一般页面都分为公共的头部和底部，还有中间渲染的内容。 主要开始工作：封装公共部分的组件，确定页面模块的搭建。头部导航不建议使用iview框架进行路由的跳转。 主要工作：通过导航子集的id进行路由的切换，以及点击当前导航显示的样式，采用循环的语法。 若是固定导航，
2018-01-18 11:40:10
1084
原创 vue系列---identify(生成图片验证码)插件
identify这是一个vue的插件，使用canvas来生成图形验证码。具体参数如下： 直接上测试代码： identify.vue组件（主要用于定义参数和方法）template> div class="s-canvas"> canvas id="s-canvas" :width="contentWidth" :height="contentHeight">can
2018-01-16 10:45:06
42230
21
原创 vue系列---基于 Element UI 的省市区街道联动选择组件
vue-area-linkage省市区联动选择，基于 Element UI. 组合数据来源：area-data下载组件：npm i --save vue-area-linkage引入组件在 main.js：import Vue from 'vue';import VueAreaLinkage from 'vue-area-linkage';Vue.use(VueArea
2018-01-12 17:04:35
21125
8
转载 Vue系列——在vue项目中使用echarts
该示例使用 vue-cli 脚手架搭建安装echarts依赖npm install echarts -S创建图表全局引入main.js// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts Hello.vuediv id="myChart" :style="{w
2018-01-12 10:39:55
774
原创 vue2.0 根据状态值进行样式的改变展示
用户在进行流程操作的时候，一般分为进行中，未开始，已完成，前端页面就要进行相应的状态区分展示。这里测试的是背景颜色区分。 demo:span class="contract-span" :class="statusText[item.status][0]">{{statusText[item.status][1]}}span> statusText: { 0:
2018-01-08 09:54:13
14437
原创 vue2.0 循环遍历加载不同图片
demo: <div v-for="item in temps" :key="item.id"> <div class="contract-item"> <img :src="item.imgUrl"> </div> </div>引入图片，注意路径：import con1 from "@/assets/
2018-01-04 15:01:41
13037
4
原创 vue2.0 实现页面导航提示引导
用户在进行一些新的操作流程时，提供一些导航流程也是必要的。项目中采用的是iview 的对话框进行实现的。 demo: <Modal v-if="modalOFF === 1"> <p>这里是对话框一</p> <button @click="modalOFF = 2"></button> </Modal> <Modal v-if="modalOFF === 2
2018-01-03 15:58:15
7240
原创 vue2.0 v-if和v-else指令
在项目中总会遇到一个按钮进行页面切换的操作，这时候 使用v-if和v-else就比较方便。demo: <template v-if="loginType"> <div>这里是模块一内容</div> </template> <template v-else> <div>这里是模块二内容</div>
2018-01-03 15:47:22
2042
原创 阿里巴巴图标字体引入
项目需要，在阿里巴巴图标库上直接进行图标字体的引入。ui设计师制作效果图： 先下载字体包，然后进行css样式的引入。如图： 2.在页面进行代码的编辑：<i class="icon-icon-test iconfont"></i>注意这里后面的 类 .iconfont 是每个必须要加的。 根据图标的类名可以进行字体大小样式的改变。
2018-01-03 12:06:26
653
原创 vuejs2.0 提示Cannot read property 'push' of undefined
在进行手动访问页面的时候，出现这种报错，于是进行路径的检查。app.vue结构： <div id="app"> <m-header></m-header> <router-view></router-view> </div>m-header.vue文件：<button @click="surf">漫游</button> methods: { // 这是是封装的手动
2017-12-13 16:23:02
28653
1
原创 使用pdf.js把PDF文件转图片
项目需求把客户上传的pdf文件转换成图片并执行下载，网上资料查了一下，觉得pdf.js实现比较方便。1.了解pdf.js PDF.js是基于开放的 HTML5 及 JavaScript 技术实现的开源产品,可以实现在html下直接浏览pdf文档。2.进行核心文件的引入pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析<
2017-12-05 13:28:30
26070
13
原创 CSS Grid 网格布局
CSS Grid 网格布局由两个核心组成部分是 wrapper(父元素) 和 items（子元素）。 wrapper是实际的grid（网格），items是grid（网格）内的元素。下面是实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网格布局</title> <style
2017-12-05 10:32:12
246
原创 vue 快捷轮播组件代码实现
在观看vue实战视频的时候，发现用的插件比较复杂，于是采用Iview组件中的轮播组件。1 进行iView 依赖的下载npm install iview --save2 在main.js进行依赖的引入import iView from 'iview'import 'iview/dist/styles/iview.css'Vue.use(iView)3 在需要的页面进行轮播组件的引入
2017-11-30 10:28:03
451
原创 没有dev-server.js文件，如何进行后台数据模拟？
最新的vue-webpack-template 中已经去掉了dev-server.js 但是要进行模拟后台数据的，如何模拟本地数据操作？ 解决方法： dev-server.js 改用webpack-dev-conf.js代替。 所以在模拟后台数据的时候直接在webpack-dev-server.js文件中修改：const axios = require('axios')const expre
2017-11-30 10:19:58
4992
原创 vue 实战问题总结
在vue的实战项目学习中遇到一些难点，以下是自己的学习笔记记录。 引入styl文件的时候，要先下载styl依赖环境：cnpm install stylus --save-devcnpm install stylus-loader --save-dev 在引入styl文件的时候，默认情况下，node_modules目录下找不到依赖？解决方法： 在build目录下的webpack.
2017-11-20 11:38:12
785
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人