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

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

この記事の例では、Vue Element UIカスタム説明リストコンポーネントの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

レンダリング

前面に書かれた

バックエンド管理を書くとき、リストをクリックして詳細を表示し、データ情報を表示することがよくあります。Element UI にはテーブルコンポーネントがありますが、説明コンポーネントがありません。以前は、このような状況に遭遇すると、チームメンバーが独自のスタイルを記述する必要があり、記述が面倒で、各人が記述したスタイルが統一されておらず、プロジェクト全体のスタイルが崩れていました。
例えば、Ant Design UI には、非常に使いやすい説明コンポーネントがあるので、Element UI の el-row と el-col を組み合わせて自分で簡単に記述しました。

どのような機能が実装されているか

1. 各行の高さは、行内の列の最大高さに応じて自動的に拡張されます。
2. 最後の列が不完全にならないように列幅を自動的に補完する
3. プレーンテキストとHTMLスロットをサポート
4. 1行に複数の列を設定できる
5. 各列幅のカスタマイズをサポート
6. 動的なデータの再描画をサポート

コンポーネント設計

1. 親子コンポーネントのネストを使用します。親コンポーネントは e-desc、子コンポーネントは e-desc-item です。
2. e-desc-itemはpropsのラベルとスロットの値を渡し、$slots.contentを使用してDOMを表示します。
3. el-rowとel-colを使用してコンポーネント全体のレイアウトを実装する

e-descコンポーネントをカプセル化する

<テンプレート>
  <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%;
    }
  }
</スタイル>

e-desc-itemコンポーネントをカプセル化する

<テンプレート>
  <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、
        イントロ: 「私は画家です。絵を描くのが得意です。」新しい家をもっと美しくするために塗装したいです。屋根を塗った後、彼は筆を忙しく飛ばしながら壁を塗った。ああ、私の小さな鼻は変わってしまった。私は画家であり、優れた絵画技術を持っています。新しい家をもっと美しくするために塗装したいです。屋根を塗った後、彼は筆を忙しく飛ばしながら壁を塗った。ああ、私の小さな鼻は変わってしまった。 '
      }
    }
  }
}
</スクリプト>

パラメータの説明

この時点でコードは完成しています。何か不備やバグなどありましたら、メッセージを残してお知らせください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Element-ui レイアウト (行と列コンポーネント) の実装
  • el-row列レイアウトの使用に関するElement-UIチュートリアル
  • 要素 el-row el-col レイアウト コンポーネントの詳細な説明

<<:  Linuxアカウントファイル制御管理の詳細な手順

>>:  MySQL でプロファイルを使用する方法のチュートリアル

推薦する

Tomcatが親の委任メカニズムを破壊する方法についての簡単な説明

目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...

Linux システム AutoFs 自動マウント サービスのインストールと構成

目次序文1. サービスプログラムをインストールする2. メイン設定ファイルを書く3. サブ構成ファイ...

Windows Server 2012 でファイル サーバーを構築するための詳細な手順

ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...

画像をMySQLデータベースに保存し、フロントエンドページに表示するための実装コード

目次1. まず、pycharmを使用してDjangoプロジェクトを作成し、関連する環境を設定します。...

AngularJSにおける括弧の役割の詳細な説明

1. 括弧の役割1.1 角括弧 [ ]属性名が角括弧で囲まれている場合、右側には式の値が割り当てられ...

CentOS7 で docker を使用して Apollo 構成センターをデプロイする実装

Apollo オープンソース アドレス: https://github.com/ctripcorp/...

JavaScript スネーク実装コード

この記事の例では、参考までに貪欲なスネークを実装するためのJavaScriptの具体的なコードを共有...

CSSスタイルシートを効率的に使用するためのヒント: スタイルシートの力を最大限に活用する

インターネット経済の継続的な発展に伴い、インターネット上の専門ウェブサイト、公共サービスウェブサイト...

一般的な XHTML タグの紹介

<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...

Linux で文字化けしたファイルや特殊文字のファイルを削除する方法

エンコーディングの理由により、Linux サーバーに中国語のファイルやディレクトリをアップロードまた...

Centos7.2 で mysql5.7 データベースをインストールするための詳細な手順

サーバー上の mysql はバージョン 8.0.12 でインストールされており、ローカルのものはバー...

VMware Workstation 14 Pro に Win10 システムをインストールする

この記事では、VMware Workstation 14 Proにシステムをインストールする方法を紹...

Centos8 システムの VMware インストール チュートリアル図 (コマンド ライン モード)

目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...

画像比較を実現するjQueryプラグイン

この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...

MySQL データベース接続例外の概要 (収集する価値あり)

Centos にプロジェクトをデプロイするときに奇妙な問題が見つかりました。データベース接続で例外...