CSS 页面设计稿构思与实现（三）之 UI 组件

作者：Augus

2021 年 11 月 11 日
本文字数：853 字
阅读完需：约 3 分钟

前言

今天我们要说的就是封装我们的 CSS components 层，所以我们要做的首先分析我们的设计稿，找到相应的公共样式或者结构相似的内容，写成组件，在进行注册就可以了。接下来让我们看看具体的实现步骤。

实现 UI 组件并全局声明

如下我们有一个组件

// avatar.vue<template>  <div     class="avatar"    :class="{'avatar--vertical': direction === 'vertical'}">    <img      :src="url"      circle/>  </div></template><script>export default {  name: 'Avatar',  props: {    direction: {      validator(value){        return ['horizontal', 'vertical'].indexOf(value) !== -1;      }    },    url: {      type: String,      required: true    },  }}</script><style lang="scss" scoped>@mixin box-center($justify:center, $align: center) {  display:flex;
  @if($align !=false) {    align-items: $align;  }  @if($justify !=false) {    justify-content: $justify;  }}
.avatar {  @include box-center($align: center);  &--vertical {    flex-direction: column;  }}</style>

复制代码

其中用了 sass 语法，mixin 方法可以单独放在一个文件里，这里为了方便，所以放在一个文件下。

然后我们需要引入它并且全局声明。

// components/index.jsimport Avatar from './avatar';
const components = {  Avatar,}
const install = (app) => {  Object.keys(components).forEach(key => {      app.component(components[key]['name'], components[key])  });}
const UI = {  install}
export default UI

复制代码

在 main.js 中引用就可以了

// main.jsimport UI from '@/components'
createApp(App).use(UI).use(router).use(store).mount('#app')

复制代码

以上就是一个简单的例子，实际具体情况肯定比我写的复杂，需要根据特定情况进行相应的模块化处理，不要嫌麻烦，没有必要，良好的模块化，可以减少很多不必要的维护工作。

好，今天就到这里了，今天努力的你依然是最棒的。Bye Bye！！！

发布于: 2021 年 11 月 11 日阅读数: 5

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

CSS 页面设计稿构思与实现（三）之 UI 组件

前言

实现 UI 组件并全局声明

Augus

评论