![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3
run-Ameng
这个作者很懒,什么都没留下…
展开
-
Jeecg 自定义详情页追加导航栏
Jeecg 自定义详情页追加导航栏要实现的效果、-点击详情。跳转详情页面,详情追加到tab导航栏。但是不在菜单栏显示实现步骤在菜单栏设置路由2。在需要跳转的地方设置路由(传递id)// 点击跳转详情页面xiangqing(id){ this.$router.push({ path:`/xxx/${id}`, }}3,在详情页面从路由中获得id id =this.$route.params.id,用发送请求...原创 2021-12-16 14:06:13 · 615 阅读 · 0 评论 -
Vue3自己封装 confirm 函数
Vue3自己封装 confirm 函数一。 封装 confirm 组件 confirm.vue<template> <div class="confirm" :class='{ fade: fade }'> <div class="wrapper" :class='{ fade: fade }'> <div class="header"> <h3>{{title}}</h3>原创 2021-09-28 23:12:44 · 1551 阅读 · 1 评论 -
vue3——自己实现数据无限加载功能的封装
vue3——自己实现数据无限加载功能的封装一、封装的意义数据较多的时候,滑动滚动条显示加载状态,可以给用户很好的体验代码维护性更好代码可复用二、如何封装?需要用到@vueuse/core中的useIntersectionObserver,用来判断元素是否出现在可视区链接:useIntersectionObserver1. 准备项目根目录下打开任意终端,执行npm install @vueuse/core@5.3.0,这里安装的固定版本,各位按需选择因考虑复用组件,故封装为全局组件,老原创 2021-09-27 16:16:00 · 574 阅读 · 1 评论 -
Vue3 制作发送验证码倒计时
Vue3 制作发送验证码倒计时提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录Vue3 制作发送验证码倒计时前言一、怎么制作验证码定时器包?采用 VueUse的包。useIntervalFn( )二、使用步骤1.设置发送验证码按钮2.功能实现3.样式总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考原创 2021-09-25 12:21:58 · 2047 阅读 · 2 评论 -
Vue3封装 page 分页组件
Vue3封装 page 分页组件实现效果分页组件封装 page.vue<template> <div class="pagination"> <a @click='changePage(false)' href="javascript:;">上一页</a> <span v-if='currentPage > 3'>...</span> <a @click='changePage(item)原创 2021-09-24 21:24:33 · 1196 阅读 · 1 评论 -
Vue3封装 Message消息提示实例函数
Vue3封装 消息提示实例函数Vue2.0使用 Vue.prototype.$message = function () {}vue3.0使用app.config.globalProperties挂载原型方法app.config.globalProperties.$message = Message也支持直接导入函数使用 import Message from './Message.js样式布局封装 message.vue<template> <Transition na原创 2021-09-23 22:15:13 · 1932 阅读 · 0 评论 -
Vue3封装 消息提示实例函数
Vue3封装 消息提示实例函数组件功能分析:固定顶部显示,有三种类型:成功,错误,警告。显示消息提示时需要动画从上滑入且淡出。组件使用的方式不够便利,封装成工具函数方式。样式布局封装 message.vue<template> <Transition name="down"> <div class="my-message" :style="style[type]" v-show='isShow'> <!-- 上面绑定的是样式原创 2021-09-23 17:53:31 · 309 阅读 · 0 评论 -
vue按钮组件的自定义封装
vue按钮组件的自定义封装封装按钮组件 button.vue<template> <button class="xtx-button ellipsis" :class="[size,type]"> <slot /> </button></template><script>export default { name: 'XtxButton', props: { size: { type原创 2021-09-22 20:05:51 · 355 阅读 · 0 评论 -
Vue3页面滚动容易忽略的小bug
Vue3 每次切换路由的时候滚动到顶部//在路由配置中添加scrollBehavior()方法const router = createRouter({ history: createWebHashHistory(), routes, scrollBehavior () { return { left: 0, top: 0 } }})原创 2021-09-18 14:32:09 · 493 阅读 · 0 评论 -
vue中自己封装面包屑组件
vue中自己封装面包屑组件要实现效果前言很多电商类产品都需要实现面包屑导航,用来优化用户体验一.初级面包屑封装组件1.封装基础结构组件 xxx.vue<template> <div class='xtx-bread'> <div class="xtx-bread-item"> <RouterLink to="/">首页</RouterLink> </div> <i cl原创 2021-09-16 23:23:52 · 501 阅读 · 0 评论 -
在Vue3中如何使用依赖注入完成组件之间的数据传递
教你在Vue3中如何使用依赖注入完成组件之间的数据传递使用依赖注入父组件向子孙组件传递数据// 父组件import 子孙组件import {ref,provide} from 'vue' setup(){ provide('moneyInfo',1000) return{moneyInfo} }//孙子组件import {inject} from 'vue'setup(){ const moneyInfo=inject('moneyInfo') ret原创 2021-09-12 22:49:24 · 825 阅读 · 0 评论 -
vue持久化
Vue的持久化文章目录Vue的持久化前言一、为什么要做Vue的持久化?二、使用步骤1)首先:我们需要安装一个vuex的插件`vuex-persistedstate`来支持vuex的状态持久化。2)然后:在`src/store` 文件夹下新建 `modules` 文件,在 `modules` 下新建 `user.js` 和 `cart.js`3)继续:在 `src/store/index.js` 中导入 user cart cate模块。4)最后:使用vuex-persistedstate插件来进行持久化原创 2021-09-12 09:52:39 · 2873 阅读 · 0 评论 -
教你如何在vue项目中封装通用的axios
教你如何在vue项目中封装通用的axios文章目录教你如何在vue项目中封装通用的axios前言一、为什么要封装axios?二、封装步骤1.安装依赖包2.开始封装3如何使用扩展1. 对象访问方式2. 动态键前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、为什么要封装axios?统一管理基地址对请求、响应进行处理方便向后原创 2021-09-11 22:21:47 · 802 阅读 · 0 评论 -
带小白进入Vue3
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、为什么学习Vue3?现状 :Vue3的优点Vue3展望二、 创建vue应用1.基于Vue脚手架创建项目2:项目代码结构分析3.根组件结构4. 路由模块分析5.优势:按需导入3. vue3的API函数1.API-setup函数2. 组件API-生命周期3. 数据的响应式1.组合API-reactive函数2. 组合API-toRef函数3. 组合API-toRefs函数4. 组合API-ref函数5. 数据响应式的总结6.原创 2021-09-10 21:32:36 · 324 阅读 · 2 评论