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

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

具体示例如下：

 代码如下：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;
}