0
点赞
收藏
分享

微信扫一扫

基于Base64上传Excel文件

唯米天空 03-20 10:00 阅读 2

目录

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 

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

父组件:

子组件接收并使用:

效果:

3.3、注册组件

以前注册组件:

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

导入后立即可用:

举报

相关推荐

0 条评论