fix(过滤组件): radio模式一些样式问题

This commit is contained in:
dataeaseShu 2024-03-22 15:50:00 +08:00
parent bbec017b18
commit 224aec7c8a
5 changed files with 47 additions and 25 deletions

View File

@ -89,7 +89,7 @@ export default {
this.init();
});
},
'element.style': {
radioStyle: {
handler() {
this.setPlaceholderColor()
},
@ -103,6 +103,12 @@ export default {
this.setPlaceholderColor();
});
},
beforeDestroy() {
let styleEle = document.querySelector(`#radio-style${this.id}`)
if (styleEle) {
styleEle. parentElement.removeChild(styleEle)
}
},
methods: {
setPlaceholderColor() {
let styleEle = document.querySelector(`#radio-style${this.id}`)
@ -121,18 +127,13 @@ export default {
}
this.options = this.newList.slice(0, this.maxLength);
},
customInputStyle() {},
init() {
if (this.defaultFirst && this.list.length > 0) {
this.selectValue = this.list[0].value;
}
if (!this.list || !this.list.length) {
this.customInputStyle();
return;
}
},
visualChange(val) {
this.$emit("visual-change", val);
this.$emit("change", val);
},
},
};

View File

@ -68,6 +68,12 @@ export default {
at_the_beginning_of_the_month: 'At the beginning of the month',
at_the_beginning_of_the_year: 'At the beginning of the year',
custom: 'custom',
dropdown_display: 'Dropdown display',
tile_display: 'Tile display',
display_format: 'Display format',
radio: 'Radio',
tab_switching: 'Tab switching',
number_of_display_options: 'Number of display options'
},
track: {
upload_limit_format: 'The image format is incorrect. It supports JPG and PNG',

View File

@ -68,6 +68,12 @@ export default {
at_the_beginning_of_the_month: '月初',
at_the_beginning_of_the_year: '年初',
custom: '自定義',
dropdown_display: '下拉展示',
tile_display: '平鋪展示',
display_format: '展示形式',
radio: '單選框',
tab_switching: 'Tab切換',
number_of_display_options: '展示選項數'
},
track: {
upload_limit_format: '圖片格式錯誤支持JPGPNG',

View File

@ -72,6 +72,12 @@ export default {
at_the_beginning_of_the_month: '月初',
at_the_beginning_of_the_year: '年初',
custom: '自定义',
dropdown_display: '下拉展示',
tile_display: '平铺展示',
display_format: '展示形式',
radio: '单选框',
tab_switching: 'Tab切换',
number_of_display_options: '展示选项数'
},
route: {
dashboard: '首页',

View File

@ -254,19 +254,20 @@
v-model="curComponent.style.showMode"
size="mini"
>
<el-radio label="select">{{ $t('下拉展示') }}</el-radio>
<el-radio label="radio">{{ $t('平铺展示') }}</el-radio>
<el-radio label="select">{{ $t('time.dropdown_display') }}</el-radio>
<el-radio label="radio">{{ $t('time.tile_display') }}</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row
v-if="curComponent.style.showMode === 'radio'"
style="height: 40px;overflow: hidden;"
>
<el-col
:span="3"
style="padding-left: 10px;padding-top: 8px"
>
{{ $t('展示形式') }}
{{ $t('time.display_format') }}
</el-col>
<el-col
:span="20"
@ -276,31 +277,32 @@
v-model="curComponent.style.showStyle"
size="mini"
>
<el-radio label="single">{{ $t('单选框') }}</el-radio>
<el-radio label="tab">{{ $t('Tab切换') }}</el-radio>
<el-radio label="single">{{ $t('time.radio') }}</el-radio>
<el-radio label="tab">{{ $t('time.tab_switching') }}</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row
v-if="curComponent.style.showMode === 'radio'"
style="height: 40px;overflow: hidden;"
>
<el-col
:span="3"
style="padding-left: 10px;padding-top: 8px"
>
{{$t('展示选项数')}}
:span="3"
style="padding-left: 10px;padding-top: 8px"
>
{{$t('time.number_of_display_options')}}
</el-col>
<el-col
:span="8"
style="padding-left: 10px;padding-top: 8px"
>
:span="8"
style="padding-left: 10px;padding-top: 8px"
>
<el-input-number
v-model="curComponent.style.showNum"
:min="1"
:max="10"
controls-position="right"
size="small"
/>
v-model="curComponent.style.showNum"
:min="1"
:max="10"
controls-position="right"
size="small"
/>
</el-col>
</el-row>
</template>
@ -524,6 +526,7 @@ span {
.main-content {
border: 1px solid #E6E6E6;
padding-bottom: 16px;
}
.params-title {