ele-h5项目使用vue3+vite开发：第一节、页面头部实现

实现页面

确认需求

  • 顶部提示栏
  • 搜索框
  • 搜索提示

normalize.css:处理不同浏览器的默认样式

安装

  • npm i normalize.css

使用

src\App.vue


<style scoped>
@import 'normalize.css';

#app {
    /** 让字体抗锯齿，看起来更清晰 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
</style>

sass: CSS 预处理器

安装

  • npm i sass -D

使用


<style lang="scss" scoped>
.home-top {
  background: linear-gradient(to right, rgb(53, 200, 250), rgb(31, 175, 243));
  color: white;
  .top {
    display: flex;
    align-items: center; // 垂直居中
    padding: 10px 10px 0 10px;
    line-height: 15px;
    font-size: 15px;
    font-weight: bold;
    .location-icon {
      width: 24px;
      height: 24px;
    }
    .location {
      flex: 1;
    }
    .shopcart-icon {
      width: 24px;
      height: 24px;
    }
    .comments-icon {
      width: 28px;
      height: 24px;
      margin-left: 10px;
    }
  }
  .search-recomment {
    display: flex;
    padding: 0 10px 10px;
    .tag {
      font-size: 12px;
      border-radius: 10px;
      background: rgb(242, 242, 242, 0.3);
      padding: 2px 8px;
      margin-right: 10px;
    }
  }
}
</style>

如何使用图片

配置

  • 在vite.config.ts配置文件中配置
  • 
import path from 'path'

const resolve = (dir: string) => path.join(__dirname, dir)

export default defineConfig({

  resolve: {
    alias: {
      '@': resolve('src')
    }
  }

})

使用


<template>
  <div class="home-top">
    <div class="top">
      <img class="location-icon" src="@/assets/imgs/index_page/location.png" />
      <div class="location">幸福小区（东南门）</div>
      <img class="shopcart-icon" src="@/assets/imgs/index_page/shopcart.png" />
      <img class="comments-icon" src="@/assets/imgs/index_page/comments.png" />
    </div>
    <VanSearch
      shape="round"
      background="linear-gradient(to right, rgb(53,200,250), rgb(31,175,243))"
      placeholder="世界茶饮 35减2"
    >
      <template #right-icon>
        <div>搜索</div>
      </template>
    </VanSearch>
    <div class="search-recomment">
      <div v-for="v in recomments" :key="v.value" class="tag">{{ v.label }}</div>
    </div>
  </div>
</template>

封装 TheTop 组件

创建组件

  • 在src\views\tabs\home目录下创建components文件夹
  • 在文件夹中创建TheTop.vue组件
  • <script setup lang="ts">
import type { ISearchRecomment } from '@/types'
interface IProps {
  recomments: ISearchRecomment[]
}

defineProps<IProps>()
</script>

<template>
  <div class="home-top">
    <div class="top">
      <img class="location-icon" src="@/assets/imgs/index_page/location.png" />
      <div class="location">幸福小区（东南门）</div>
      <img class="shopcart-icon" src="@/assets/imgs/index_page/shopcart.png" />
      <img class="comments-icon" src="@/assets/imgs/index_page/comments.png" />
    </div>
    <VanSearch
      shape="round"
      background="linear-gradient(to right, rgb(53,200,250), rgb(31,175,243))"
      placeholder="世界茶饮 35减2"
    >
      <template #right-icon>
        <div>搜索</div>
      </template>
    </VanSearch>
    <div class="search-recomment">
      <div v-for="v in recomments" :key="v.value" class="tag">{{ v.label }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-top {
  background: linear-gradient(to right, rgb(53, 200, 250), rgb(31, 175, 243));
  color: white;
  .top {
    display: flex;
    align-items: center; // 垂直居中
    padding: 10px 10px 0 10px;
    line-height: 15px;
    font-size: 15px;
    font-weight: bold;
    .location-icon {
      width: 24px;
      height: 24px;
    }
    .location {
      flex: 1;
    }
    .shopcart-icon {
      width: 24px;
      height: 24px;
    }
    .comments-icon {
      width: 28px;
      height: 24px;
      margin-left: 10px;
    }
  }
  .search-recomment {
    display: flex;
    padding: 0 10px 10px;
    .tag {
      font-size: 12px;
      border-radius: 10px;
      background: rgb(242, 242, 242, 0.3);
      padding: 2px 8px;
      margin-right: 10px;
    }
  }
}
</style>

<style lang="scss">
.home-top {
  .van-field__right-icon {
    margin-right: 0;
  }
}
</style>

使用组件

在src\views\tabs\home\HomeView.vue文件中使用

<script setup lang="ts">
// 导入组件
import TheTop from './components/TheTop.vue'

const recomments = [
  { value: 1, label: '牛腩' },
  { value: 2, label: '红烧肉' },
  { value: 3, label: '宫保鸡丁' }
]
</script>

<template>
  <div class="home-page">
// 引用组件
    <TheTop :recomments="recomments" />
  </div>
</template>

<style>
.test {
  font-size: 39px;
}
</style>

使用 VanSearch 组件

配置

  • 在src\main.ts注册引入组件
  • // 全局注册引入组件
import { Tabbar, TabbarItem, Search } from 'vant'
app.use(Tabbar)
app.use(TabbarItem)
app.use(Search)

使用

<template>
  <div class="home-top">
    <div class="top">
      <img class="location-icon" src="@/assets/imgs/index_page/location.png" />
      <div class="location">幸福小区（东南门）</div>
      <img class="shopcart-icon" src="@/assets/imgs/index_page/shopcart.png" />
      <img class="comments-icon" src="@/assets/imgs/index_page/comments.png" />
    </div>

    <VanSearch
      shape="round"
      background="linear-gradient(to right, rgb(53,200,250), rgb(31,175,243))"
      placeholder="世界茶饮 35减2"
    >
      <template #right-icon>
        <div>搜索</div>
      </template>
    </VanSearch>

    <div class="search-recomment">
      <div v-for="v in recomments" :key="v.value" class="tag">{{ v.label }}</div>
    </div>
  </div>
</template>

使用 defineProps

定义

  • defineProps函数允许我们定义一个组件的属性。这个函数可以在组件内部使用，用于声明组件所接收的属性，并指定它们的类型、默认值等信息。

使用

<script setup lang="ts">
import type { ISearchRecomment } from '@/types'
interface IProps {
  recomments: ISearchRecomment[]
}


defineProps<IProps>()


</script>

<template>
  <div class="home-top">
    <div class="top">
      <img class="location-icon" src="@/assets/imgs/index_page/location.png" />
      <div class="location">幸福小区（东南门）</div>
      <img class="shopcart-icon" src="@/assets/imgs/index_page/shopcart.png" />
      <img class="comments-icon" src="@/assets/imgs/index_page/comments.png" />
    </div>
    <VanSearch
      shape="round"
      background="linear-gradient(to right, rgb(53,200,250), rgb(31,175,243))"
      placeholder="世界茶饮 35减2"
    >
      <template #right-icon>
        <div>搜索</div>
      </template>
    </VanSearch>
    <div class="search-recomment">

      <div v-for="v in recomments" :key="v.value" class="tag">{{ v.label }}</div>


    </div>
  </div>
</template>

定义组件的 Props

定义

  • 在Vue中，通过定义组件的props选项来声明组件的属性。属性是从父组件传递给子组件的数据，通过属性可以实现父子组件之间的通信。
  • 在Vue 3中，可以使用defineProps函数来定义组件的属性。
  • 无论是使用defineProps函数还是直接在props选项中定义属性，都可以通过父组件传递数据给子组件的方式来使用这些属性。

使用

  • 例如，在父组件中使用子组件并传递属性：
<script setup lang="ts">
import TheTop from './components/TheTop.vue'

const recomments = [
  { value: 1, label: '牛腩' },
  { value: 2, label: '红烧肉' },
  { value: 3, label: '宫保鸡丁' }
]
</script>

<template>
  <div class="home-page">

    <TheTop :recomments="recomments" />

  </div>
</template>

<style>
.test {
  font-size: 39px;
}
</style>
  • 在子组件中，我们可以通过props/defineProps对象来访问这些属性，并且引入：
<script setup lang="ts">
import type { ISearchRecomment } from '@/types'
interface IProps {
  recomments: ISearchRecomment[]
}

defineProps<IProps>()

</script>

<template>
  <div class="home-top">
    <div class="top">
      <img class="location-icon" src="@/assets/imgs/index_page/location.png" />
      <div class="location">幸福小区（东南门）</div>
      <img class="shopcart-icon" src="@/assets/imgs/index_page/shopcart.png" />
      <img class="comments-icon" src="@/assets/imgs/index_page/comments.png" />
    </div>
    <VanSearch
      shape="round"
      background="linear-gradient(to right, rgb(53,200,250), rgb(31,175,243))"
      placeholder="世界茶饮 35减2"
    >
      <template #right-icon>
        <div>搜索</div>
      </template>
    </VanSearch>
    <div class="search-recomment">

      <div v-for="v in recomments" :key="v.value" class="tag">{{ v.label }}</div>

    </div>
  </div>
</template>

声明 Props 的类型文件

声明

  • 使用defineProps<IProps>()来声明组件的属性。这会将IProps中定义的属性作为组件的属性，并提供类型检查和类型提示。

使用

<script setup lang="ts">
import type { ISearchRecomment } from '@/types'
interface IProps {
  recomments: ISearchRecomment[]
}

defineProps<IProps>()
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/362071.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

python打造光斑处理系统4：裁切光斑感兴趣区域

python打造光斑处理系统4：裁切光斑感兴趣区域

文章目录 图像裁切给定坐标裁切手动阈值裁切 光斑处理&#xff1a;python处理高斯光束的图像 光斑处理系统&#xff1a;程序框架&#x1f31f;打开图像&#x1f31f;参数对话框/伪彩映射 图像裁切 一般来说&#xff0c;光斑只占图像很小一部分&#xff0c;为了更好的观感和更…
阅读更多...
python实现贪吃蛇小游戏（附源码）

python实现贪吃蛇小游戏（附源码）

文章目录 导入所需的模块坐标主游戏循环模块得分 贪吃蛇小游戏&#xff0c;那个曾经陪伴着00后和90后度过无数欢笑时光的熟悉身影&#xff0c;仿佛是一把打开时光之门的钥匙。它不仅是游戏世界的经典之一&#xff0c;更是我们童年岁月中不可或缺的一部分&#xff0c;一个承载回…
阅读更多...
《区块链简易速速上手小册》第6章：区块链在金融服务领域的应用（2024 最新版）

《区块链简易速速上手小册》第6章：区块链在金融服务领域的应用（2024 最新版）

文章目录 6.1 金融服务中的区块链6.1.1 金融服务中区块链的基础6.1.2 主要案例&#xff1a;跨境支付6.1.3 拓展案例 1&#xff1a;去中心化金融&#xff08;DeFi&#xff09;6.1.4 拓展案例 2&#xff1a;代币化资产 6.2 区块链在支付系统中的作用6.2.1 支付系统中区块链的基础…
阅读更多...
LRU 缓存置换策略：提升系统效率的秘密武器(上)

LRU 缓存置换策略：提升系统效率的秘密武器(上)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
Android进阶之路 - ViewPager2 比 ViewPager 强在哪？

Android进阶之路 - ViewPager2 比 ViewPager 强在哪？

我记得前年&#xff08;2022&#xff09;面试的时候有被问到 ViewPager 和 ViewPager2 有什么区别&#xff1f;当时因为之前工作一直在开发售货机相关的项目&#xff0c;使用的技术要求并不高&#xff0c;所以一直没去了解过 ViewPager2~ 去年的时候正好有相关的功能需求&#…
阅读更多...
[Java 并发基础]多线程编程

[Java 并发基础]多线程编程

文章参考&#xff1a; https://docs.oracle.com/javase/8/docs/api/java/util/concurrent/Future.html https://juejin.cn/post/6970558076642394142 文章目录 线程的创建方式继承 Thread实现 Runnable 接口实现 Callable 接口使用 Lambda使用线程池 线程创建相关的 jdk源码Thr…
阅读更多...
TCP四次握手

TCP四次握手

TCP 协议在关闭连接时&#xff0c;需要进行四次挥手的过程&#xff0c;主要是为了确保客户端和服务器都能正确地关闭连接。 # 执行流程 四次挥手的具体流程如下&#xff1a; 客户端发送 FIN 包&#xff1a;客户端发送一个 FIN 包&#xff0c;其中 FIN 标识位为 1&#xff0c…
阅读更多...
【项目管理】立项管理

【项目管理】立项管理

一、前言 对于甲方的立项&#xff1a;需求调研二编写项目申请书一可行性研究&#xff08;机会、初步、详细&#xff09;一项目论证一项目评估一评审获得批准一发布招标文件&#xff01;对于乙方的立项&#xff1a;看到招标文件一进行项目识别一可行性研究&#xff08;机会、初…
阅读更多...
【Java 数据结构】优先级队列(堆)

【Java 数据结构】优先级队列(堆)

优先级队列&#xff08;堆&#xff09; 1. 优先级队列1.1 概念 2. 优先级队列的模拟实现2.1 堆的概念2.2 堆的存储方式2.3 堆的创建2.3.1 堆向下调整2.3.2 堆的创建2.3.3 建堆的时间复杂度 2.4 堆的插入与删除2.4.1 堆的插入2.4.2 堆的删除 2.5 用堆模拟实现优先级队列 3.常用…
阅读更多...
JDBC - 结构优化1

JDBC - 结构优化1

JDBC - 结构优化1 文章目录 JDBC - 结构优化1三层架构1 什么是三层架构2 三层架构项目搭建 结构优化1 - 学生信息管理1 封装工具类2 ORM3 DAO 三层架构 1 什么是三层架构 **三层架构&#xff1a;**将程序划分为表示层, 业务逻辑层, 数据访问层三层&#xff0c;各层之间采用接…
阅读更多...
Redis应用-哨兵模式以及缓存穿透雪崩解决方案

Redis应用-哨兵模式以及缓存穿透雪崩解决方案

文章目录 Redis应用-哨兵模式以及缓存穿透雪崩哨兵模式Redis缓存穿透和雪崩缓存穿透布隆过滤器缓存空对象 缓存击穿设置热点数据永不过期加互斥锁 缓存雪崩Redis高可用限流降级数据预热 Redis应用-哨兵模式以及缓存穿透雪崩 哨兵模式 概述 主从切换技术的方法是&#xff1a;当…
阅读更多...
RHCE DNS域名解析服务器

RHCE DNS域名解析服务器

目录 1. 正向解析 1.1 安装必要软件 1.2 配置静态ip 1.3 DNS配置 1.4 测试 2. 反向解析 2.1 关闭安全软件&#xff0c;安装必要软件 2.2 配置静态ip 2.3 DNS配置 2.4 测试 1. 正向解析 1.1 安装必要软件 1.2 配置静态ip 服务器配置 nmcli c modify ens32 ipv4.method man…
阅读更多...
基于simulink的模糊PID控制器建模与仿真,并对比PID控制器

基于simulink的模糊PID控制器建模与仿真,并对比PID控制器

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1PID控制器原理 4.2 模糊PID控制器原理 5.完整工程文件 1.课题概述 在simulink&#xff0c;分别建模实现一个模糊PID控制器和一个PID控制器&#xff0c;然后将PID控制器的控制输出和模糊PID的控制输出…
阅读更多...
[工具探索]Safari 和 Google Chrome 浏览器内核差异

[工具探索]Safari 和 Google Chrome 浏览器内核差异

最近有些Vue3的项目&#xff0c;使用了safari进行测试环境搞开发&#xff0c;发现页面存在不同程序的页面乱码情况&#xff0c;反而google浏览器没问题&#xff0c;下面我们就对比下他们之间的差异点&#xff1a; 日常开发google chrome占多数&#xff1b;现在主流浏览器 Goog…
阅读更多...
双目模组 - IMSEE SDK的配置实践：含Opencv的详细编译配置

双目模组 - IMSEE SDK的配置实践：含Opencv的详细编译配置

IMSEE 的环境要求： CMake(3.0以上)(需要支持vs2019) Visual Studio 2019 opencv3.3.1 IMSEE-SDK 官网参考： Windows 源码安装 — IMSEE SDK 1.4.2 文档 (imsee-sdk-docs.readthedocs.io) 【案】按照IMSEE的建议进行安装： 1 Windows 安装： 1.1 环境准备： 1.1.1 CMake：in…
阅读更多...
当阿里云偶遇个人用户——谈幻兽帕鲁自建服

当阿里云偶遇个人用户——谈幻兽帕鲁自建服

1. 快乐地闲谈 我擅长分析的云计算领域是“以工程师为操作用户的企业级IT服务”&#xff0c;但这篇文章讨论的对象甚至不是开发者用户&#xff0c;而是我从未设想过的“非IT用户”。 看到朋友转发《阿里云60秒部署幻兽帕鲁》的文章&#xff0c;我还想就是这能分析什么哪&#x…
阅读更多...
结构体与共用体——C语言——day15

结构体与共用体——C语言——day15

在C语言中&#xff0c;C语言允许用户自己指定这样一种数据结构&#xff0c;它称为结构体(structure) 。它相当于其他高级语言中的“记录”。 假设程序中要用到图所表示的数据结构&#xff0c;但是C语言没有提供这种现成的数据类型&#xff0c;因此用户必须要在程序中建立所需的…
阅读更多...
C#——三角形面积公式

C#——三角形面积公式

已知三角形的三个边&#xff0c;求面积&#xff0c;可以使用海伦公式。 因此&#xff0c;可以执行得到三角形面积公式的计算方法代码如下&#xff1a; /** / <summary>* / 三角形面积公式* / </summary>* / <param name"a">边长a</param>*…
阅读更多...
[word] word艺术字体如何设置？ #知识分享#职场发展#媒体

[word] word艺术字体如何设置？ #知识分享#职场发展#媒体

word艺术字体如何设置&#xff1f; 在工作中有些技巧&#xff0c;可以快速提高工作效率&#xff0c;解决大部分工作&#xff0c;今天给大家分享word艺术字体如何设置的技巧&#xff0c;希望可以帮助到你。 1、设置艺术字 选中文字&#xff0c;然后点击菜单栏的【插入】按钮一一…
阅读更多...
版本管理工具git: 谨慎使用git中的撤回操作

版本管理工具git: 谨慎使用git中的撤回操作

文章目录 一、背景二、解决方案1、步骤一2、步骤二 三、参考 一、背景 昨天代码分支提交错了&#xff0c;idea中使用了如下操作&#xff0c;结果代码不见了 二、解决方案 1、步骤一 使用git reflog命令&#xff0c;查看提交记录&#xff0c;找到之前commit操作的哈希值 …
阅读更多...
最新文章

Copyright @ 2022~2023