vue相关
与前端框架vue相关的知识,以及在使用vue实际项目开发中遇到的问题解决方案
MRSLLLL_
这个作者很懒,什么都没留下…
展开
-
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 · 650 阅读 · 0 评论 -
vue实现左右布局,拖动尺寸线控制面板距离调节,点击按钮可展开收起左侧区域的resizeLayout公共组件
本文实例讲述了JS实现左右布局的resizeLayout公共组件,供大家参考,具体如下:特点:① 拖动尺寸线可以调节左右区域的大小;② 点击按钮可以对左边区域展开和收起;③ 限制拖动的最小宽度;④ 使用vue插槽,可复用的组件html部分使用插槽也非常简单,<template v-slot:left>这里面写用到的子组件</template> <!-- 可调节左右宽带布局,点击按钮可隐藏左侧 --> <div class="box"原创 2020-12-21 11:11:39 · 1506 阅读 · 1 评论 -
vue实现漂亮的窗口拖拽效果(可改变大小、最大化、关闭)
本文实例讲述了JS实现漂亮的窗口拖拽效果,供大家参考,具体如下:特点:① 窗口可以拖动;② 窗口可以通过八个方向改变大小;③ 窗口可以最大化、还原、关闭;④ 限制窗口最小宽度/高度。html部分<template> <!-- 可拖拽,放大缩小,最大化可视的窗口 --> <div id="drag" ref="drag"> <div class="title"> <div class="text">这是原创 2020-12-21 10:32:16 · 2691 阅读 · 4 评论 -
在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 · 3208 阅读 · 0 评论 -
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 · 2283 阅读 · 0 评论 -
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 · 1367 阅读 · 1 评论 -
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 · 5286 阅读 · 0 评论