// HTML：
<ヘッダ>
<oSelect @ changeOption = "onChangeOption"：selectData = "selectData"> </ oSelect>
</ヘッダ>
データ（）{
selectData：{
defaultIndex： 0、// デフォルトで選択は、いくつかの最初のものである
：selectStatus falseに、// 表示によって隠されたドロップダウンボックスを制御する
selectOptions：[] // データのドロップダウンボックス
}
}
onChangeOption （インデックス、ID、houseName）{
// ヘッダ選択のドロップダウンリスト
この .selectData.defaultIndex = 指数;
この .houseId = ID;
この .houseName = houseName;
}
作成（）{
CONST = これを、
この .postRequest（ ''、{} 関数（データ）{ //パッケージこの要求は、axiosにパッケージをチェック
that.houseId = DATA [0 ]。 PROJECTID; //デフォルト最初の初期化
that.houseName = DATA [0 ] .projectName;
LETのARR = [];
data.forEach（（ヴァル） => {
arr.push（{
'houseId' ：val.projectIdを、
' houseName ' ：val.projectName
}）
}）
that.selectData.selectOptions =ARR
}）
}、
//パッケージアセンブリoSelect
<テンプレート>
の<div>
<divのクラス= "選択ボックス" @ = "changeStatus"をクリックしてください>
<H5クラス= "タイトルを選択し、" V- 場合名= "selectData：= "selectData.selectOptions.length 0>"。 selectOptionsは[selectData.defaultIndex] .houseName」：クラス= "{ 'を選択し、タイトルアクティブ'：selectData.selectStatus}">
{{selectData.selectOptions [selectData.defaultIndex] .houseName}}
</ H5>
<遷移名= "スライドダウン">
<ulのクラス= "を選択し、オプションの" V-ショー= "selectData.selectStatus">
<LIクラス= "を選択し、オプション項目を" V- ため= "（アイテム、インデックス）selectData.selectOptionsで" @ = "emitOption（インデックス、item.houseId、item.houseName、item.accountCode、item.sysUrl、item.pkHouse）"をクリックします。class = "{ 'を選択し、オプション-active '：selectData.defaultIndex ===インデックス} ">
{{item.houseName}}
</ LI>
<DIV CLASS ="矢印トップ"> </ div>
</ UL>
</遷移>
</ DIV >
</ div>
</テンプレート>
<スクリプト>
輸出デフォルト{
名： 'oSelect' 、
小道具：{
selectData：{
タイプ：オブジェクト、
デフォルト：関数（）{
リターン{}
}
}
}、
方法：{
emitOption（インデックス、ID、名前、accountCode、sysUrl、pkHouse）{
この $発する（ 'changeOption' 、インデックス、ID、名前、accountCode、sysUrl、pkHouse）。
// にconsole.log（インデックス）
}、
changeStatus（）{
この .selectData.selectStatus =！この.selectData.selectStatus
}
}
}
</ SCRIPT>
<スタイル>
.select - ボックス{
位置：相対。
/ * 最大幅：250ピクセル; * /
幅： 100％;
行 - 高さ：55×;
/ *マージン：は50px自動; * /
/ * のborder-bottom：1pxの固体＃1 d8dce5。* /
}
.select - タイトル{
位置：相対。
パディング： 0 30px 0 10pxの;
/ * 国境：1pxの固体＃1 d8dce5。* /
国境 - 半径：5pxの;
トランジション - 持続時間：500ミリ秒。
カーソル：ポインタ;
フォント - サイズ：32PX;
フォント -weight：400 ;
色：＃ 333 ;
テキスト - 整列：左;
}
/ * 向下的三角* /
.select -タイトル：{後の
内容： '' ;
位置：絶対;
高さ： 0 ;
幅： 0 ;
国境 - トップ：16pxに固体＃1 d70b19。
国境 - 左：ソリッド透明に16px;
国境 - 右：16pxに透明な固体;
右：9px;
トップ： 0 ;
下： 0 ;
マージン：自動;
トランジション - 持続時間：500ミリ秒。
遷移 -timing- 関数：ease- に - アウト。
}
.select -Title- アクティブ{
ボーダー - カラー：＃1 409eff;
}
/ * の矢印Xianxiang * /
.Select -title- アクティブ：{後
変換：回転（ - 原稿180°）;
ボーダー -トップ- カラー：＃1 d70b19;
}
。 SELECT - オプション{
位置：絶対;
/ * パディング：10pxの0; * /
/ * トップ：85px; * /
ボーダー：1ピクセル固体＃1 d8dce5;
幅： 100％;
ボーダー - RADIUS：5pxの;
/ * 全体のUL背景白の色* /
背景- 色：#FFF;
ボックス - 影：1pxの4PX 2ピクセル2ピクセル#cdcdcd。
Z -index：999 ;
}
.select -option- 項目{
パディング： 0 10pxのを、
カーソル：ポインタ;
トランジション - 持続時間：300ミリ秒。
テキスト - 整列：左;
色：＃ 999 ;
}
.select -option項目：ホバー.select-option- アクティブ{
背景：＃1 f1f1f1。
/ * 色：＃409eff。
* /
色：＃1 d70b19。
}
/ * 箭头CSS* /
位置：絶対;
.arrow - トップ{
/ * 位置：絶対。
高さ：0;
幅：0;
/ *トップ：-7px。* /
/ * のborder-bottom：20ピクセル固体＃409eff。* /
/ * ＃d8dce5 * /
/ * 国境左：20ピクセル固体透明。* /
/ * / *のborder-right：20ピクセル固体透明。* /
/ * 左：0;
右：0; * /
/ * マージン：自動;
z屈折率：99。* /
}
/ * 点击之后的向上的三角* /
/ * .arrowトップ：{後に
コンテンツ： '';
表示ブロック;
高さ：0;
幅：0;
border-bottom：20ピクセル固体＃409eff。
国境左：20ピクセル固体透明。
border-right：20ピクセル固体透明。
右：5pxの;
トップ：-55px;
z屈折率：99。
} * /
/ * 下拉框显示隐藏动画* /
.slideダウンの入る活性、.slide-ダウン休暇{
遷移：全.3s容易 - で - アウト。
変換 -origin：0 トップを。
変換：scaleYの（ 1 ）;
}
.slide -down- {入力
変換：scaleYの（ 0 ）。
}
.slideダウンの-leave- アクティブ{
遷移：全.3s容易 - で - アウト。
変換 -origin：0 トップを。
変換：scaleYの（ 0 ）;
}
</スタイル>
効果：
