记录
gooodi
这个作者很懒,什么都没留下…
展开
-
给input框加 text-overflow:ellipsis在ie浏览器失效 解决方法
最近做一个toB的项目,各种输入框input,要求输入内容超出部分省略号显示, 大概这个效果(项目使用vue框架):代码:<input :title="动态获取对应的value..." style="text-overflow:ellipsis">在火狐, 谷歌 都是差不多如上图的效果, 乖乖 到了ie浏览器变成如下:按理说所有浏览器对text-overflo...原创 2019-11-09 16:06:57 · 1410 阅读 · 0 评论 -
彻底理解js中this的指向
本来想总结一下,看到一篇挺好的记录一下:这一篇十分详细了:彻底理解js中this的指向,不必硬背。原创 2019-11-04 16:32:05 · 176 阅读 · 0 评论 -
关于事件冒泡和事件捕获
事件流 JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件,以便事件发生时执行相应的代码。 事件流的起源:就是在浏览器发展到第四代的时候,浏览器开发团队遇到一个问题:页面的哪一部分会拥有某个特定的事件?要明白这个问题问的是什么,可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上,那么你的手指指向的...转载 2019-10-29 17:16:08 · 144 阅读 · 0 评论 -
多行文字,最后一行显示不下省略 纯css
css 代码:多行:overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; //显示的行数-webkit-box-orient: vertical; 顺便放下单行的:text-overflow: ellipsis;white-space: no...原创 2019-06-27 18:12:36 · 1121 阅读 · 0 评论 -
vue中使用Echarts饼图(环状图)
在项目中步骤:<div id="pieChart" class="chart-container"></div>created () { this.initEchart()},methods: { initEchart () { axios.get('/echart').then((res) => { ...转载 2019-07-05 15:59:31 · 8015 阅读 · 0 评论 -
Vue项目中 国际化 使用Vue-i18n 与 iview不兼容问题解决
最近在使用Vue-i18n做项目国际化, 项目中也使用了iview, 出现以下报错:查看iview源码后发现以下代码:function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var format = (0, _format2.de...原创 2019-07-16 14:17:46 · 1434 阅读 · 1 评论 -
JavaScript 高性能数组去重
看到个比较数组去重效率的文章蛮有意思的一、测试模版数组去重是一个老生常谈的问题,网上流传着有各种各样的解法为了测试这些解法的性能,我写了一个测试模版,用来计算数组去重的耗时// distinct.jslet arr1 = Array.from(new Array(100000), (x, index)=>{ return index})let arr2...转载 2019-07-29 13:39:16 · 138 阅读 · 0 评论 -
Vue 项目中 使用 CryptoJS 对请求后端接口获得的数据实现前端加密解密
用到了axios 和CryptoJS, 基本的安装啥的就不废话了直接上封装的代码:import CryptoJS from 'crypto-js/crypto-js'import axios from 'axios';const CancelToken = axios.CancelToken// **************************** 加密代码 *******...原创 2019-07-25 13:23:33 · 1944 阅读 · 0 评论 -
Vue 使用 vue-cropper实现图片裁剪
1.安装vue-cropper使用npm本地安装vue-croppernpm install vue-cropper --save-dev2.实现代码<template> <div> <div> <div class="pos movediv" :style="cutPhotomodel?'z-index:10':'z-in...原创 2019-07-26 10:03:26 · 2106 阅读 · 0 评论 -
Vue.js双向绑定的实现原理
Vue.js双向绑定的实现原理 Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统。本文仅探究双向绑定是怎样实现的。先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例。 参考文章:https://segmentfault.com/a/1190000006599500一、访问器属性 访问器属性是对...转载 2019-09-11 10:42:13 · 135 阅读 · 0 评论 -
CSS 中的层叠,层级关系
CSS 中的层叠和块级格式化上下文 1. 层叠上下文 (Stacking Context) 2. 层叠等级 (Stacking Level) 3. z-index 4. 层叠顺序 (Stacking Order) 5. 文档流 (Document Flow) 5.1 常规流 (Normal flow) 5.2 浮动 (Floats) 5.3 绝对定位 (A...转载 2019-10-11 13:16:06 · 3070 阅读 · 0 评论 -
ios中 safari浏览器,js时间操作getTime(),getFullYear()等返回显示NaN的解决办法
查了下原因大概是:在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date('2013-10-21') 的日期对象。但是在IOS5版本里面的Safari解释new Date('2019-5-21') 就不正确,在IOS5的Safari中返回的永远是"Invalid Date"。后来我在网上查找了资料,原来是低版本的Safari解释new ...原创 2019-05-22 11:23:16 · 3058 阅读 · 1 评论 -
js财务金额千位小数格式化 vue
//财务金额千位小数格式化 Vue.prototype.formatSalary = function(num) { // console.log("进来的num",num); num = parseFloat(num).toFixed(2).toString().split("."); // console.log("第一次处理后的num",num); num[0] = n...原创 2019-03-19 13:43:37 · 1142 阅读 · 0 评论 -
解析vue2.0的diff算法
前言我的目标是写一个非常详细的关于diff的干货,所以本文有点长。也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角。先来了解几个点...1. 当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块do...转载 2019-03-15 10:56:46 · 213 阅读 · 0 评论 -
Input框内的提示文字变化效果
大致效果如下:点击前,灰色的placeholder的效果(其实不是写在placeholder里的)点击后效果,变小 上移 代码如下:Html:(都是重复的这里就贴了其中一行的)<div> <div class="floatText">手机号</div> <input id="mobileNum" cla...原创 2018-11-01 15:08:23 · 3248 阅读 · 0 评论 -
form表单内的button标签自动提交表单,刷新页面
问题描述: (表象)页面内form表单中的button标签,点击后会刷新页面,问题本质: form表单下的按钮在没有指定type类型的时候,如果我们同时给其添加了点击事件的话。会发现我们在点击的时候回默认的把表单也给提交了。问题原因: button标签 Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。...原创 2019-01-10 14:28:31 · 1661 阅读 · 0 评论 -
Vue中用v-model实现父组件和子组件之间的数据通信
<template> <div> <span class="injobs" >{{title}}:</span> <DatePicker type="month" :placeholder="placeholder" v-model="tt"></DatePicker> </div>&l...原创 2019-01-17 20:14:01 · 362 阅读 · 0 评论 -
注册登录模块常用的正则表达式
邮箱验证:let regExp = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;简洁: .*@.*\..*密码 (长度为为8~32) :let regExp = /^[a-z0-9A-Z_~!@#$^&*,.]{8,32}$/;验证密码只能包含字母数字以及!@#$%^&...原创 2019-01-15 19:04:48 · 592 阅读 · 0 评论 -
锚点定位 锚点导航 iView3.x Anchor(锚点)组件
首先在main.js中引入iview 3.x我使用部分引用组件的方法所以要单独引入Anchor组件import {Anchor} from 'iview' Vue.component('Anchor', Anchor) // 这两句就可以在页面中使用组件了接着在要使用锚点的页面中引入组件注意:在页面中这里引用的是AnchorLink原因是在页面中Anchor 被渲染成了...转载 2019-01-22 15:25:52 · 1602 阅读 · 0 评论 -
Vue.js 监听路由变化的各种方法
方法一:通过 watch 1 2 3 4 5 6 // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 1 2 3 4 5...原创 2019-01-28 14:44:32 · 3327 阅读 · 1 评论 -
margin-left: auto;为什么可以使元素靠右
div { width: 100px; margin-left: auto;}上面的代码可以使得div靠近浏览器的右侧显示是为什么?有点弱智的问题,竟然现在才知道...记录一下The following constraints must hold among the used values of the other properties:'margin-left' ...转载 2019-02-12 19:52:53 · 12840 阅读 · 0 评论 -
js 的filter()方法
js 的filter()方法filter()方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。 filter()基本语法: arr.filter(callback[, thisArg]) filter()参数介绍: 参数名 说明 callback 用来测试数组的每个元素的函数。调用时使用参数 (elem...转载 2019-02-13 19:26:39 · 1118 阅读 · 0 评论 -
为什么使用v-for时必须添加唯一的key?
v-for中的key使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;举个转载 2019-02-20 15:26:41 · 339 阅读 · 0 评论 -
好用的前端相关的网站汇总
1.UEditorhttps://ueditor.baidu.com/website/index.html是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 特别适合多文本的页面生成等2.http://hao.shejidaren.com/设计,前端等...原创 2019-03-05 11:13:34 · 304 阅读 · 0 评论