- 博客(34)
- 收藏
- 关注
转载 Vue2.0 style样式scoped使用less时样式穿透覆盖
本文主要介绍Vue2.0 style样式scoped使用less时样式穿透覆盖。主要实现的方法是/deep/和>>>一、使用/depp/<style scoped lang="less"> .class{ /deep/.upwarp-nodata, /deep/.upwarp-tip { .px2rem(font-size, 12...
2020-04-29 10:19:56 3638 1
原创 vue 绑定class的几种方式
1:对象语法给v-bind:class 设置一个对象,可以动态地切换class,如下<div id="app"> <div :class="{'active':isActive}"></div></div><script>var app = new Vue({ el:'#app', data:{ ...
2020-04-29 10:12:21 2130
原创 Vue中通过属性绑定为元素绑定style行内样式
1.直接在元素上通过:style的形式,书写样式对象<h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>2.将样式对象定义在data中,并直接引用到:style中1:在data上定义样式data:{ styleObj1:{color:'blue','font-weight':200,'font...
2020-04-29 09:53:27 2714
原创 多个请求,调用按照顺序执行
相信大家都会遇到一种情况,多个请求并发执行,但现在的需求是要在一个请求或多个请求之后再调用某一个未知函数,这就需要用到es6的Promise对象和async函数了 //模拟ajax异步操作1 function ajax1() { const p = new Promise((resolve, reject) => { setTimeout(func...
2020-04-29 09:41:24 4609
原创 h5页面ios,双击向上滑动,拖拽到底部还能继续拖拽
在ios下,双击屏幕某些地方,滚动条会自动向上走一段。当用微信看h5的时候,拖拽到底部,会漏出来,微信自带下面的灰黑色皮肤。用js解决一下吧,这俩问题很类似,总结到一起了。----------特别注意,安卓没有发生过这些情况,因为解决办法是给最外层的wrapper,overflow-y:auto;也就是放弃了原生的滚动条,所以解决的时候要判断一下系统,安卓就不用处理了。html部分:---...
2020-04-27 15:29:49 2595
原创 iconfont矢量图标库的使用方法
一、iconfont的使用1:登录http://www.iconfont.cn/阿里巴巴矢量图标库,github或微博登录2:选择喜欢的图标添加入库3:然后点击右侧购物车,点击最下面的‘下载代码’按钮,下载保存到本地,解压即可得到需要的文件4:有三种方法使用(1)unicode引用unicode是字体在网页端最原始的应用方式,特点是:兼容性最好,支持ie6+,及所有现代浏览器。支...
2020-04-27 11:10:29 2589
原创 vue组件数据更新,但是组件内元素状态不更新的解决方案
1:如果组件绑定的是数组,可在组件根元素绑定v-if为数组长度,在数据请求接口中,先将数组置为[],数据请求成功后,再给数组重新赋值,这样就可以在数据更新时使整个组件更新状态2:如果组件绑定的是数组,可以尝试使用可以改变原数组的数组方法去处理一下,前提是数组已经在vue的实例data中定义了3:如果组件绑定的是数组,但是数组没有在vue的实例data中定义,可以尝试使用vue中的this.$s...
2020-04-27 10:18:35 5832
原创 el-table悬停当前行,显示当前行操作按钮,取消当前行悬停,当前行按钮隐藏
<el-table @cell-mouse-enter="hoverRow" v-if="tableData.length > 0" @cell-mouse-leave="leaveRow"//关键 @sort-change="sortChange"//关键 :header-cell-style="{'text-align':...
2020-04-25 14:56:11 4050 3
原创 JS九宫格拼图游戏
<!doctype html><html><head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认...
2020-04-24 14:48:31 2922
原创 vue更新数据页面不刷新数据
<el-table @cell-mouse-enter="hoverRow" v-if="tableData.length > 0" //这里是关键 @cell-mouse-leave="leaveRow" @sort-change="sortChange" :header-cell-style="{'text-align...
2020-04-24 11:08:59 2842
原创 el-table实现后台全量排序
1.第一个关键点是在需要在要排列的列上加上sortable: ‘custom’, <el-table-column prop="date" label="打卡时间" sortable="custom" width="180">2.在table上添加事件,@sort-change="topTableSort"如果有需要添加...
2020-04-23 17:28:21 3705 1
原创 vue 动态绑定背景图
1:backgroundImage && 三目运算符<div :style="{backgroundImage: 'url(' + (detailData.status == 1 ? imgUrl : norImgUrl) + ')'}" class="quan-bac-img" >data() { return { norImgUrl: ...
2020-04-21 14:27:08 2383
原创 js多个异步请求,按顺序执行next
在js里面,偶尔会遇见需要多个异步按照顺序执行请求,又不想多层嵌套,,这里和promise.all的区别在于,promise或者Jquery里面的$.when 是同时发送多个请求,一起返回,发出去的顺序是一起;这里是按照顺序发请求方法 一 、首先创建一个迭代器,接收任意多个函数参数function nextRegister(){ var args = arguments; va...
2020-04-20 16:55:01 4927
原创 Echart多条折线图单选
只需要设置legend属性,就可以实现效果, data 参数表示可选的折线有哪几条, selected 表示默认哪些显示,true 表示显示,false 不限,selectedMode 表示单选,选了A就不能选B。legend: { data: ['阅读', '在看', '评论', '赞赏'], selected: { '阅读': true, '在...
2020-04-20 09:29:11 2881 1
原创 css图片不断放大缩小的动画效果
<img class="move-img" @click="goGet" width="26px" src="../../assets/img/[email protected]" alt="">.move-img { animation-name: scaleDraw; /*关键帧名称*/ animation-timing-function: ease-in-out; /*...
2020-04-18 15:17:01 5162 3
原创 js生成二维码,扫码实现跳转
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">...
2020-04-13 16:15:23 4040
原创 获取url携带的参数
getRequest(url) { var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.split("?")[1];//str是以'?'截取url后半部分 var strs = str.split("&");//strs是以'&'...
2020-04-11 11:12:52 822
原创 ElementUI el-date-picker不可以选择之后的时间(当天也不可选)
data() { return { pickerBeginDateBefore: { disabledDate(time) { return time.getTime() >= (Date.now()-8.64e7); } }, }; },<el-date-picker size="...
2020-04-09 18:44:19 5540 1
原创 echarts在页面拉伸时自适应大小
mounted() { window.onresize = ()=>{ return (()=>{ this.myChart.resize(); })() } },
2020-04-07 18:00:40 1364
原创 el-date-picker禁用当前之后日期
<el-date-picker size="mini" :picker-options="pickerBeginDateBefore"//这里是关键 class="picker-style" v-model="pickerVal" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" ra...
2020-04-02 17:18:58 3929 1
原创 Echarts图例位置 - legend属性
[如何设置Echarts图例位置]Echarts可以帮助我们快速构建柱状图、饼图、条形图,这对于多图形化展示数据来说尤其方便,可帮助我们快速开发。不过我们在使用Echarts过程中经常会遇到如下问题:图例经常不知道如何调节到我们想要的位置。遇到此情况该如何调节呢?只需要legend属性中修改如下几个示数即可: legend: { orient: 'vertical', ...
2020-04-02 16:25:07 8555 1
原创 el-switch实现逻辑判断后再改变状态
必须要给switch组件设置disable禁用掉,不然点击时就会改变switch开关的值,实现不了想要的效果<el-switch v-model="autoUpdate" style="margin-top:200px" active-color="#5eb058" inactive-color="#cccccc" :disabl...
2020-04-02 13:56:38 5355 1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人