好啊,这么快就过去一个月咯。这周还蛮有趣的。很适应现在的上班状态了,遇到的人都蛮好的,也没怎么加过班~上班也不用怎么和别人打交道,反正挺好的啊!好评
一、改了又改的需求
这里我就要吐槽一下了(用图片多好哇)。因为要做pc和移动以及中英文的,所以每次改都比较繁琐,还改了改了n次。
(1)第一次贴的图片
(2)第二次讲不能贴文字,需要文字可以复制,好好好,继续改(为此还加班了一会,师父还帮我改了好多,谢谢~热心帅气的师父)
(3)第三次,字体,按钮,颜色,间距,图片也不对(我是应该怪自己眼拙没看出来呜呜,催的也蛮急的,改的也很狼狈)
(4)第n次.....(终于好了)
二、技巧
(1)组件
pc和移动的样式还是有蛮大的不同的,所以可以分为两个组件来写,避免混乱。
<template>
<Mobile v-if="isMobile" />
<Pc/>
</template>
<script lang="ts" setup>
import { matchMobile } from '~~/composables/useMatchRules.ts';
import { ref, onMounted } from 'vue';
const isMobile = ref(false);
onMounted(() => {
isMobile.value = matchMobile();
});
</script>
(2)布局flex
这,记得很详细,就先不写了(.......)
(3)深度选择器
定义、作用:
- :deep()是一个伪类,它可以使处在scoped样式中的选择器影响到子组件。
使用:
- 父组件
<template>
<div class="page">
<div class="father-box">我是父组件</div>
<VueCSSDeepSon></VueCSSDeepSon>
</div>
</template>
<script setup lang="ts">
import VueCSSDeepSon from './VueCSSDeepSon.vue'
</script>
<style scoped>
.page .father-box{
color: black;
}
.page:deep(.son-box) {
color: red;
}
.page .son-box {
background-color: green;
}
</style>
- 子组件:
<template>
<div>
<div class="son-box">我是子组件</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.son-box {
color: yellow;
}
</style>
三、写在最后
- 本周裁员了?前端竟然裁了俩,无情的公司
- 本周好像也就改了这一个需求,不过这周开会又讲首页改成动画的了,下周就要改吧
- 这周,依旧宅,不想出门,我饭搭子还去加班了呜呜,状态有点不对劲?下周该出去走走了......
- 在吐槽这个租的房子,好贵的水电?!突然给我断电了.......
- 浅浅总结一下这个月,菜鸟1.0进阶中,收获饭搭子,有个好师父.......期待下个月
- 啊新的一天。