テクノロジーの発展に伴い、開発の複雑さはますます高くなっており、従来の開発手法ではシステム全体をアプリケーションとして構築していましたが、小さな変更や小さな機能の追加によって全体のロジックが変わってしまうことがよくありました。この変更は体全体に影響を与えます。コンポーネント開発により、個別の開発と保守を効率的に実行でき、それらを自由に組み合わせることができます。低い開発効率を大幅に改善し、メンテナンスコストを削減します。
コンポーネント化は、複数の反復を経た複雑なビジネス シナリオおよび製品を含むフロントエンド アプリケーションにとって唯一の方法です。コンポーネント化には、表面的に見えるモジュールの分割や切り離しだけではなく、ビジネス特性に基づいたモジュール分割戦略、モジュール間の対話方法、システムの構築など、コンポーネント化をサポートするための裏での多くの作業が必要です。
この記事で紹介するコンポーネントは次のとおりです。
フロントエンド Vue は、シンプルで実用的なドロップダウン フィルター ドロップダウン メニューをカスタマイズします。完全なコードをダウンロードするには、https://ext.dcloud.net.cn/plugin?id=13020 にアクセスしてください。
フロントエンド コンポーネントの詳細については、WeChat パブリック アカウントをフォローしてください: フロントエンド コンポーネント開発
レンダリングは次のとおりです。
＃＃＃＃ 説明書
「」「使い方」
<!-- titleArr: 選択項目の配列dropArr: ドロップダウン項目の配列 @finishDropClick: ドロップダウン フィルター完了イベント -->
<ccDropDownMenu :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick" ></ccDropDownMenu>
「」
#### HTML コード部分
```html
<テンプレート>
<ビュークラス="コンテンツ">
<!-- titleArr: 選択項目の配列dropArr: ドロップダウン項目の配列 @finishDropClick: ドロップダウン フィルター完了イベント -->
<ccDropDownMenu :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick" ></ccDropDownMenu>
</ビュー>
</テンプレート>
「」
#### JS コード (データを入力するコンポーネントの導入)
```JavaScript
<スクリプト>
'../../components/ccDropDownMenu.vue' から ccDropDownMenu をインポートします
デフォルトのエクスポート {
コンポーネント:{
ccドロップダウンメニュー
}、
データ（） {
戻る {
titleArr:['面積', '住宅タイプ', '面積', '価格'],
ドロップアー:[
// エリア
[{
テキスト: '制限なし',
価値： ""
}、
{
テキスト: '茘湾区'、
値: "440103"
}、{
テキスト: '越秀区',
値: "440104"
}、
{
テキスト: "海珠地区"、
値: "440105"
}、
{
テキスト: '天河区',
値: "440106"
}、
{
テキスト: '白雲地区',
値: "440111"
}、
{
テキスト: '花都区',
値: "440114"
}、
{
テキスト: '従化区',
値: "440117"
}、{
テキスト: '南海地区',
値: "440605"
}]、
// ハウスタイプ
[{
テキスト: '制限なし',
価値： ""
},{
テキスト: 'シングルルーム',
値: "10000"
}、
{
テキスト: 'ベッドルーム 1 つとリビング ルーム 1 つ',
値: "11000"
}、
{
テキスト: 'ベッドルーム 2 つとリビング ルーム 1 つ',
値: "21000"
}、
{
テキスト: 'ベッドルームが 3 つとリビングルームが 1 つ',
値: "31000"
}、{
テキスト: '4 つのベッドルームと 2 つのリビングルーム',
値: "42000"
}]、
// [@"≤40㎡",@"40-60㎡",@"60-80㎡",@"80-100㎡",@"100-120㎡",@"≧120㎡"]
// エリア
[{
テキスト: '制限なし',
価値： ""
},{
テキスト: '≤40㎡',
値: "0-40"
}、
{
テキスト: '40-60㎡',
値: "40-60"
}、
{
テキスト: '60-80㎡',
値: "60-80"
}、
{
テキスト: '80-100㎡',
値: "80-100"
}、
{
テキスト: '100-120㎡',
値: "100-120"
}、
{
テキスト: '≥120㎡',
値: "120-99999"
}]、
// [@"≤1000",@"1000-1500",@"1500-2000",@"2000-3000",@"3000-4000㎡,@"≥4000"]
// 家賃
[{
テキスト: '制限なし',
価値： ""
},{
text: '≤1000元',
値: "0-1000"
}、
{
text: '1000-1500元',
値: "1000-1500"
}、
{
text: '1500-2000元',
値: "1500-2000"
}、
{
text: '2000-3000元',
値: "2000-3000"
}、
{
text: '3000-4000元',
値: "3000-4000"
}、
{
text: '≥4000元',
値: "4000-99999"
}]]、
フィルター結果データ:[]
}
}、
onLoad() {
}、
メソッド: {
終了クリック(結果データ){
this.filterResultData = 結果データ;
uni.showModal({
タイトル:「暖かいリマインダー」、
content:'フィルターデータ = ' + JSON.stringify(resultData)
})
}
}
}
</script>
「」
#### CSS
```css
<スタイル>
。コンテンツ {
ディスプレイ: フレックス;
フレックス方向: 列;
整列項目: 中央;
コンテンツの位置揃え: 中央;
}
</スタイル>
「」