![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
封装组件
文章平均质量分 58
itpeilibo
不怕孤独,努力沉淀;
于淡泊中,平和自在。
展开
-
【Vue3】封装按钮组件
目的:封装一个通用按钮组件,有大、中、小、超小四种尺寸,有默认、主要、次要、灰色四种类型。原创 2023-03-07 08:30:00 · 701 阅读 · 1 评论 -
【Vue3】封装数字框组件
vue3.0封装组件支持v-model的时候,父传子。## 数量选择组件-v-model语法糖> 目标:掌握vue3.0的v-model语法糖原理在vue2.0中v-mode语法糖简写的代码 ``在vue3.0中v-model语法糖有所调整:原创 2023-03-06 08:30:00 · 2417 阅读 · 5 评论 -
【Vue3】vue3 + ts 封装城市选择组件
城市数据并不是直接从接口服务器中获取的,而是从阿里云服务器上获取的数据,所以不能使用封装好的request发送请求,直接使用。注意:完整地址需要父组件传递给子组件,将来如果登录的用户,父组件可以获取到完整的地址。能够封装城市选择组件,并且完成基础的显示隐藏的交互功能。(3)子组件选择完城市,需要将数据传递给父组件。(1)父组件将城市数据传递给子组件。(2)子组件接收,并且进行展示。(4)点击弹层外部,关闭弹层。(4)点击弹层外部,关闭弹层。(4)父组件接受数据并且处理。(4)父组件接受数据并且处理。原创 2023-02-28 08:30:00 · 8060 阅读 · 0 评论 -
【Vue3】面包屑组件封装
目标:掌握面包屑组件如何使用。(2)注册成全局组件应用。原创 2023-02-22 12:32:48 · 448 阅读 · 0 评论 -
【Vue3】组件数据懒加载
电商类网站,尤其是首页,内容有好几屏,而如果一上来就加载所有屏的数据,并渲染所有屏的内容会导致首页加载很慢。添加了ref类型提示:MaybeElementRef -> 暴露出去的taget如果赋值类型不对会进行提示。首页中,很多地方都应该使用组件数据懒加载这个功能,不管是哪个模块使用,下面代码都会重复书写。数据懒加载:等组件正式进入到可视区中时,才把组件内部的ajax请求发起,否则不请求数据。目标:封装组件数据懒加载可复用的逻辑。(1)封装通用的懒加载数据api。给ref添加组件类型。原创 2023-02-20 08:30:00 · 2466 阅读 · 0 评论 -
【Vue3】 vue3图片懒加载-封装自定义指令
目标:了解如何实现数据懒加载电商类网站,图片会非常的多,而如果一上来就加载所有的图片,会导致网页加载很慢。图片懒加载:等图片正式进入到可视区中时,才加载对应的图片,否则不请求图片问题如何知道图片进入或者离开了可视区?通过vueuse封装的(1)的基本使用ref } from 'vue' const target = ref < HTMLImageElement | null >(null) // stop停止监听 const {原创 2023-02-15 08:30:00 · 498 阅读 · 0 评论 -
【Vue3】首页主体-面板组件封装
新鲜好物、人气推荐俩个模块的布局结构上非常类似,我们可以抽离出一个通用的面板组件来进行复用。(4)插槽处理,右侧的查看全部和面板具体的内容不应该写死。(3)父组件传入title和subTitle。标题和子标题应该有父组件传递进来,不能写死。目标:封装一个通用的面板组件。(2)props处理。原创 2023-02-14 08:30:00 · 669 阅读 · 0 评论 -
【Vue3】首页主体-封装查看更多组件
封装一个通用的查看更多组件。(3)定义全局组件类型。> 1. 子组件如果只有一个根标签,父组件传递过去的数据会能够穿透 2. 如果子组件通过defineProps定义的数据不会出现在标签的身上原创 2023-02-13 08:30:00 · 202 阅读 · 0 评论 -
【Vue3】电商网站吸顶功能
电商网站的首页内容会比较多,页面比较长,为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类。需要分类导航一直可见,所以需要一个吸顶导航的效果。(1)安装@vueuse/core 包,它封装了常见的一些交互逻辑。(6)修复bug,为了吸顶头部的内容不遮住不吸顶的头部。(3)提供样式,控制sticky的显示和隐藏。(2)Layout首页引入吸顶导航组件。(5)控制sticky的显示和隐藏。目标:完成头部组件吸顶效果的实现。(1)新建吸顶导航组件。(2)在吸顶导航中使用。vueuse/core : 组合原创 2023-02-11 08:30:00 · 985 阅读 · 1 评论 -
【Vue3 组件封装】vue3 轮播图组件封装
项目中会多次使用到轮播图组件,但是轮播图渲染的数据是不一样的。但是轮播图的基本功能都是一样的,比如图片切换,自动播放等等。(1)父传子的方式将数据传给通用轮播图组件。(4)覆盖样式,控制箭头和小圆点的位置。目标: 基于pinia获取轮播图数据。文件中封装接口,用于获取轮播图数据。因此需要封装一个通用的轮播图组件。文件中定义轮播图数据的类型声明。(4)通过开发者工具查看数据。(1)通用轮播图的基本结构。(2)全局注册通用轮播图。(1)父组件传值给轮播图。(3)在广告组件中使用。(3)轮播图的播放逻辑。原创 2023-02-10 00:23:21 · 5240 阅读 · 0 评论