分类：vue

2021
08-06

vue使用better-scroll实现横向滚动的方法实例

一、滚动的实现原理better-scroll的滚动原理和浏览器原生滚动原理是一样的，当子盒子的高度大于父盒子的高度，就会出现纵向滚动；同理，如果子盒子的宽度大于父盒子的宽度，那么就会出现横向滚动。二、better-scroll的html结构先来看一下better-scroll常见的html结构：<divclass="wrapper"><ulclass="content"><li>...</li><li>...</li>...</ul></div>BetterScroll应用于外部wrapper容器，并且滚动部分是c... 继续阅读 >
2021
08-06

vue3如何按需加载第三方组件库详解

vue3如何按需加载第三方组件库详解 前言以ElementPlus为例，配置按需加载组件和样式。环境vue3.0.5vite2.3.3安装ElementPlusyarnaddelement-plus#ORnpminstallelement-plus--save完整引入import{createApp}from'vue'importElementPlusfrom'element-plus';import'element-plus/lib/theme-chalk/index.css';importAppfrom'./App.vue';constapp=createApp(App)app.use(ElementPlus)app.mount('#app')可以看出ElementPlus的js和c... 继续阅读 >
2021
08-06

vue3 可拖动的左右面板分割组件实现

目录分解组件左侧面板右侧面板入参分解propsslots具体实现如何拖动呢？事件监听宽度处理优化buggit地址最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度，本文就整理一下，分享给大家，具体如下：效果图分解组件整体使用flex布局左侧面板面板的具体内容通过slot具名插槽传入。title通过prop传入可拖动，为了保证内容样式不会被拖动所破坏，对面板的宽度设定最大值/最小值右侧面板右侧面板... 继续阅读 >
2021
07-31

vue封装axios的几种方法

目录基础版第一步：配置axios第二步：封装请求第三步：使用进阶版基础版第一步：配置axios首先，创建一个Service.js，这里面存放的时axios的配置以及拦截器等，最后导出一个axios对象。我平常elementUI用的比较多，这里你也可以使用自己的UI库。importaxiosfrom'axios'import{Message,Loading}from'element-ui'constConfigBaseURL='https://localhost:3000/'//默认路径，这里也可以使用env来判断环境letloadingInsta... 继续阅读 >
2021
07-31

vue实现主题切换的多种思路分享

目录动态改变主题第一种办法：动态组件第二种办法，路由隔离总结额外补充基于css的两种方法方法一多套css方法二scss动态切换变量动态改变主题首先需要解决的是如何知道你需要显示哪个主题，并且可以动态切换。我选择的方法是queryString。我们打开url的时候，可以在后面缀上?theme=xx,读取这个xx储存起来即可。第一种办法：动态组件当主题的路由并没有发生变化，仅是组件内部的样式，功能发生了变化，我们可以将一个组件复制... 继续阅读 >
2021
07-31

vue实现滚动加载的表格

目录实现效果滚动加载知识储备组件封装1.组件命名2.提供的props3.使用举例组件封装总结1.尽可能地使用computed计算属性2.给表格提供插槽另一种滚动加载数据的实现实现效果码云地址滚动加载知识储备参考ant-design-vue中list滚动加载的思路，使用vue-infinite-scroll加上vue-virtual-scroller作为解决方案。组件封装因为整个系统使用的框架是ant-dsign-vue，所以组件封装的变量命名风格尽可能的与a-table保持一致。1.组件命名XSc... 继续阅读 >
2021
07-30

Vue实现简易购物车案例

Vue实现简易购物车案例 本文实例为大家分享了Vue实现简易购物车的具体代码，供大家参考，具体内容如下先来看一下完成后的效果吧。CSS部分这里没什么好说的，就是v-cloak这一个知识点table{border:1pxsolid#e9e9e9;border-collapse:collapse;border-spacing:0;}th,td{padding:8px16px;border:1pxsolid#e9e9e9;text-align:center;}th{background-color:#f7f7f7;color:#5c6b77;font-weight:600;}[v-cloak]{display:non... 继续阅读 >
2021
07-30

vue实现简单购物车案例

vue实现简单购物车案例 本文实例为大家分享了vue实现简单购物车的具体代码，供大家参考，具体内容如下代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><divid="app"><table><thead><tr><th></th><th>书籍名称</... 继续阅读 >
2021
07-26

LRU算法在Vue内置组件keep-alive中的使用

目录vue的keep-alive内置组件的使用也是使用了改算法，源码如下：实现一个自己的LRU算法另一种vue的keep-alive内置组件的使用也是使用了改算法，源码如下：exportdefault{name:"keep-alive",//抽象组件属性,它在组件实例建立父子关系的时候会被忽略,发生在initLifecycle的过程中abstract:true,props:{//被缓存组件include:patternTypes,//不被缓存组件exclude:patternTypes,//指定缓... 继续阅读 >
2021
07-26

vue实现水波涟漪效果的点击反馈指令

目录水波效果来看实现定制一个水波纹默认样式计算水波纹的位置和直径鼠标按下时创建水波鼠标抬起时销毁水波通过指令binding去扩展你的水波选项写在最后水波效果当用户点击时，会以点击中心为圆心产生一个水波扩散的涟漪效果，适用各个场景，美观又不浮夸，关键是可以给用户带来很直观的反馈。来看实现首先这里基于Vue3自定义指令进行封装，Vue3的自定义指令跟Vue2相比变动不是很大，。我们的目标是完成一个水波指令的基本原型，这... 继续阅读 >
2021
07-22

vue 实现上传组件

目录1.介绍2.思路文件上传的两种实现方式3.生命周期4.代码草稿5.具体实现1.介绍效果如下图 2.思路文件上传的两种实现方式1.From形式<formmethod="post"enctype="multipart/from-data"action="api/upload"><inputtype="filename="file"><buttontype="submit">Submit</button></form>form的method属性指定为"post"请求，通过HTML表单发送数据给服务器，并返回服务器的修改结果，在这种情况下Content-Type是通... 继续阅读 >
2021
07-22

vue基于Teleport实现Modal组件

目录1.认识Teleport2.Teleport的基本用法3.第一步优化4.第二步优化5.实现Modal组件1.认识Teleport像我们如果写Modal组件、Message组件、Loading组件这种全局式组件，没有Teleport的话，将它们引入一个.vue文件中，则他们的HTML结构会被添加到组件模板中，这是不够完美的。没有Teleport有Teleport下面就实战介绍一下如何用Teleport开发Modal组件2.Teleport的基本用法Teleport的写法十分简单，只需要用<Teleport></Teleport... 继续阅读 >
2021
07-22

vue自定义弹框效果（确认框、提示框）

vue自定义弹框效果（确认框、提示框） 本文实例为大家分享了vue自定义弹框效果的具体代码，供大家参考，具体内容如下1、自定义确认框和提示框根据传入的type来判断是确认框或提示框<template><transitionname="confirm-fade"><divv-if="isShowConfirm"class="my-confirm"@click.stop="clickFun('clickCancel')"><divclass="confirm-content-wrap"@click.stop><h3class="my-confirm-title"v-show="titleText!=''">{{titleText}}</h3>... 继续阅读 >
2021
07-22

Vue中ElementUI分页组件Pagination的使用方法

Vue中ElementUI分页组件Pagination的使用方法 Vue中ElementUI分页组件Pagination的使用，供大家参考，具体内容如下一、概要ElementUI提供了el-pagination组件，只要配置相应得参数和事件，即可实现分页。二、实现1、基本用法<divclass="pagination"><el-paginationbackgroundlayout="total,sizes,prev,pager,next,jumper":current-page="tablePage.pageNum":page-size="tablePage.pageSize":page-sizes="pageSizes":total="t... 继续阅读 >
2021
07-22

Vue必学知识点之forEach()的使用

前言在前端开发中，经常会遇到一些通过遍历循环来获取想要的内容的情形，而且这种情形在开发中无所不在，那么本篇博文就来分享一个比较常用又经典的知识点：forEach()的使用。forEach()是前端开发中操作数组的一种方法，主要功能是遍历数组，其实就是for循环的升级版，该语句需要有一个回调函数作为参数。回调函数的形参依次为：1、value：遍历数组的内容；2、index：对应数组的索引，3、array：数组自身。在Vue项目中，标签... 继续阅读 >