切图仔的一天--🚀kashi项目小结

剑来丶阿良
826 阅读2分钟

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

笔者段位不高，近期做的比较多的是切图方面的工作，对于css一些部只是的掌握，尤其是flex布局，算是有了一个不错的认识吧，下面做个小结：

1.css方面:

这里主要是一些规范行的东西，作为一个工程人还是需要养成好习惯的。

1.1命名：

把自己当成庖丁，需求就是你要解的牛，拆分页面为清晰的结构，有利于后续的维护。

react组件的拆分真的是可以为所欲为，公司技术栈的关系，这里暂不涉及，主要针对于vue2.x

🚀组件css命名注意事项：
  • 组件component、块block以及页面view首字母大写，组件的名字即为最外层容易的class名
    • 例如：TheIcon.vue组件，那么TheIcon组件中最外层class名字即为the-icon(大写字母需要改为-进行连接)
  • 对于复杂的结构层级比较多的页面，为了避免过多的-（例如：the-icon-container-content-info-text...）情况，可以对内部子块的重新命名

1.2:css

el-scroll-bar的使用:

<template>
  <div style="height:600px;">
    <el-scrollbar style="height:100%">
        <div style="width:700px;height:700px;border:solid;" >
        </div>
    </el-scrollbar>
  </div>
</template>

单行文本溢出需要点：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

flex布局最后一行左对齐:

以每行三列的情况为例:

🚀中心思想就是:

  • 外层justify-content：flex-start
  • 对于中间的粉色的部分的为3n-1,通过css的nth-child(3n-1)找到中间元素，添加margin-left和margin-right值

2.组件封装：

从复杂程度“解-构”:

  • 组件component：可以理解为拼图的最小结构单元,先将页面上可复用的部门拆成组件-component，独立封装，组件不涉及业务逻辑的处理，类似react中的傻瓜组件
  • 块block:由组件拼装成为块，涉及业务处理，请求，请求后的数据处理等等，类似react中的聪明组件
  • 页面view：页面就是有各个block块拼成的

2.1对于涉及路径的组件封装:

以TheIcon组件为例:

主要是看:src中的require():

  • 不用require :src="'../img/image.jpg'" 会被解析为字符串

    • <img src="../img/image.jpg"> // 正常加载
<img :src="'../img/image.jpg'"> // 动态地址，路径被加载器解析为字符串，图片找不到

  • 使用require:

    • src1：require('../img/image1.jpg'),
src2：require('../img/image2.jpg'),
index:1,


<img :src="index = 0 ? src1: src2"> // 动态地址，正常加载

<template>
  <img
    class="icon-image"
    :class="iconClass"
    :src="require(`@/assets/images/${name}.png`)"
    :style="{
      width,
      height,
    }"
    @click="iconClick"
  />
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    iconClass() {
      return `icon-image-${this.size}`;
    },
  },
  props: {
    name: {
      default: '',
      type: String,
    },
    width: {
      default: '',
      type: String,
    },
    height: {
      default: '',
      type: String,
    },
    size: {
      default: 'normal',
      type: String,
    },
  },
  methods: {
    iconClick() {
      this.$emit('iconClick');
    },
  },
};
</script>

<style lang="scss" scoped>
.icon-image {
  display: inline-block;
  vertical-align: middle;
}

.icon-image-normal {
  width: 24px;
  height: 24px;
}

.icon-image-small {
  width: 12px;
  height: 12px;
}

.icon-image-big {
  width: 38.5px;
  height: 32.5px;
}
</style>

3.vscode快捷键：

  • 代码格式化:command + shift + f
  • 特殊符号:control + command + 空格
  • 打开终端:control + shift + ~

4.心得:

需求评审的时候最好是根据需求原型图去画xmind脑图，这样一个模块做下来会很清晰

avatar
文章
阅读
粉丝