CSS 主题定制 (vue3 + vant )

目标

使用 CSS 变量定制项目主题。

内容

1. 如何定义和使用 CSS 变量。

:root {
    --main: #999;
}

a {
    color: var(--main)
}

1. 覆盖 vant 主题色， styles/main.scss 。

:root {
    // 问诊患者：色板
    --cp-primary: #16c2a3;
    --cp-plain: #eaf8f6;
    --cp-orange: #fca21c;
    --cp-text1: #121826;
    --cp-text2: #3c3e42;
    --cp-text3: #6f6f6f;
    --cp-tag: #848484;
    --cp-dark: #979797;
    --cp-tip: #c3c3c5;
    --cp-disable: #d9dbde;
    --cp-line: #ededed;
    --cp-bg: #f6f7f9;
    --cp-price: #eb5757;
    // 覆盖 Vant 主体色
    // 官方文档：ConfigProvider 全局配置
    --van-primary-color: var(--cp-primary);
}

1. 测试主题色，views/Login/index.vue

<script lang="ts" setup>
    import {
        Button as VanButton
    } from 'vant'
</script>
<template>
    <div class="login-page">
        <van-button type="primary">按钮</van-button>
    </div>
</template>

CpNavBar 组件封装

掌握 van-nav-bar 组件，封装自己的nav-bar 组件。

准备组件的接口

components/CpNavBar.vue

<script setup lang="ts">
    const onClickLeft = () => {
        console.log('left click')
    }
    const onClickRight = () => {
        console.log('right click')
    }
</script>

<template>
    <van-nav-bar title="注册" left-arrow @click-left="onClickLeft" fixed right-text="注册" @click-right="onClickRight" />
</template>

<style lang="scss" scoped>
    ::v-deep() {
        .van-nav-bar {
            &__arrow {
                font-size: 18px;
                color: var(--cp-text1);
            }

            &__text {
                font-size: 15px;
            }
        }
    }
</style>

测试使用

在login页面中使用

components 目录的组件会被 unplugin-vue-components 插件自动注册为全局的，可直接使用，而不需要引入，注册。

<template>
    <div class="login-page">
        <cp-nav-bar></cp-nav-bar>
    </div>
</template>

功能

三个功能：

1. 定制：标题，title
2. 定制：右侧文字，rightText
3. 后退

<script setup lang="ts">
    import {
        useRouter
    } from 'vue-router'

    const router = useRouter()
    // #1 点击左侧返回
    const onClickLeft = () => {
        // 判断历史记录中是否有回退记录
        if (history.state?.back) {
            router.back()
        } else {
            router.push('/')
        }
    }

    // #2 接收 title 和 rightText
    defineProps < {
        title ? : string
        rightText ? : string
    } > ()

    // #3 右侧的点击，让外界决定做什么事情
    const emit = defineEmits < {
        (e: 'click-right'): void
    } > ()
    const onClickRight = () => {
        emit('click-right')
    }
</script>

<template>
    <van-nav-bar left-arrow @click-left="onClickLeft" fixed :title="title" :right-text="rightText" @click-right="onClickRight"></van-nav-bar>
</template>

1. views/Login/index.vue。

<template>
    <div class="login-page">
        <cp-nav-bar title="登录"></cp-nav-bar>
    </div>
</template>

小结

• 怎么在项目中判断是否可以回退？

• • history.state?.back

• 怎么定义属性，怎么定义事件

• • defineProps defineEmits

• 为什么可以直接使用组件，不导入不注册？

• • 使用了 unplugin-vue-components 默认 src/compoenents 自动导入注册

类型

目标：给组件添加类型，使属性和事件可以有提示。

1. 观察 van-nav-bar 为什么具有提示？

// 1. 导入组件实例
import NavBar from './NavBar.vue'
// 2. 声明 vue 类型模块
declare module 'vue' {
    // 3. 给 vue 添加全局组件类型，interface 和之前的合并
    interface GlobalComponents {
        // 4. 定义具体组件类型，typeof 获取到组件实例类型
        VanNavBar: typeof NavBar;
    }
}

1. 给 cp-nav-bar 组件添加类型， types/components.d.ts 。

import CpNavBar from '@/components/CpNavBar.vue'

declare module 'vue' {
    interface GlobalComponents {
        CpNavBar: typeof CpNavBar
    }
}

1. 鼠标放上去，看看 CpNavBar 组件的属性类型提示。