html 根据条件执行css

最新推荐文章于 2024-06-19 16:00:24 发布

原创最新推荐文章于 2024-06-19 16:00:24 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #vue.js

文档专栏收录该内容

14 篇文章

订阅专栏

这是一个关于Vue组件`StatSide`的实现，该组件用于创建统计侧边组件。根据路由名称`CenterHome`动态调整样式，当处于中心页面时，组件高度设为300px，否则为270px。组件使用了`slot`来插入不同的统计内容，如`stat-first`, `stat-second`和`stat-third`。同时，借助vue-router的`useRouter`和`useRoute`获取和使用路由信息。

<!-- 中心统计侧边组件 -->
<template>
    <div class="stat-side">
        <div :class="iscenter?'stat-side-item':'stat-side-item1'">
           <slot name="stat-first"></slot>      
        </div>
        <div :class="iscenter?'stat-side-item':'stat-side-item1'">
            <slot name="stat-second"></slot>
        </div>
        <div :class="iscenter?'stat-side-item':'stat-side-item1'">
            <slot name="stat-third"></slot>
        </div>
    </div>
</template>

<script>
    import { useRouter, useRoute } from 'vue-router'
    import { reactive, toRefs } from '@vue/reactivity';
export default {
    name:'StatSide',
    setup(props, context) {
        
       
        const router = useRouter();
        const route = useRoute();
        const data = reactive({
            //判断是否是中心，中心stat-side-item高度300px，车间为270px
            iscenter: route.name=="CenterHome"?true:false,
            
        });

     

        return {
            ...toRefs(data),
           router,route
        }
    }
}
</script>

<style scoped>

.stat-side .stat-side-item{
    width: 380px;
    height: 270px;
    padding: 10px;
}
.stat-side .stat-side-item1{
    width: 380px;
    height: 270px;
    padding: 10px;
}
</style>