この記事の例では、Vue Element UIカスタム説明リストコンポーネントの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 レンダリング前面に書かれたバックエンド管理を書くとき、リストをクリックして詳細を表示し、データ情報を表示することがよくあります。Element UI にはテーブルコンポーネントがありますが、説明コンポーネントがありません。以前は、このような状況に遭遇すると、チームメンバーが独自のスタイルを記述する必要があり、記述が面倒で、各人が記述したスタイルが統一されておらず、プロジェクト全体のスタイルが崩れていました。 どのような機能が実装されているか1. 各行の高さは、行内の列の最大高さに応じて自動的に拡張されます。 コンポーネント設計1. 親子コンポーネントのネストを使用します。親コンポーネントは e-desc、子コンポーネントは e-desc-item です。 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL でプロファイルを使用する方法のチュートリアル
目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...
目次序文1. サービスプログラムをインストールする2. メイン設定ファイルを書く3. サブ構成ファイ...
ファイル サーバーは、企業内で最も一般的に使用されるサーバーの一つであり、主にファイル共有を提供する...
目次1. まず、pycharmを使用してDjangoプロジェクトを作成し、関連する環境を設定します。...
1. 括弧の役割1.1 角括弧 [ ]属性名が角括弧で囲まれている場合、右側には式の値が割り当てられ...
Apollo オープンソース アドレス: https://github.com/ctripcorp/...
この記事の例では、参考までに貪欲なスネークを実装するためのJavaScriptの具体的なコードを共有...
インターネット経済の継続的な発展に伴い、インターネット上の専門ウェブサイト、公共サービスウェブサイト...
<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...
エンコーディングの理由により、Linux サーバーに中国語のファイルやディレクトリをアップロードまた...
サーバー上の mysql はバージョン 8.0.12 でインストールされており、ローカルのものはバー...
この記事では、VMware Workstation 14 Proにシステムをインストールする方法を紹...
目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...
この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...
Centos にプロジェクトをデプロイするときに奇妙な問題が見つかりました。データベース接続で例外...