- 博客(12)
- 收藏
- 关注
原创 前端学习之滑动门/移动门效果(背景图需根据内容的长度自动增长)
制作网页的时候,为了美观,往往要为网页元素设置特殊形状的背景,比如微信官网的导航栏。最大的问题是,导航菜单栏里面的字数不一样,即背景图需根据内容的长度自动增长,这样就需要用到滑动门的效果。原理:使用一个a标签,包裹一个span标签。给a标签一个左侧的背景位置,给span标签一个背景右侧的位置。这样两者重合,就会出来滑动门的效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2020-06-30 16:50:39 579
原创 前端学习之精灵技术(sprite)
当用户访问一个网站时,需要向服务器发送请求。而网页上的每张图都需要经过一次请求才能展示给用户。然而,一个网页中往往会应用很多小的背景图片作为装饰。当网页中的图像过多时,服务器就会频繁的接收和发送请求,这将大大降低页面的加载速度。为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度 ,出现了css精灵技术(也叫css sprite、css 雪碧)。精灵技术的本质css 精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户.
2020-06-30 15:49:36 824
原创 前端学习之溢出部分显示省略号(white-space、text-overflow)
white-space 文字换行设置或检索对象内文本显示方式。通常我们使用于强制一行显示white-space: normal; -默认换行显示方式white-space: nowrap; -强制在同一行内显示所有文本,直到文本结束或遇到br标签对象才换行。text-overflow 文字溢出设置或检索是否使用一个省略号标记(…)标识对象内文本的溢出text-overflow: clip; -不显示省略标记(…),只是简单的剪裁text-overflow: ellipsis; 当对象文本溢
2020-06-30 14:20:22 1065
原创 echarts 柱状图数值为0时 显示柱体
解决办法:使用 barMinHeight 设置最小柱体高度 series: [ { name: '成交通证', type: 'bar', barMinHeight: 2, data: this.busiSeriesData } ... ]
2020-06-30 10:41:59 6567 5
原创 vue 父组件传子组件数值,父值变更子获取的值没有变的问题
1.父组件给子组件传值,子组件使用props接收值。//父组件页面<div><TransChart :start-time="startTime" :end-time="endTime"/></div>//子组件页面props: ['startTime', 'endTime'],问题:父组件页面在变更startTime和endTime时,子组件的值不会随之改变。解决办法:在子组件内使用 watch 检测数据变动watch: { endTime
2020-06-30 10:31:55 3699
原创 element ui --input输入框不能输入的问题
<el-input v-model="putNumber" autocomplete="off" @input="changeInput"></el-input>如图所示,无论怎么操作都只显示默认的数值,不能输入。网上查资料后找到的解决办法是给一个input事件<el-input v-model="putNumber" autocomplete="off" @input="changeInput"></el-input>//强制更新chang
2020-06-20 10:30:06 4638 1
原创 IOS 移动端 输入框第二次点击不能拉起虚拟键盘的问题
ios虚拟键盘第二次拉起保护机制有个300s的延迟,所以需要手动拉起。给input一个Focus事件。inputFocus(){ //手动调用input的focus事件 document.getElementById("commentInput").focus(); }
2020-06-16 16:37:51 464
原创 echarts 饼状图 (数据为0或很小的扇形显示问题、扇形间隔)
series: [ { name: '概况', type: 'pie', label:{ formatter: '{b}({d}%)', color:'#555555' }, radius: ['30%', '50%'],//小圆和大圆的半径 center: ['50%', '40%'],//.
2020-06-10 18:13:54 7417 1
原创 移动端-ios 上传图片-图片被横屏旋转的问题
1.获取图片是否带有旋转角度 let Orientation=1; //去获取拍照时的信息,解决拍出来的照片旋转问题 Exif.getData(file, function () { Orientation = Exif.getTag(this, "Orientation"); console.log("Orientation:"+Orientation); });2.根据这个orientation的值做处理 //修复ios上传图片的时候
2020-06-02 17:07:56 2385 4
原创 js报错 Cannot both specify accessors and a value or writable attribute
在使用Object.defineProperty() 定义对象属性的时候,如果设置了 set 或 get, 就不能设置 writable 和 value 中的任何一个,否则就会报错如上图let car={};let temp="bwm";// 如果设置了 set 或 get, 就不能设置 writable 和 value 中的任何一个,否则报错Object.defineProperty(car,'brand',{ // writable:true, // value:'bmw', enume.
2020-06-01 09:44:54 1892
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人