提交 30a0c47a 编写于 作者: KK's avatar KK

下拉框样式优化

上级 59a91286
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
width: 100%; width: 100%;
ion-icon{ ion-icon{
position: absolute; position: absolute;
right: 32px; right: 10px;
bottom: 12px; bottom: 12px;
z-index: 2; z-index: 2;
} }
...@@ -12,6 +12,24 @@ ...@@ -12,6 +12,24 @@
} }
ion-select::part(text) { ion-select::part(text) {
text-align: right; text-align: right;
padding-right: 17px; padding-right: 8px;
}
ion-select::part(icon) {
display: none;
}
.ion-select-icon{
right: 14px;
top: 50%;
margin-top: -3px;
position: absolute;
width: 0px;
height: 0px;
color: currentcolor;
pointer-events: none;
border-top: 5px solid;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
color: #615e5ec4;
} }
} }
\ No newline at end of file
<template> <template>
<div v-if="overload" class="app-mobile-select"> <div v-if="overload" class="app-mobile-select" >
<ion-icon v-if="curValue" name="close-circle-outline" @click="clear"></ion-icon> <ion-icon v-if="curValue" name="close-circle-outline" @click="clear"></ion-icon>
<div v-if="curValue== null || curValue==''" class="ion-select-icon"></div>
<ion-select :value="curValue" :disabled="disabled ? disabled : false" @ionChange="change" interface="action-sheet" @click="load" :cancel-text="$t('app.button.cancel')"> <ion-select :value="curValue" :disabled="disabled ? disabled : false" @ionChange="change" interface="action-sheet" @click="load" :cancel-text="$t('app.button.cancel')">
<template v-if="codeListType == 'DYNAMIC'"> <template v-if="codeListType == 'DYNAMIC'">
<ion-select-option v-for="option of options" :key="option.value" :value="option.value" class="mob-select-text">{{($t('userCustom.'+tag+'.'+option.value)!== ('userCustom.'+tag+'.'+option.value))?$t('userCustom.'+tag+'.'+option.value) : option.text}}</ion-select-option> <ion-select-option v-for="option of options" :key="option.value" :value="option.value" class="mob-select-text">{{($t('userCustom.'+tag+'.'+option.value)!== ('userCustom.'+tag+'.'+option.value))?$t('userCustom.'+tag+'.'+option.value) : option.text}}</ion-select-option>
...@@ -180,6 +181,7 @@ export default class AppSelect extends Vue { ...@@ -180,6 +181,7 @@ export default class AppSelect extends Vue {
} else { } else {
this.load(); this.load();
} }
this.showIcon();
} }
/** /**
...@@ -237,6 +239,7 @@ export default class AppSelect extends Vue { ...@@ -237,6 +239,7 @@ export default class AppSelect extends Vue {
arg.param = param; arg.param = param;
return true; return true;
} }
} }
</script> </script>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册