vue3 项目笔记

2024-01-02 13:27:42

修改第三方组件样式
如果有变量则修改变量,没有则修改类样式 通过 :deep(类名)修改

 :deep(.home){
    width: 150px;
   }

隐藏底部的tabbar栏,某些页面跳转之后不用显示底部tabbar
方法一: 通过路由的 meta 参数添加一个布尔值,拿到当前活跃路由,通过布尔值判断是否显示

 {
            path: '/city',
            component: () => import('@/views/city/city.vue'),
            meta: {
                isTabBar: true
            }
        }
<template>
  <div>
    <router-view></router-view>
    <tab-bar  v-if="!route.meta.isTabBar"/>
  </div>
</template>
<script setup>
import { useRoute } from "vue-router";
import tabBar from "./components/tab-bar/tabbar.vue";
const route = useRoute();
</script>

方法二:通过设置高度遮挡 tabbar,在公共的css 设置样式,在需要使用的页面引用

css

.to-page{
    height: 100vh;
    position: relative;
    z-index: 9;
    background-color: #fff;
    overflow-y: auto;
}

vue

 <div class="to-page">
        city
  </div>

安装vant

npm install vant

按需引入组件

npm i @vant/auto-import-resolver unplugin-vue-components -D

使用 直接拿vant 示例代码,无需再引入 列如按钮

<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>

文章来源:https://blog.csdn.net/weixin_43457011/article/details/134680334
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。