计算机网站开发工作证,自己做电影网站需要的成本,php 网站开发教程,100m光纤做网站目录
1、项目中引入阿里矢量库图标
2、实现吸顶交互
3、语法糖--script setup
3.1、无需return
3.2、子组件接收父组件的值-props的使用
3.3、注册组件 1、项目中引入阿里矢量库图标
步骤一#xff1a;进入阿里矢量库官网中#xff1a;iconfont-阿里巴巴矢量…目录
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)
/scripttemplatediv classapp-header-stickydiv classcontainerRouterLink classlogo to/ /!-- 导航区域 --ul classapp-header-nav li classhomeRouterLink to/首页/RouterLink/liliRouterLink to/居家/RouterLink/liliRouterLink to/美食/RouterLink/liliRouterLink to/服饰/RouterLink/liliRouterLink to/母婴/RouterLink/liliRouterLink to/个护/RouterLink/liliRouterLink to/严选/RouterLink/liliRouterLink to/数码/RouterLink/liliRouterLink to/运动/RouterLink/liliRouterLink to/杂项/RouterLink/li/uldiv classrightRouterLink to/品牌/RouterLinkRouterLink to/专题/RouterLink/div/div/div
/templatestyle scoped langscss
.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、注册组件
以前注册组件 现在注册就不用那么麻烦了
导入后立即可用
