vue 封装collapse

2024-08-08

从0到1发布一个Vue Collapse组件

需求背景最近在项目中遇到了一个类似Collapse的交互需求,因此到github上找了一圈关于Vue Collapse的相关轮子,但是多少都有些问题.有的是实现问题,例如vue2-collapse,伸缩部分采用max-height指定动画,存在缺陷:还有的是扩展性问题,遇到定制场景比较棘手.因此,决定自己撸一个Collapse组件.从项目中的一个需求,到目前已将它开源并发布到npm,还是踩了许多坑的.代码虽然简单,但是过程却不太容易.因此这篇文章不是安利这款组件r-collapse-vue,仅

vue封装插件并发布到npm上

vue封装插件并发布到npm上项目初始化首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录,创建文件夹和文件,最后结构是这样的然后根据需求,实现具体功能,这里我封装了一个轮播图组件mini-sliders,主要功能写在lib/slider.vue组件中功能写好后,我们要写index.js来封装组件 import VueComment from './VueComment.vue' c

echars vue 封装全局组件曲线柱状图同v-chars绿色系配置样式

Echars vue封装 ,曲线图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co

vue封装一些常用组件loading、switch、progress

vue封装一些常用组件loading.switch.progress github文档https://github.com/zengjielin/vue-component-library loading组件条形进度条圆形进度条 switch组件

浅析vue封装自定义插件

在使用vue的过程中,经常会用到Vue.use,但是大部分对它一知半解,不了解在调用的时候具体做了什么,因此,本文简要概述下在vue中,如何封装自定义插件. 在开始之前,先补充一句,其实利用vue封装自定义插件的本质就是组件实例化的过程或者指令等公共属性方法的定义过程,比较大的区别在于封装插件需要手动干预,就是一些实例化方法需要手动调用,而Vue的实例化,很多逻辑内部已经帮忙处理掉了.插件相对于组件的优势就是插件封装好了之后,可以开箱即用,而组件是依赖于项目的.对组件初始化过程不是很熟悉的可以参

Vue 封装axios(四种请求)及相关介绍(十三)

Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果 3.可以在对象之间传递和操作promise,帮助我们处理队列一.首先安装axios npm install axios; // 安装axios 二.引入axios 我是根据网上学习的,在目录下新建一个文件夹,新建两个文件 http.js 和 api.js 为什么要新建这两个文件, 我们在请求

基于Ant Design Vue封装一个表单控件

开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜欢可以先跳过. 缺点灵活性肯定是没有了,封装的还是有些过度,灵活度大大降低,没有使用slot,想加点啥目前是不可能的,等以后需要了再说,毕竟这个项目才刚刚开始. (为啥缺点只有一条?那不那啥吗,基于ant design vue封装的,他们都那么强大了,还能有啥缺点?封装后除了失去灵活性还能差啥?)

vue封装tab切换

vue封装tab切换预览: 第一种通过父传子标题,子传父事件子组件 <template> <div class='app'> <div class="tabs_header"> <div :class="['tabs_header_items',currentIndex==i?'active':'']" @click="itemsClick(i)" v-for="(v,i) in tabs

vue封装公用弹出框方法，实现点击出现操作弹出框

vue封装公用弹出框方法,实现点击出现操作弹出框如上图所示,这次要实现一个点击出现操作弹框的效果:并将这个功能封装成一个函数,便于在项目的多个地方使用. 具体思路是: 封装一个组件,组件保护一个插槽,我们可以根据不同的场景,利用插槽随意在这个弹框里插入任何元素,这个弹框显示时根据我鼠标的点击位置,定位弹窗的位置,并在组件里面监听鼠标抬起事件,触发事件时将弹窗隐藏: 接着在函数中利用createElement和appendChild方法将弹出框创建并插入到页面中: 本次实现基于vuecli3

基于Vue封装分页组件

使用Vue做双向绑定的时候,可能经常会用到分页功能接下来我们来封装一个分页组件先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-sel

Vue 封装可向左向右查看图片列表的组件

<template> <div class="content-container"> <div class="content-container-item content">  <transition-group tag="div" class="content-inner" name="list" m

vue封装第三方插件并发布到npm

前言写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装,主要提供思路,封装方法大同小异·,文章略长要有耐心. gitment gitment是一个基于github issues封装的评论插件,以这个插件作为演示,把它封装成vue插件.vue-gitment,该插件已发布到npm,并在自己的开源项目vueblog中安装使用项目初始化封装vue的插件用

vue封装组件的正确方式-封装类似elementui的组件

最近读了下element的源码,仿照他封装了两种不同的组件. 第一种:通过组件来调用显示的 <template>  <div class = "contine"> <p class = "title"> {{title}} </p> <slot class = "contine" name = "co

使用vue封装一个tab栏切换的左侧导航栏的公共组件

首先看最终效果图: 1.compent文件夹里添加tab文件夹,里面创建index.vue index.js index.css index.vue内的template部份代码如下:(最新更正:代码里所有a标签部份应该用router-link) <template> <div>  <div class="tabNav"> <div style="border: 1px solid rgba(2

vue 封装分页组件

分页一般都是调接口, 接口为这种格式 {code: 0, msg: "success",…} code:0 data:{ content:[{content: "11", time: "22", },…] //数据列表 nextPage:1 //上一页 number:0 //第几页 numberOfElements:10 prevPage:1 //下一页 size:10 //页数 totalElements:257 totalPages:26

仿探探卡片滑动vue封装并发布到npm

项目初始化使用 webpack-simple 方式比较方便和容易配置,原来的方式各种坑慎入 vue init webpack-simple vue-card-slide cd vue-card-slide npm run dev 项目结构如下所示更改webpack.config.js配置 entry: './src/lib/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '', filename

vue 封装axios以及使用中间代理 proxy

为什么需要封装呢?主要是为了更好管理项目以及增加复用性 1.首先在src文件夹下创建api文件夹 . utils文件夹 . server文件夹 api:创建一个index.js文件用来存放接口地址 utils:用来存放公用js文件 server:用来存放请求的接口数据 2.在package.json文件中增加以下代码 [以下代码是中间代理作用] 3.在api文件中的index.js中写入 [api里面的命名全部为大写,用于区分] const SAT_HOST = "http://lo

vue 封装方法

个我这个是局部引入方法,下次有需要全局在补上(全局:在main.js文件引入封装的方法js文件,然后用Vue.prototype) 一.新建一个js文件loading.js 二.编辑loading.js文件 1. 一次性导出多个方法在vue文档中引入(为什么要加{}可以看https://www.cnblogs.com/mei1234/p/9151922.html) 调用 2.单个方法的封装在你要用到的vue文件中引入 import {initData} from '../../assets/

vue 封装公用函数

Vue 函数封装格式化浏览器时间 /** * 格式化时间 * @param params * @param blo 默认为true * @returns {string} * @constructor 冯刚 2019年6月12日11点01分 */ function TimeConversion(params,blo=true){ var stamp = Date.parse(params); var newDate= new Date(stamp); var year = newDate.ge

vue封装一个简单的div框选时间的组件

记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框选实现 div框选效果,其实没有什么好的方法,就是获取鼠标事件,根据鼠标的位置,动态创建一个跟随鼠标的div.[注:这种方式需要依赖position的定位方式,一般鼠标事件位置是针对全局的,所以鼠标框选的div 位置的position最好父级元素是根元素的定位.不然,鼠标框选区域和被框选区域很难保持

vue封装element中table组件

后台系统,table被用的次数比较多,所以决定提出来作为组件 1.新建一个Table.vue文件  <template> <div class="table"> <el-table id="iTable" v-loading.iTable="options.loading" :data="list" :stripe="op

vue 封装collapse

热门专题