이른바 Element-ui

세 번째가 되니 지금까지 설명이 너무 부족했던 것을 반성한다.
Elemnt-ui는 Vue입니다.js의 구성 요소 라이브러리입니다.
Vue.js로 제작되었기 때문에 가져오기를 통해 다양한 구성 요소를 사용할 수 있습니다.
또한 CSS 프레임워크로 이해하여 설계된 구성 요소를 간단하게 사용할 수 있습니다.
CSS 프레임워크이기 때문에 어느 정도 성형된 구성 요소를 변경하거나 자신의 제품 색깔로 염색할 수 있습니다.
이번 Elemnt 2.52는 기본 모델입니다.
공식 페이지
https://element.eleme.io/#/en-US\
이번에는 카드 구성 요소를 분석하고 싶습니다.

소스 구성

　index.js
  src
   |- main.vue

이 정도면 됐어.

main.vue

main.vue

<template>
  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
    <div class="el-card__header" v-if="$slots.header || header">
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="el-card__body" :style="bodyStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ElCard',
    props: {
      header: {},
      bodyStyle: {},
      shadow: {
        type: String
      }
    }
  };
</script>

main.vue를 보니까 어려운 일은 안 한 것 같아요.

  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">

위에class가 지정되어 있습니다.class="el-card"는 고정되어 있습니다.shadow 지정할 때 is-지정한 값은class입니다.
지정한 디스플레이가 always / hover / never 중 하나로 전환됩니다.
:class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'shadow를 지정하지 않으면 is-always-shadow 클래스는bind가 됩니다.

<div class="el-card__header" v-if="$slots.header || header">
  <slot name="header">{{ header }}</slot>
</div>

다음divel-card__header는 고정입니다.
$slots.헤더나 prop을 지정하는 헤더의 위치는 {{ header }} 에서 지정한 요소를 포함합니다.

<div class="el-card__body" :style="bodyStyle">
  <slot></slot>
</div>

다음 디브는 엘카드.바디는 고정이야.또한 스타일 요소 중 prop에서 지정한 바디 스타일은 bind입니다.
바디 스타일은 CSS 스타일을 전달할 수 있습니다.
예){color: 'red', 'background-color': 'gray'}

<el-card :body-style="{color: 'red', 'background-color': 'gray'}">

이렇게 바디 부분의 스타일에 적용됩니다.
<slot></slot>에는 <el-card></el-card>에 기술된 내용을 직접 넣는다.
지금까지 나타난 요소를 조합해 봤다.

다음은 소스.

<el-card class="box-card">
   <div slot="header"> <!-- ヘッダー -->
    <span>サンプルですよ</span> <!-- ヘッダーの内容1 -->
    <el-button style="float: right;">スロット=header に ボタン</el-button> <!-- ヘッダーの内容2 -->
  </div>
   <!-- ボディのスロット -->
  ここが スロット です。
  ボタンをおいてみた
  <div>
    <el-button type="danger"> スロットにボタン </el-button>
   </div>
  <div>
     テーブルをおいてみた
  　　<table border>
       <tr>
         <th>ID</th><th>NAME</th><th>AGE</th>
       </tr>
       <tr>
         <td>1</td><td>ぺけぺけ</td><td>55</td>
       </tr>
       <tr>
         <td>2</td><td>ぷけぷけ</td><td>48</td>
       </tr>
     </table>
  </div>
</el-card>