Harmonyos 自定义下拉列表框（select）

自定义一个下拉列表框，当这个功能有效时，点击可弹出下拉框，选中某个选项后，在左边功能名称下面显示选项值，右边的箭头替换成自定义图标，例如手法功能；当功能无效时，置灰，如力度功能；

具体示例如下：

代码如下：index.hml

<!--手法无效时-->
<div class="fun-grid-item"  if="{
         
  {manualInvalid}}">
                        <div class="grid-item-parent-vertical">
                            <text class="fun-name" style="opacity: 0.38;">手法</text>
                            <text class="fun-status" show="false">{
         
  {manualIndex}}</text>
                        </div>
                        <div class="onOffLine_status" style="flex: 2;">
                            <image src="/common/img/operate_drier_offline.png" style="width: 50px; height: 50px; "></image>
                        </div>
                    </div>

<!--手法有效时-->
                    <div class="fun-grid-item" else>
                        <select on:change="changeSelect" style="opacity: 0;width: 100%;" disabled="{
         
  {isOnLine==true?(!(onOffStatus==true)):true}}">
                            <option for="{
         
  { manualModeArr }}" value="{
         
  { $item.value }}"
                                    selected="{
         
  {manualMode==$item.value?true:false}}">{
         
  {$item.name}}</option>
                        </select>
                        <div class="manualMode-valid">
                            <div class="grid-item-parent-vertical">
                                <text class="fun-name" style="opacity: {
         
  {isOnLine==true?(onOffStatus==true?1:0.38):0.38}};">手法</text>
                                <text if="{
         
  {onOffStatus==true}}" class="fun-status" show="{
         
  {isOnLine==true?manualMode!=0?true:false:false}}">{
         
  {manualIndex}}</text>
                                <text else class="fun-status" show="false">{
         
  {manualIndex}}</text>
                            </div>
                            <div class="onOffLine_status" style="flex:1;height: 50px;">
                                <image show="{
         
  {onOffStatus==true}}" src="{
         
  {isOnLine==true?manualMode!=0?/common/img/operate_drier_sel.png:/common/img/operate_drier_unsel.png:/common/img/operate_drier_offline.png}}" style="width: 50px; height: 50px; "></image>
                                <image show="{
         
  {onOffStatus==false}}" src="/common/img/operate_drier_offline.png" style="width: 50px; height: 50px; "></image>
                            </div>
                        </div>
                    </div>

index.css

.manualMode-valid {
    text-align: center;
    align-items: center;
    display: flex;
    position: absolute;
}

.fun-grid-item {
    height: 138px;
    border-radius: 24px;
    background-color: #ffffff;
    text-align: center;
    align-items: center;
    width: 100%;
}

.grid-item-parent-vertical {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fun-name {
    font-family: HWtext-55ST;
    margin-left: 32px;
    font-size: 32px;
    text-align: center;
}
.fun-status {
    margin-left: 32px;
    font-size: 24px;
    color: #007DFF;
    margin-top: 6px;
    position: relative;
    font-family: HWtext-55ST;
}
.offLine_status {
    opacity: 0.38;
}

.onOffLine_status_label {
    text-align: center;
    margin-left: 32px;
    font-size: 36px;
    font-family: HWtext-65ST;
    color: #000000;
}
.onOffLine_status {
    display: flex;
    justify-content: flex-end;
    margin-right: 32px;
}