![](https://img-blog.csdnimg.cn/20190927151053287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
手写的功能组件
手写的功能组件
GllWyz
你所见即我,好与坏都不反驳
展开
-
tab组件
最新使用滚动条的方式写了tab组件,很新颖,分享记录需求:1、tab组件没有占满父级的宽度的时候,如图一,没有左右两侧的icon2、tab组件占满父级的宽度的时候,如图二,有左右两侧的icon,点击icon可以进行左右移动3、路由进行变化的时候,此时的路由对应的tab应该显示在可见区域内,即随着路由的变化,tab的可见区域的内容也随着变化代码:注:所有使用id找dom的都可以使用ref来替代html:<div class="notesParent"> /..原创 2021-07-11 20:39:20 · 501 阅读 · 0 评论 -
vue 拖拽【对多个div进行操作】
一、原理分析onmousedown事件 var disX=ev.clientX-oDiv.offsetLeft var disY=ev.clientY-oDiv.offsetToponmousemove事件var l=ev.clientX-disX;var t=ev.clientY-disY;二、代码实例【可以直接运行】 <div ref="demo"...原创 2018-08-29 10:37:48 · 3762 阅读 · 4 评论 -
vue 拖拽【单个div实现拖拽】
1、HTML<div class="kongtiaojifang" ref="kongtiao" @mousedown="mouseDownHandleelse($event)" @mouseup="mouseUpHandleelse($event)"></div>2、JS<script>export default { name: ...原创 2019-03-21 15:13:45 · 8120 阅读 · 0 评论 -
vue 拉伸
要求和效果:元素定位到bottom为0,左右不可以拖动,只能向上向下拖动,向上可以拖动到窗口可视区域最高处,向下拖动的极限就是整个元素的高度为0,拖动的时候,位置不变,增减高度需要下载js-cookie,也可以直接使用localStorage不用下载js-cookie插件,然后代码就可以直接运行HTML:<template> <div class="fo...原创 2019-07-03 16:07:15 · 2600 阅读 · 0 评论 -
vue 抽奖
<template> <ul> <li v-for="item in arr" v-bind:key="item.id" v-bind:class="itemActiveClass(item)" > <span>{{ item.label }}</span> &...原创 2020-04-08 16:44:33 · 815 阅读 · 0 评论 -
vue 页码环组件
前言:因为这个功能要求的比较多,所以也没有找到合适的三方可以用,就自己写了一个但功能不是很完善,下面的代码是男朋友写的,可配置性比较高,自己想在页面上展示几个数组都可以自己定义一、功能要求二、效果展示注:没有做鼠标的禁选功能,所以点击的时候出现了背景色1、点击上一层,可以一直向上一层,到最高层的时候,也不会结束,重新开始新的一轮的循环2、点击下一层,可以一直向下一层,...原创 2019-10-24 13:11:40 · 288 阅读 · 0 评论 -
通过递归实现多级菜单
<style scoped> aside { width: 200px; height: 300px; overflow: auto; }</style><template> <div class="home"> <aside> <tab-list v-bind:active="active" v-bind:list="data" .原创 2020-07-11 20:56:19 · 961 阅读 · 0 评论 -
vue 拖拽放大缩小容器组件
代码可以直接运行实现的效果:可以向四个方向以及四个角落进行拉伸,拖拽封装到GitHub上了:https://github.com/GuLinLing/vue-resize-box<style scoped> .resize-box { position: relative; display: table; border: 1px solid ...原创 2019-07-08 17:21:53 · 8730 阅读 · 4 评论