この記事では、参考までにVue More Filter Itemウィジェットの実装方法を例として紹介します。具体的な内容は以下のとおりです。 効果: シンプルな小さなエフェクトです。フィルタリング条件が多数ある場合、デフォルトではいくつかの項目のみが表示されるため、冗長に感じません。必要に応じて、クリックして展開し、より多くの条件をフィルタリングできます。また、インターフェースのサイズを自動的に決定し、さらにフィルタリング項目が必要かどうかを判断することもできます。 「クエリとリセット」はコンポーネントに直接組み込まれているため、コンポーネント スタイルの実装が容易になり、スロットにも使用できます。 通常の大画面 解像度が低い 他にもフィルタリングボタンがあるのがわかります。ドロップダウンをクリックすると スロット コード: <テンプレート> <div :class="['colla-wrap']" ref="フィルター"> <div class="colla-box" ref="filterCont" :style="maxWidth ? 'max-width:' + maxWidth: ''"> <スロット></スロット> </div> <div class="ctrl"> <div class="deal-b" > <el-button size="mini" type="primary" icon="el-icon-search" @click="clickSearch">検索</el-button> <el-button size="mini" plain icon="el-icon-refresh-left" @click="clickReset">リセット</el-button> <スロット名="moreBtns"></スロット> <div class="deal-b" @click="showCollapse" v-if="autoExpend.more"> <i class="el-icon-arrow-down turnDown" v-if="!autoExpend.collapseVisible"></i> <i class="el-icon-arrow-up turnUp" v-if="autoExpend.collapseVisible"></i> <div v-if="!autoExpend.collapseVisible" class="more-words">その他のフィルター項目</div> <div v-if="autoExpend.collapseVisible" class="more-words">フィルターを折りたたむ</div> </div> </div> </div> </div> </テンプレート> <スクリプト> エクスポート デフォルト={ データ(){ 戻る { 折りたたみデータ:{ 折りたたみ表示:false }, // より多くのフィルター項目を表示するために自動的に折りたたむ autoExpend:{ 詳細:false、 折りたたみ表示:false、 hasTop:false、 フィルター:false }, } }, プロパティ:['maxWidth'], マウントされた(){ this.watchScrollHeight() window.addEventListener("サイズ変更", () => { this.watchScrollHeight() }); }, 方法:{ クリックサーチ(){ this.$emit('clickSearch') }, クリックリセット(){ this.$emit('clickReset') }, 表示折りたたみ(){ this.methods('showCollapse') }, 表示折りたたみ(){ this.autoExpend.collapseVisible = !this.autoExpend.collapseVisible this.$refs.filterCont.style.height = this.autoExpend.collapseVisible?'auto':'50px' } //この高さを監視してみるwatchScrollHeight(){ filter = this.$refs.filter; とします。 if(フィルター){ this.$nextTick(() => { this.autoExpend.more = $(filter).find(".colla-box")[0].scrollHeight > 50; }) } // このスロットが表示されるかどうかを決定するために、下に要素ノードがあるかどうかを判断します // 通常の検索ボックスの位置スロットを判断します if (this.$refs.filterCont&&this.$refs.filterCont.childNodes.length) { this.autoExpend.hasFilter = true } } } } </スクリプト> <スタイル スコープ lang="scss"> .colla-wrap{ 幅: 100%; .colla-box{ 最大幅: calc(100% - 400px); フロート: 左; ボックスのサイズ: 境界線ボックス; オーバーフロー: 非表示; 高さ: 50px; >div、ボタン{ フロート: 左; 右マージン: 20px; 下マージン: 20px; } } .ctrl{ ディスプレイ: フレックス; align-items:flex-start; コンテンツの配置: flex-start; 色: #409EFF; ボタン{ 右マージン: 20px; } .deal-b{ ディスプレイ: フレックス; align-items:flex-start; flex-wrap: nowrap; .deal-b{ 右マージン: 0; 下マージン: 0; 上マージン: 5px; ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 カーソル: ポインタ; 色: #409EFF; .more-words{ 最小幅: 75px; } 私{ 色: #409EFF; 右マージン: 5px; } } } } } </スタイル> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 上級学習ノート (パート 3): MySQL 論理アーキテクチャの紹介、MySQL ストレージ エンジンの詳細な説明
>>: Zabbix redis 自動ポート検出スクリプトは json 形式を返します
この記事では、マウスでカード内外のコンテンツを切り替えるためのjsの具体的なコードを紹介します。具体...
効果 HTML を実装するには、まずクリーンな HTML ページを準備し、ノードを記述します。 &l...
序文ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である Wor...
序文この記事では、主にライブラリ内のすべてのテーブルを返すMysql8.0ドライバgetTables...
導入同社の最近の Vue フロントエンド プロジェクトの要件: ポップアップ ウィンドウのドラッグ、...
最近はMySQLのメモをたくさん取っていますが、それは主に会社のOracleが比較的安定していてメン...
この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考まで...
目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...
この記事の例では、参考までに、シンプルなショッピングカートモジュールを実装するためのjsの具体的なコ...
この記事では、例を使用して、MySQL の水平テーブルと垂直テーブル間の変換操作を実装する方法を説明...
rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...
ハイパーリンク a タグはリンク ポイントを表し、英語の単語「anchor」の略語です。その機能は、...
1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...
Dockerfileの作成yumソースを設定する cd /tmp/docker vim Docker...
この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考...