自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(21)
  • 收藏
  • 关注

原创 vue自定义指令实现echarts图宽宽高变化自适应

1、在全局添加一个自定义指令,src/directive/redraw.js// 获取盒子宽高变化const vueRedraw = {};vueRedraw.install = Vue => { Vue.directive("resize",{ //被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中) inserted(el,binding){ let width = "", let height = "", let

2021-07-26 10:22:36 653

原创 vue实现左右布局,拖动尺寸线控制面板距离调节,点击按钮可展开收起左侧区域的resizeLayout公共组件

本文实例讲述了JS实现左右布局的resizeLayout公共组件,供大家参考,具体如下:特点:① 拖动尺寸线可以调节左右区域的大小;② 点击按钮可以对左边区域展开和收起;③ 限制拖动的最小宽度;④ 使用vue插槽,可复用的组件html部分使用插槽也非常简单,<template v-slot:left>这里面写用到的子组件</template> <!-- 可调节左右宽带布局,点击按钮可隐藏左侧 --> <div class="box"

2020-12-21 11:11:39 1518 1

原创 vue实现漂亮的窗口拖拽效果(可改变大小、最大化、关闭)

本文实例讲述了JS实现漂亮的窗口拖拽效果,供大家参考,具体如下:特点:① 窗口可以拖动;② 窗口可以通过八个方向改变大小;③ 窗口可以最大化、还原、关闭;④ 限制窗口最小宽度/高度。html部分<template> <!-- 可拖拽,放大缩小,最大化可视的窗口 --> <div id="drag" ref="drag"> <div class="title"> <div class="text">这是

2020-12-21 10:32:16 2705 4

原创 VUE +el-table+sortable.js实现拖拽表格table排序,实现行排序,列排序(踩坑提醒)

Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)项目需求是要求能对element中 的table进行拖拽行排序这里用到了sorttableSortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)官方Demo:http://rubaxa.github.io/Sortable/安装步骤,注意安装的是sortablejs,别安装成其他的,也是不行的npm install sortablejs --save在.vue中的j

2020-12-03 17:38:44 1372 1

原创 在vue项目中使用element-ui的el-table表格组件(持续更新)

.el-table__header tr, .el-table__header th { padding: 0; height: 40px;}.el-table__body tr, .el-table__body td { padding: 0; height: 40px;}修改element ui table tr th高度

2019-10-20 22:17:37 3211

原创 vue单页应用实现监听页面滚动的距离

vue项目中,获取TMD页面卷进去的高度总失败,比如:let top = document.documentElement.scrollTop || document.body.scrollTop;console.log(top)// 0;解决的办法如下mounted () { window.addEventListener('scroll', this.handleScroll)...

2019-09-09 21:35:55 5294

原创 vue项目中使用vant-ui怎么实现rem适配?

vant官网提供了2个工具,可以非常简单的实现rem的适配安装postcss-pxtoremnpm i postcss-pxtorem在Babel.config.js文件中配置,这是官方提供的一个基本配置module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4....

2019-09-01 20:42:52 2284

原创 Git配置多个SSH-Key

当有多个git账号时,比如:a. 一个gitee,用于公司内部的工作开发;b. 一个github,用于自己进行一些开发活动;解决方法生成一个公司用的SSH-Key$ ssh-keygen -t rsa -C ‘xxxxx@company.com’ -f ~/.ssh/gitee_id_rsa生成一个github用的SSH-Key$ ssh-keygen -t rsa -C ‘xxxx...

2019-08-22 21:40:50 194

原创 前端面试题--原生脚本代码,实现点击事件,动态添加或者删除一个class类名

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .expanded { display: none } </style></...

2019-08-20 22:03:59 1548

原创 ES6的模块化

在之前JavaScript是没有模块化概念,如果需要使用模块化的业务,需要引入第三方库.直到ES6代来了模块化,才让JavaScript第一次支持了module.ES6的模块化分为导入(import)和导出(export)两个模块.模块化的特点:1、模块代码自动运行在严格模式下,没有任何办法跳出严格模式;2、在模块的作用域下创建的变量,不会被添加到全局作用域中;3、如果外部可以读取模块当...

2019-08-19 11:00:12 138

原创 html5本地图片预览

1、文件控件中又一个files属性,其中保存了上传文件的各种属性,它是一个伪数组形式,可以上传保存1个文件或多个文件2、对于这些文件信息(本例中的文件就是用户选中的图片),我们通过window.URL.createObjectURL()来创建一个临时的路径,这个路径可能是像这样:blob:http://localhost:3005/fc517910-1300-44f3-a6e8-d52f56f...

2019-06-26 20:14:39 734

原创 对象转成查询字符串

<script> //例如: {a:1,b:2,c:jame} 转换为 a=1&b=2&c=jame var obj = {a:'1',b:'2',c:'jame'}; function f(obj) { //定义一个空数组 var ary = []; v...

2019-06-23 10:43:33 1355

原创 查询字符串转对象

直接贴代码 <script> // 例如: a=1&b=2&c=jame 转换为 {a:1,b:2,c:jame} var str = "a=1&b=2&c=jame"; function f(str) { //切割字符串,将&切割,得到一个新数组,["a=1", "b=2", "c=j...

2019-06-23 10:39:05 429

原创 js实现复选框的全选和反选功能

一共需要实现两个功能,第一个是,当thead中的复选框选中☑️时,tbody中的复选框都选中checked,反之,都不选中;第二个是,当tbody中的复选框都选中时,thead中的复选框选中;当tbody中的复选框有一个没选中,thead中的复选框不选中。<!DOCTYPE html><html lang="en"><head> <met...

2019-06-02 09:36:27 2792

原创 css3中2D、3D属性详解

2D转换 transform 首先要清楚一点,在css中的x轴正方向从左至右,但是y轴的正方向是从上至下。位移(改变元素的位置)transform: translate(x,y)定义2D转换,沿着x轴和y轴移动,实际上本质和定位当中的left right top bottom一样。例如:.box { transform: translate(100px,200px); ...

2019-05-15 23:57:25 1138

原创 利用background-clip:text实现文字颜色的线性渐变

想要实现的事文字的颜色渐变,效果图如下:文字颜色从左向右渐变,由红变绿代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> h2 { ...

2019-05-11 12:16:30 613

原创 网站优化三大标签以及logo优化常用方法

网站优化的三大标签SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”!SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化,从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是,把产品做好,搜索引擎就会介绍客户来。网页title 标题title具有不可替代性,是我们的内页第一个重要标签,是搜索...

2019-04-24 08:41:37 1337

原创 块级元素、行内元素和行内块元素 三种显示模式的区别和特点

css中标签的显示模式分为三种:块级元素block-level行内元素inline-level行内块元素inline-block我们常用的标签属于什么显示模式?他们之间有什么特性?是否可以互相转化和注意事项都是要熟记的,因为在网页div+css用来布局的时候很重要块级元素 block-level1⃣️常见的块元素有:< h1 >…< h6 >、p标签、div...

2019-04-23 09:17:24 2037 1

原创 css清除浮动的方法

为什么要清除浮动??因为浮动元素不占据标准流的位置了,所有它会对后面元素的排版产生问题。为了解决这些问题,此时就需要在该元素中清除浮动。准确地说,并不是清除浮动,而是清除浮动后造成的影响。**首先最简单的方法,就是给父元素设置高度!!**但是实际开发中,有很多情况子元素的高度是不固定的,因此不能去给父元素设置固定高度,而是要靠子元素内容的高度去撑开父元素。那么我们就用css里的c...

2019-04-21 23:51:21 204

原创 css三角形的制作

css制作三角形的原理很简单,主要就是将盒子的宽高设为0,加上边框的宽度和颜色分解步骤给大家看一下,先定义一个宽高10px的灰色黑字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &...

2019-04-21 08:50:34 463

原创 [学习技巧记录]服务模块样式细线技巧和服务模块溢出隐藏技巧

<div class="service"> <ul> <li> <a href="#"> <span></span> <p>话费</p> </a> </li> <li> <a href="#"> <span></span> <p>机票</p> </a> </li>

2019-04-20 16:03:35 263

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除