构建自己的物料解决方案——构建物料库，实现前端设计

news2024/11/25 14:44:02

01: 数据拦截简化数据获取流程

/**
* 响应拦截器：
* 服务端返回数据之后，前端 .then 之前被调用
*/
service.interceptors.response.use((response) => {
    const { success, message, data } = response.data
    if (success) {
        return data
    }
    // TODO： 业务请求错误
    return Promise.reject(new Error(message))
})

02: 业务组件：移动端navigationBar

<script setup>
import { isMobileTerminal } from '@/utils/flexible' 
import mobileNavigationVue from ' ./mobile/index.vue' 
import { getCategory } from '@/api/category'
import { ref } from 'vue'

const categoryData = ref([])
const getCategoryData = async () => {
    const { categorys } = await getCategory()
    categoryData.value = categorys
} 
getCategoryData()
</script>

<script setup>
// vite 构建的项目中，我们可以直接使用 defineProps 方法
defineProps({
    data: {
        type: Array, 
        required: true
    }
})
</script>

03: 动态 rem 基准+修正 tailwind，完善移动端navigationBar

/**
* 动态指定 rem 基准値， 最大为 40px
* 根据用户的屏幕宽度，进行一些计算，把计算出来的值赋值给 html 根标签作为 fontsize 大小
*/
export const useREM = () => {
    //定义最大的 fontSize
    const MAX_FONT_SIZE = 40
    //监听 html 文档被解析完成的事件
    document.addEventListener('DOMContentLoaded', () =>
        //拿到 html 标签
        const html = document.querySelector('html')
        //计算 fontSize，根据屏幕宽度 / 10
        let fontSize = window.innerWidth / 10
        fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
        //赋值给 html
        html.style.fontSize = fontSize + 'px'
    })
}

修正 tailwindcss 字体大小：

Font Size - TailwindCSS中文文档 | TailwindCSS中文网