この記事では、参考までに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 形式を返します
Linuxで環境変数を削除するには?unsetコマンドを使用してすぐに削除します1. Linuxクラ...
環境: [root@centos7 ~]# uname -r 3.10.0-514.el7.x86_...
前回の記事「1行のCSSコードの魅力」では、たった1行のCSSコードで生成できる美しい(奇妙な感じと...
複数の Docker コンテナがデプロイされたサーバーがあり、各 Docker コンテナが stde...
この記事では、jsネイティブカルーセルプラグインの具体的なコードを参考までに共有します。具体的な内容...
Spring jdbc のデータベース操作オブジェクト モデルの詳細な例Spring Jdbc デー...
Linux システムでは、環境変数は適用範囲に応じて、システムレベルの環境変数とユーザーレベルの環境...
多くのウェブサイトのソースコードを確認すると、多くのコメントが見つかります。特に、ソース文書にコメン...
MySQL では、datetime 型は通常、時間を保存するために使用されますが、現在では多くのシス...
この記事では、1枚以上の写真をアップロードするためのVant Uploaderコンポーネントを紹介し...
コンテンツスキャフォールディングを使用してノードプロジェクトを素早く構築するデータベースとやり取りす...
Jsで作ったスライドボタンの具体的なコードは参考までに。具体的な内容は以下のとおりですまずエフェク...
iframeを更新する方法1. 更新するには、JavaScriptのdocument.fr.loca...
ページをナビゲートする2つの方法宣言型ナビゲーション: リンクをクリックしてナビゲーションを実現する...
DOMとは何ですか? JavaScript を使用すると、HTML ドキュメント全体を再構築できます...