Vue Element UI カスタム説明リストコンポーネント

<テンプレート>
  <div class="desc" :style="{margin}">
    <!-- タイトル -->
    <h1 v-if="タイトル" class="desc-title" v-html="タイトル"></h1>
    <el-row クラス="desc-row">
      <スロット/>
    </el-row>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'EDesc',
  // provide() を通じて子コンポーネントに提供される {
    戻る {
      ラベル幅: this.labelWidth、
      列: this.column、
      サイズ: this.size
    }
  },
  小道具: {
    // データソース、データのリッスンとデータの再描画: {
      タイプ: オブジェクト、
      必須: true、
      デフォルト （） {
        戻る {}
      }
    },
    // タイトル： {
      タイプ: 文字列、
      デフォルト： ''
    },
    // マージン: {
      タイプ: 文字列、
      デフォルト: '0'
    },
    // ラベルの幅 labelWidth: {
      タイプ: 文字列、
      デフォルト: '120px'
    },
    カラム： {
      // 行ごとに表示される項目の数 タイプ: [数値、文字列]、
      デフォルト: 3
    },
    サイズ： {
      // サイズタイプ: 文字列、
      デフォルト： ''
    }
  },
  時計：
    データ： {
      ハンドラ（）{
        this.$nextTick(() => {
          // サブコンポーネント e-desc-item を除外する
          const データソース = this.$slots.default
          定数データリスト = []
          dataSource.forEach(アイテム => {
            if (item.componentOptions && item.componentOptions.tag === 'e-desc-item') {
              データリストをプッシュします(item.componentInstance)
            }
          })
          // 残りのスパン
          leftSpan = this.column とします
          const len ​​= データリスト.長さ
          dataList.forEach((アイテム、インデックス) => {
            // 列とスパンの関係を処理する // 残りの列の数は、設定されたスパンの数より少ない const hasLeft = leftSpan <= (item.span || 1)
            // 現在の列の次の列が残りの範囲より大きい
            const nextColumnSpan = (index < (len - 1)) && (dataList[index + 1].span >= leftSpan)
            // 最後の行の最後の列 const isLast = index === (len - 1)
            if (hasLeft || nextColumnSpan || isLast) {
            // 上記の条件が満たされた場合、最後の列が不完全になるのを避けるために、span を自動的に完了する必要があります。item.selfSpan = leftSpan
              leftSpan = this.column
            } それ以外 {
              左スパン -= アイテム.スパン || 1
            }
          })
        })
      },
      深い：本当、
      即時: 真
    }
  }
}
</スクリプト>

<スタイル スコープ lang="scss">
  .desc{
    .desc-title {
      下マージン: 10px;
      色: #333;
      フォントの太さ: 700;
      フォントサイズ: 16px;
      行の高さ: 1.5715;
    }
    .desc-row{
      ディスプレイ: フレックス;
      flex-wrap: ラップ;
      境界線の半径: 2px;
      境界線: 1px 実線 #EBEEF5;
      下境界線: 0;
      右境界線: 0;
      幅: 100%;
    }
  }
</スタイル>

<テンプレート>
  <el-col :span="計算されたスパン" class="desc-item">
    <div class="desc-item-content" :class="size">
      <label class="desc-item-label" :style="{width: labelWidth}" v-html="label"></label>
      <div class="desc-item-value" v-if="$slots">
        <!-- プレーンテキスト -->
        <スロット v-if="$slots.default && $slots.default[0].text"/>
        <!-- HTML -->
        <スロット名="コンテンツ" v-else-if="$slots.content"/>
        <span v-else>データがありません</span>
      </div>
    </div>
  </el-col>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'EDescItem',
  挿入: ['labelWidth', 'column', 'size'],
  小道具: {
    スパン: {
      タイプ: [数値、文字列],
      必須: false、
      デフォルト: 0
    },
    ラベル: {
      タイプ: 文字列、
      必須: false、
      デフォルト： ''
    }
  },
  データ （） {
    戻る {
      // サブコンポーネント自身のスパン
      自己スパン: 0
    }
  },
  計算: {
    計算されたスパン() {
      // 子コンポーネントのスパンは親コンポーネントによってスパンの計算と変更に使用されます
      if (this.selfSpan) {
        24 / this.column * this.selfSpan を返す
      } それ以外の場合は (this.span) {
      // プロパティによって渡されるスパン
        24 / this.column * this.span を返す
      } それ以外 {
      // spanが渡されない場合は列を取得します
        24 / this.column を返す
      }
    }
  }
}
</スクリプト>

<スタイル スコープ lang="scss">
  .desc-item {
    右境界線: 1px 実線 #EBEEF5;
    下境界線: 1px 実線 #EBEEF5;
    .desc-item-content {
      ディスプレイ: フレックス;
      コンテンツの配置: flex-start;
      アイテムの位置を中央揃えにします。
      色: rgba(0,0,0,.65);
      フォントサイズ: 14px;
      行の高さ: 1.5;
      幅: 100%;
      背景色: #fafafa;
      高さ: 100%;
      .desc-item-label{
        右境界線: 1px 実線 #EBEEF5;
        表示: インラインブロック;
        パディング: 12px 16px;
        フレックス成長: 0;
        フレックス収縮: 0;
        色: rgba(0, 0, 0, 0.6);
        フォントの太さ: 400;
        フォントサイズ: 14px;
        行の高さ: 1.5;
        高さ: 100%;
        ディスプレイ: フレックス;
        アイテムの位置を中央揃えにします。
      }
      .desc-item-value{
        背景: #fff;
        パディング: 12px 16px;
        フレックス成長: 1;
        オーバーフロー: 非表示;
        単語区切り: 全区切り;
        高さ: 100%;
        ディスプレイ: フレックス;
        アイテムの位置を中央揃えにします。
        色: #444;
        スパン{
          色: #aaa;
        }
      }
      ＆。小さい {
        .desc-item-label、
        .desc-item-value {
          パディング: 10px 14px;
        }
      }
    }
  }
</スタイル>

<テンプレート>
  <e-desc :data='info' margin='0 12px' label-width='100px'>
    <e-desc-item label="名前">{{info.name}}</e-desc-item>
    <e-desc-item label="年齢">{{ info.age }} 歳</e-desc-item>
    <e-desc-item label="性別">{{ info.sex }}</e-desc-item>
    <e-desc-item label="学校">{{ info.school }}</e-desc-item>
    <e-desc-item label="プロフェッショナル">{{ info.major }}</e-desc-item>
    <e-desc-item label="趣味">{{ info.hobby }}</e-desc-item>
    <e-desc-item label="携帯電話番号">{{ info.phone }}</e-desc-item>
    <e-desc-item label="微信">{{ info.wx }}</e-desc-item>
    <e-desc-item label="QQ">{{ info.qq }}</e-desc-item>
    <e-desc-item label="住所">{{ info.address }}</e-desc-item>
    <e-desc-item label="自己説明" :span='2'>{{ info.intro }}</e-desc-item>
    <e-desc-item label="操作" :span='3'>
      <テンプレートスロット="コンテンツ">
        <el-button size="small" type="primary">変更</el-button>
        <el-button size="small" type="danger">削除</el-button>
      </テンプレート>
    </e-desc-item>
  </e-desc>
</テンプレート>

<スクリプト>
'./e-desc' から EDesc をインポートします
'./e-desc-item' から EDescItem をインポートします。
エクスポートデフォルト{
  コンポーネント:
    EDesc、EDescItem
  },
  データ （） {
    戻る {
      情報：
        名前: 'ジェリー'、
        年齢: 26歳
        性別: '男性'、
        学校: '四川大学'、
        専攻:「プロフェッショナル コーダー」
        住所: '四川省成都市'、
        趣味: 「レンガを動かすこと、フロントエンド、お金を稼ぐこと」
        電話番号: 18888888888、
        wx: 'Nice2cu_Hu',
        QQ: 332983810、
        イントロ: 「私は画家です。絵を描くのが得意です。」新しい家をもっと美しくするために塗装したいです。屋根を塗った後、彼は筆を忙しく飛ばしながら壁を塗った。ああ、私の小さな鼻は変わってしまった。私は画家であり、優れた絵画技術を持っています。新しい家をもっと美しくするために塗装したいです。屋根を塗った後、彼は筆を忙しく飛ばしながら壁を塗った。ああ、私の小さな鼻は変わってしまった。 '
      }
    }
  }
}
</スクリプト>