- 博客(21)
- 收藏
- 关注
RSS订阅原创 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
656
原创 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
3212
原创 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
139
原创 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
1139
原创 利用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
1338
原创 块级元素、行内元素和行内块元素 三种显示模式的区别和特点
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关注的人