当前位置: 首页 > news >正文

前端项目,个人笔记(二)【Vue-cli - 引入阿里矢量库图标 + 吸顶交互 + setup语法糖】

目录

1、项目中引入阿里矢量库图标

2、实现吸顶交互

3、语法糖--<script setup>

3.1、无需return 

3.2、子组件接收父组件的值-props的使用

3.3、注册组件


1、项目中引入阿里矢量库图标

步骤一:进入阿里矢量库官网中:iconfont-阿里巴巴矢量图标库  ,挑选自己需要的图标:

        我在查看其他博主的博客时,都说是把上面这个链接,添加到项目的Index.html中,以link的方式,但是我这边没有得到icon图标的效果~

        以下是我的实现:在浏览器中新建一个标签页把这个链接打开,复制里面的所有内容,例:

步骤二:在styles下,建一个icon.css文件,把上面的内容复制进去,然后在main.js文件中,引入他们:

步骤三:使用

复制icon的名字:

使用i标签包裹,class中填写复制的代码:

效果:


2、实现吸顶交互

吸顶什么意思:

例如b站,页面的最顶部时,顶部是这样的:

而当我们下滑屏幕,看不到上面红框部分时,就会弹出一个新的顶部:

这个新弹出的顶部部分就是一直牢牢吸在顶部的,只是在屏幕顶部时不展示而已~

此时,我们先编写一个vue组件,这个组件是永久在屏幕最上方,例如:

<script setup>
// import { useScroll } from '@vueuse/core'
const { y } = useScroll(window)
</script><template><div class="app-header-sticky"><div class="container"><RouterLink class="logo" to="/" /><!-- 导航区域 --><ul class="app-header-nav "><li class="home"><RouterLink to="/">首页</RouterLink></li><li><RouterLink to="/">居家</RouterLink></li><li><RouterLink to="/">美食</RouterLink></li><li><RouterLink to="/">服饰</RouterLink></li><li><RouterLink to="/">母婴</RouterLink></li><li><RouterLink to="/">个护</RouterLink></li><li><RouterLink to="/">严选</RouterLink></li><li><RouterLink to="/">数码</RouterLink></li><li><RouterLink to="/">运动</RouterLink></li><li><RouterLink to="/">杂项</RouterLink></li></ul><div class="right"><RouterLink to="/">品牌</RouterLink><RouterLink to="/">专题</RouterLink></div></div></div>
</template><style scoped lang='scss'>
.app-header-sticky {width: 100%;height: 80px;position: fixed;left: 0;top: 0;z-index: 999;background-color: #fff;border-bottom: 1px solid #e4e4e4;// 此处为关键样式!!!// 状态一:往上平移自身高度 + 完全透明transform: translateY(-100%);opacity: 0;// 状态二:移除平移 + 完全不透明&.show {transition: all 0.3s linear;transform: none;opacity: 1;}.container {display: flex;align-items: center;}.logo {width: 200px;height: 80px;background: url("@/assets/images/logo.png") no-repeat right 2px;background-size: 160px auto;}.right {width: 220px;display: flex;text-align: center;padding-left: 40px;border-left: 2px solid var(--xtx-color);a {width: 38px;margin-right: 40px;font-size: 16px;line-height: 1;&:hover {color: var(--xtx-color);}}}
}.app-header-nav {width: 820px;display: flex;padding-left: 40px;position: relative;z-index: 998;li {margin-right: 40px;width: 38px;text-align: center;a {font-size: 16px;line-height: 32px;height: 32px;display: inline-block;&:hover {color: var(--xtx-color);border-bottom: 1px solid var(--xtx-color);}}.active {color: var(--xtx-color);border-bottom: 1px solid var(--xtx-color);}}
}
</style>

这个部分就是牢牢在顶部,我们给第一个div标签再加一个class属性:show,效果:

但是我们想要的不是一直在最上方,而是滑动一定距离后才出现~

我们就可以安装一个依赖:

npm i @vueuse/core

关于@vueuse/core的其他使用我们可以看官网:VueUse中文文档

关于我们准备使用的动态获取滚动位置和状态,可以看这里:Functions | VueUse中文文档

我们在代码中,可做如下修改:

        上述代码意思:根据滚动距离判断当前show类名是否显示,大于78显示,小于78,不显示【78指像素px】

到这里就实现完啦~~~


3、语法糖--<script setup>

3.1、无需return 

注:<script setup> 语法糖:

        它允许你以更简洁、更直观的方式编写组件的逻辑。<script setup> 是 Vue 单文件组件(.vue 文件)中 <script> 标签的一个变体,它提供了 Composition API 的更紧凑的写法。

        当你在 Vue 组件中使用 <script setup> 时,你实际上是在告诉 Vue 编译器这个 <script> 块应该使用 setup() 函数的作用域,而不需要显式地调用 setup() 函数。                setup() 是 Vue 3 Composition API 中的一个关键函数,用于组织组件的逻辑。

        在 <script setup> 中,你可以直接定义响应式状态、计算属性、方法、生命周期钩子、以及其他任何在 setup() 函数中通常可以定义的东西。这些定义会自动暴露给模板,因此你不需要通过 return 语句来显式暴露它们

3.2、子组件接收父组件的值-props的使用

父组件:

子组件接收并使用:

效果:

3.3、注册组件

以前注册组件:

现在注册就不用那么麻烦了:

导入后立即可用:

相关文章:

前端项目,个人笔记(二)【Vue-cli - 引入阿里矢量库图标 + 吸顶交互 + setup语法糖】

目录 1、项目中引入阿里矢量库图标 2、实现吸顶交互 3、语法糖--<script setup> 3.1、无需return 3.2、子组件接收父组件的值-props的使用 3.3、注册组件 1、项目中引入阿里矢量库图标 步骤一&#xff1a;进入阿里矢量库官网中&#xff1a;iconfont-阿里巴巴矢量…...

OpenCV 介绍使用

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇:OpenCV4.9.0开源计算机视觉库使用简要说明 下一篇: OpenCV&#xff08;开源计算机视觉库&#xff1a;http://opencv.org&#xff09;是一个开源库&#xff0c;包含数百种计算机视觉算法。…...

Python 10个面试题实例

当然&#xff01;以下是10个Python面试题及其示例解决方案的中题目&#xff1a; 1.反转字符串: string "Hello, World!" reversed_string string[::-1] print(reversed_string)2.检查字符串是否为回文: def is_palindrome(string):return string string[::-1]r…...

Python:熟悉简单的skfuzzy构建接近生活事件的模糊控制器”(附带详细注释说明)+ 测试结果

参考资料&#xff1a;https: // blog.csdn.net / shelgi / article / details / 126908418 ————通过下面这个例子&#xff0c;终于能理解一点模糊理论的应用了&#xff0c;感谢原作。 熟悉简单的skfuzzy构建接近生活事件的模糊控制器 假设下面这样的场景, 我们希望构建一套…...

opencv函数使用查找

opencv官方文档地址&#xff1a;https://docs.opencv.org/4.x/index.html 先选对应的版本opencv-python 以这个函数为例子 model cv2.face.LBPHFaceRecognizer.create() 点开后找face类的LBP里面就有create函数的用法...

使用 pypdf 快速切分 PDF 文件

categories: [Python] tags: Python MacOS 写在前面 最近有小伙伴问我怎么把 PDF 文档切分成两个大小相近的 PDF文档, 要是在 mac 上, 直接无脑预览就行了, 但是这样不够跨平台, 之后我也尝试过 pymupdf, 但是奈何不支持 arm 架构, 后来还是用 Python 原生的 pypdf 了. 有 AI…...

Avalonia(11.0.2)+.NET6 打包运行到银河麒麟V10桌面系统

操作系统配置 项目结构 .net版本 这次我们是在银河麒麟V10系统上打包运行Avalonia(11.0.2)+.NET6.0的程序 开始打包 准备Linux下的桌面快捷方式以及图标 调整AvaloniaApplication2.Desktop.csproj的配置项,重点看下图红色线圈出来的部分,里面涉及到了LinuxPath的设置。完整的配…...

Mac nvm install failed python: not found

报错 $>./configure --prefix/Users/xxx/.nvm/versions/node/v12.22.12 < ./configure: line 3: exec: python: not found nvm: install v12.22.12 failed!解决方法 到 App 文件夹&#xff0c;并且打开 cd /System/Applications/Utilities/ open .记得改完 Rosetta 之…...

C语言基础知识复习(考研)

&#xff08;1&#xff09;C语言文件操作 1 什么是文件 文件有不同的类型&#xff0c;在程序设计中&#xff0c;主要用到两种文件&#xff1a; (1)程序文件。包括源程序文件(后缀为.c)、目标文件(后缀为.obj)、可执行这种文件的内容是程序代码。 (2)数据文件。文件的内容不是…...

Prometheus Grafana 配置仪表板

#grafana# 其实grafana提供了丰富的Prometheus数据源的仪表板&#xff0c;基本上主流的都有&#xff0c;通过下面官方地址可查阅 Dashboards | Grafana Labs 这里举例说明&#xff0c;配置node_exporter仪表板 首先&#xff0c;在上面的网站搜索 node 可以查到蛮多的仪表板…...

docker 哲学 - 网络桥接器、容器网络接口 、容器间的通信方式

1、解释 docker0 veth eth 2、vethXX 和 ethXX 是肯定一一对应吗 比如 eth1 对应 veth1 3、如果 A容器使用 默认创建方式 。定义他内部网络为 eth0&#xff0c;容器B使用 --network 连上 已创建的网络 172.89.2.1 。此时假设 B的 ip是 172.89.2.2 &#xff0c;容器网络接口是 e…...

Python 将HTML转为PDF、图片、XML、XPS格式

网页内容是信息传播的主要形式之一。在Web开发中&#xff0c;有时候我们需要将HTML文件以不同的格式保存或分享&#xff0c;比如PDF、图片&#xff08;如PNG或JPEG&#xff09;、XML或XPS等。这些格式各有优势&#xff0c;适合不同的用途。在这篇文章中&#xff0c;我们将介绍如…...

排序算法记录(冒泡+快排+归并)

文章目录 前言冒泡排序快速排序归并排序 前言 冒泡 快排 归并&#xff0c;这三种排序算法太过经典&#xff0c;但又很容易忘了。虽然一开始接触雀氏这些算法雀氏有些头大&#xff0c;但时间长了也还好。主要是回忆这些算法干了啥很耗时间。 如果在笔试时要写一个o(nlogn)的…...

简单聊聊如何更优雅地初始化对象:构造函数、Builder模式和静态工厂方法比较

大家好&#xff0c;我是G探险者。 在平时的java编程中&#xff0c;你肯定会有过对一些实体对象进行初始化的set操作&#xff0c;有的对象的属性较少可能还好点&#xff0c;当一个对象拥有许多属性时&#xff0c;通常的初始化方式可能显得笨拙而不直观&#xff0c;代码写的很不…...

跳过mysql权限验证来修改密码-GPT纯享版

建议重新配置一遍&#xff0c;弄成功好多次了&#xff0c;每次都出bug&#xff0c;又要重新弄&#xff0c;不是过期就是又登不进去了&#xff0c;我服了 电脑配置MySQL环境&#xff08;详细&#xff09;这个哥们的10min配完&#xff0c;轻轻松松&#xff0c; 旧方法&#xff…...

Vue3快速上手(十七)Vue3之状态管理Pinia

一、简介 Pinia官网:https://pinia.vuejs.org/zh/ 从官网截图里可以直接看到,pinia是一个vuejs的状态(数据)管理工具。功能性同vuex。logo是小菠萝。它是一个集中式状态管理工具。就是将多个组件共用的数据管理起来,重复利用。有点类似缓存的意思。 二、Pinia环境搭建 …...

时序预测 | Matlab实现BiTCN-GRU双向时间卷积神经网络结合门控循环单元时间序列预测

时序预测 | Matlab实现BiTCN-GRU双向时间卷积神经网络结合门控循环单元时间序列预测 目录 时序预测 | Matlab实现BiTCN-GRU双向时间卷积神经网络结合门控循环单元时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现BiTCN-GRU双向时间卷积神经网络结…...

学习笔记Day14:Linux下软件安装

软件安装 Anaconda 所有语言的包(package)、依赖(dependency)和环境(environment)管理器&#xff0c;类似应用商店 Conda < Miniconda < Anaconda&#xff08;有交互界面&#xff09; Linux下Miniconda即可 安装Miniconda 搜索北外/清华miniconda镜像网站&#xff…...

【CXL协议-事务层之CXL.io(3)】

3.1 CXL.io CXL.io 为 I/O 设备提供非一致的加载/存储接口。 图 14 显示了 CXL.io 事务层在 Flex Bus 分层结构中的位置。 交易类型、交易数据包格式、基于信用的流量控制、虚拟通道管理和交易排序规则遵循PCIe定义&#xff1b; 请参阅 有关详细信息&#xff0c;请参阅 PCI Ex…...

如何自己构建 Ollama 模型

如何自己构建 Ollama 模型 0. 引言1. 下载原始模型2. 创建 Modelfile 文件3. 构建 Ollama 模型4. 运行自构建的 Ollama 模型 0. 引言 针对模型新出的大模型&#xff0c;可能 Ollama Models Library 不提供&#xff0c;或者会在今后的某个时点提供。还有可能 Ollama Models Lib…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...