![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
菜鸟咸鱼一锅端
毕业设计项目可以找我
展开
-
实现elementui-tree组件鼠标滑过显示标签信息
项目中产品提了一个这样的需求(鼠标悬浮标签之上展示标签信息),老大一直问能不能实现?他不确定的点是在他写的位置不对,还有取的定位值不对,因为如果是说单纯从树节点自定义滑入滑出显示定位标签的话当列表内容过多出现滚动条的时候会导致标签内容被遮住!那这个时候我们就可以考虑除了子元素相对定位之外还有什么方法可以获取到当前位置进行内容跟随显示,那就是我们的鼠标位置信息。可以通过获取鼠标位置信息,设置标签信息模块在外层,通过获取鼠标距离X轴Y轴的位置进行固定定位!原创 2023-05-30 17:54:43 · 1460 阅读 · 0 评论 -
树形结构数据处理封装函数(二)
【代码】树形结构数据处理封装函数(二)原创 2023-02-23 11:17:19 · 205 阅读 · 0 评论 -
树形结构数据处理封装函数(一)
【代码】树形结构数据处理封装函数(一)原创 2023-02-22 14:58:36 · 209 阅读 · 0 评论 -
常用的工具类函数(一)
常用的工具类函数原创 2022-09-06 11:12:26 · 234 阅读 · 0 评论 -
vue引入本地字体
首先把字体下载到本地然后在css文件里新建css文件,为字体重命名最后在main.js引入即可全局使用页面中使用,例如<template> <div class="expant"></div></template><style>.expant{ font-size:rr}</style>...原创 2020-09-30 17:16:55 · 1391 阅读 · 3 评论 -
对 el-table 进行二次封装
<template> <div class="swdTable"> <div class="table"> <el-table ref="multipleTable" :data="tableData1" tooltip-effect="dark" style="width: 100%" :header-cell-style="{ 'back.原创 2020-09-14 09:35:53 · 1352 阅读 · 0 评论 -
基于element的地址三级联动
基于element的级联选择器的地址三级联动,真的简单粗暴,直接附上代码地址json文件,请点击这里实现代码,重点还是在json文件的数据结构,处理好基本上就ok<template> <div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader v-model="value" :options="optio原创 2023-02-22 14:52:34 · 327 阅读 · 0 评论 -
Vue中引入vditor插件的正确用法
很多人看vditor的官网可能第一时间就想到在main.js里面引入,但是官网的例子又是一个实例化的过程,我们的spa不支持多个实例化,所以其实他的核心是new的过程是个实例化的过程,需要要真实的dom给他承载。向echars这些我们平时的引入使用是一样的附上代码,可直接拿到项目里面运行(必须引入插件vditor,npm install vditor --save)<template> <div class="order"> <h5>富文原创 2020-09-11 16:03:08 · 3424 阅读 · 1 评论 -
面试必问——react与vue的区别
原文地址:https://juejin.im/post/5ef55acde51d4534bf67a878 1.Vue和React源码区别1.1 Vue源码 1.1.1 挂载初始化$mounted会挂载组件,不存在 render 函数时需要编译(compile);...转载 2020-09-11 10:43:28 · 1288 阅读 · 0 评论 -
vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法组件通信的几种方式1、父子组件通信2、兄弟组件通信3、跨多层级组件通信4、任意组件(vuex)一、父子组件1、父组件通过props传递数据给子组件,子组件通过$emit发送事件传递数据给父组件(单向数据流)2、还可以通过v-model语法糖(双向数据绑定)3、$parent,$children对象来访问组件实例中的方法和数据4、$listeners,$sync(2原创 2020-08-12 15:47:18 · 591 阅读 · 0 评论 -
uniapp热更新(wgt)
uniapp分两种更新机制:一、整包更新(这种方式比较繁琐,即每次更新之后就要打云包,更新整包,用户体验也不好)二、资源包更新,即wgt(因第一种方法想到利用资源更新,用户体验大大提升,用户更新之后无需跳转到应用市场或者浏览器去重新更包,俗一点就是无感更新)wgt热更新的注意点一、必须要获取appid二、配置需要的版本名称和版本号三、判断平台,区分安卓ios获取相对应的下载连接(第一次整包需要,之后全部是wgt资源包的下载地址)四、在本地打包时和热更新时,App版本和wgt.原创 2020-08-12 11:06:52 · 22210 阅读 · 5 评论 -
三.overflow 内容溢出容器时的处理方式
三.overflow 内容溢出容器时的处理方式visible可见的 hidden隐藏 scroll出现滚动条 auto内容溢出才出现滚动条设置某个方向:overflow-x 水平方向 overflow-y垂直方向当某一个方向的值不为visible,另一个方向的值会自动设置为auto备注:隐藏元素的两种方式1.display:none;隐藏元素,不占位置2.visibility:hidden;隐藏元素,占位置overflow的应用场景:1.高度塌陷,子元素都浮动了,父元素会没有原创 2020-07-22 14:12:05 · 788 阅读 · 0 评论 -
二. 定位 position
二. 定位 position1.static 静态定位,默认定位不能配合left right bottom top使用。2.相对定位relative特点:①.相对于自己本身所在的位置进行移动定位②.配合left,right,top ,bottom使用,相对于自己的某条边往元素中心方向移动为正值③相对定位的元素不脱离标准流(灵魂定位)3.absolute绝对定位特点:①绝对定位的元素相对于html或者最近的有定位(除了static)的父元素进行定位②通过left,right,t原创 2020-07-22 14:11:29 · 153 阅读 · 0 评论 -
元素类型及转换
一.元素类型1.块级元素:div、h1-h6、p、列表、form特点:①占父元素宽度的一整行,若是设置死宽度,那多余的位置会用margin填充。②可以设置宽高③块级元素可以包含部分块级元素及所有的行内元素应用:若想子元素(块级元素)在父元素水平居中,对子元素设置margin:0 auto。2.行内元素:span/a/加粗/倾斜/input/select/textarea/label特点:①宽高由内容决定,不能设置宽高②一行显示多个③行内元素遵循盒模型,不能设置上下的pad原创 2020-07-22 14:10:48 · 948 阅读 · 0 评论 -
移动端布局
一.页面结构布局1.百分比布局。2.弹性盒布局。3.分栏布局。4.响应式布局。移动端布局为多种布局结合使用,达到完美适配效果二.单位1.px2.百分比3.em 相对单位,基于自身字体大小font-size来计算,所以不同的元素1em代表的具体大小可能不同(部分浏览器的默认字体大小为16px)4.vw viewport width,视窗宽度,1vw等于视窗宽度的1%5.vh viewport height,视窗高度,1vh等于视窗高度的1%注意:使用vw/vh,需设置met原创 2020-07-22 14:09:52 · 169 阅读 · 0 评论 -
四.css sprites 的原理
1.将多张背景图片等有规则的合并成一张背景图,即多张图片合为一张整图,然后用background-position来实现背景图片定位技术①,通过图片整合来减少对服务器的请求次数,从而减少页面的加载速度②,通过整合图片来减少图片的体积2.滑动门技术...原创 2020-07-22 14:12:21 · 122 阅读 · 0 评论 -
接上一篇图片转base64->图片上传
//图片处理的js文件export function uploadImgToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = function () { // 图片转base64完成后返回reader对象 r.原创 2020-07-22 13:55:46 · 187 阅读 · 0 评论 -
图片转Base64
export function uploadImgToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = function () { // 图片转base64完成后返回reader对象 resolve(reade.原创 2020-07-22 13:51:37 · 197 阅读 · 0 评论 -
基于element-ui的input二次封装,实现表单单个认证
由于项目有很多表单,很多都是一个,所以想起了封装input组件好了实现思路:因为本身表单就有验证,所以结合了表单的部分认证去实现,可以自己进行自定义模板操作代码如下:大家视情况,有些是不用点击事件触发的,按钮可以视情况而定props主要接收两个参数:input框类型,还有一个是验证的类型,因为我这里有textarea验证,限制长度,验证内容自定义,根据实际需求通过watch监听type的变化改变ruleForm下面的变量这个要注意,trigger如果是相对于多原创 2020-06-16 18:05:34 · 2280 阅读 · 0 评论 -
对双向数据绑定的理解
应该很多人面试都会被问到这个问题,现在趋势面试已经趋向于底层原理的刨底了,因为vue谁都会,你用vue做了一个项目,真的不能代表你对vue就很熟悉了,随着vue3.0的出现,双向数据绑定使用ES6的Proxy 作为其观察者机制,取代之前使用的Object.defineProperty。这篇文章我们先来说说怎么利用Object.defineProperty()去实现双向数据绑定的?首先vue通过...原创 2020-04-17 13:29:01 · 528 阅读 · 0 评论 -
vue引用本地图片地址遍历无法被浏览器编译解析的问题
前言:由于工作原因,一直没有时间更博,今天就写一下用vue的时候踩过的一些坑在做项目的过程中,让我印象最深刻的问题有两个:(1)在同一个页面上重复使用同一个组件的时候,数据源污染,在第二个数据加载的时候把第一个数据源给冲突了的情况这个问题当时整整搞了两个小时,后来才想到,对象作用域隔离的问题,也就是scope,怎么说呢?也就是你想在同一个页面重复使用同一个组件的时候,那你样式肯定是不一...原创 2019-06-13 18:26:44 · 1189 阅读 · 0 评论