refactor: 删除选择器组件多余配置

main
wu.jian2 2 years ago
parent b91c001326
commit 44df75cc81

@ -59,7 +59,8 @@ export default {
} }
}, },
watch: { }, watch: { },
created () { }, created () {
},
mounted () { mounted () {
window.dataSetFields = [] window.dataSetFields = []
this.changeStyle(this.config) this.changeStyle(this.config)
@ -120,6 +121,7 @@ export default {
return config return config
}, },
changeStyle (config) { changeStyle (config) {
config = { ...this.config, ...config }
this.innerConfig = config this.innerConfig = config
// //
const selectInputEl = document.querySelector(`.select-${config.code} .el-input__inner`) const selectInputEl = document.querySelector(`.select-${config.code} .el-input__inner`)
@ -164,11 +166,11 @@ export default {
item.style.setProperty('--dropDownHoverBackgroundColor', this.innerConfig.customize.dropDownHoverBackgroundColor) item.style.setProperty('--dropDownHoverBackgroundColor', this.innerConfig.customize.dropDownHoverBackgroundColor)
}) })
// //
const selectDropdownItemSelectedEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item.selected`) // const selectDropdownItemSelectedEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item.selected`)
selectDropdownItemSelectedEl.forEach(item => { // selectDropdownItemSelectedEl.forEach(item => {
item.style.color = this.innerConfig.customize.activeFontColor // item.style.color = this.innerConfig.customize.activeFontColor
item.style.backgroundColor = this.innerConfig.customize.activeBackgroundColor // item.style.backgroundColor = this.innerConfig.customize.activeBackgroundColor
}) // })
} }
// 使 // 使
const selectDropdownItemEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item`) const selectDropdownItemEl = document.querySelectorAll(`.select-popper-${this.innerConfig.code} .el-select-dropdown__item`)

@ -19,7 +19,9 @@
<div class="lc-field-body"> <div class="lc-field-body">
<PosWhSetting :config="config" /> <PosWhSetting :config="config" />
</div> </div>
<SettingTitle v-if="config.border"></SettingTitle> <SettingTitle v-if="config.border">
边框
</SettingTitle>
<div class="lc-field-body"> <div class="lc-field-body">
<BorderSetting <BorderSetting
v-if="config.border" v-if="config.border"
@ -52,31 +54,6 @@
:predefine="predefineThemeColors" :predefine="predefineThemeColors"
/> />
</el-form-item> </el-form-item>
<!-- 下拉框是否需要边框 -->
<!-- <el-form-item label="下拉框边框">
<el-switch v-model="config.customize.dropDownBorder" />
</el-form-item> -->
<!-- 下拉框如果有边框再选择边框颜色 -->
<!-- <el-form-item
v-if="config.customize.dropDownBorder"
label="下拉框边框颜色"
>
<ColorPicker
v-model="config.customize.dropDownBorderColor"
:predefine="predefineThemeColors"
/>
</el-form-item> -->
<!-- hover 颜色 -->
<!-- 下拉框字体大小 -->
<!-- <el-form-item label="下拉框字体大小">
<el-input-number
v-model="config.customize.dropDownFontSize"
class="bs-el-input-number"
:min="12"
:max="100"
/>
</el-form-item> -->
<!-- 下拉框字体颜色 -->
</div> </div>
<SettingTitle>下拉项</SettingTitle> <SettingTitle>下拉项</SettingTitle>
<!-- 选择器下拉框背景颜色 --> <!-- 选择器下拉框背景颜色 -->
@ -107,20 +84,6 @@
:predefine="predefineThemeColors" :predefine="predefineThemeColors"
/> />
</el-form-item> </el-form-item>
<!-- 激活项背景颜色 -->
<el-form-item label="激活项背景颜色">
<ColorPicker
v-model="config.customize.activeBackgroundColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
<!-- 激活项文字颜色 -->
<el-form-item label="激活项文字颜色">
<ColorPicker
v-model="config.customize.activeFontColor"
:predefine="predefineThemeColors"
/>
</el-form-item>
</div> </div>
</el-form> </el-form>
</div> </div>

@ -25,9 +25,8 @@ export const settingConfig = {
const customConfig = { const customConfig = {
type: 'select', type: 'select',
// 名称 // 名称
title: '下拉框',
root: { root: {
version: '2023071001' version: '2023091402'
}, },
// 自定义属性 // 自定义属性
customize: { customize: {
@ -44,11 +43,7 @@ const customConfig = {
// 下拉项hover背景颜色 // 下拉项hover背景颜色
dropDownHoverBackgroundColor: '#6A7E9D', dropDownHoverBackgroundColor: '#6A7E9D',
// 下拉项hover字体颜色 // 下拉项hover字体颜色
dropDownHoverFontColor: '#FFFFFF', dropDownHoverFontColor: '#FFFFFF'
// 激活项背景颜色
activeBackgroundColor: '#6A7E9D',
// 激活项字体颜色
activeFontColor: '#FFFFFF'
} }
} }
export const dataConfig = { export const dataConfig = {

@ -114,19 +114,18 @@ export default {
code: '', code: '',
focus: -1, focus: -1,
searchKey: '', searchKey: '',
remoteComponentlist: [], remoteComponentlist: []
} }
}, },
computed: { computed: {
remoteComponentsGridComputed () { remoteComponentsGridComputed () {
return this.remoteComponentlist.length > 3 return this.remoteComponentlist.length > 3
}, }
}, },
watch: { watch: {
}, },
mounted () { mounted () {
this.remoteComponentlist = [...borderComponents] this.remoteComponentlist = [...borderComponents]
console.log(this.remoteComponentlist)
}, },
methods: { methods: {
chooseComponent (component) { chooseComponent (component) {
@ -144,9 +143,8 @@ export default {
confirm () { confirm () {
this.dialogVisible = false this.dialogVisible = false
if (isEmpty(this.focus)) return if (isEmpty(this.focus)) return
console.log(this.focus.title)
this.$emit('select', this.focus.title) this.$emit('select', this.focus.title)
}, }
} }
} }

@ -30,8 +30,8 @@
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="组件类型"
v-if="type === 'bizComponent'" v-if="type === 'bizComponent'"
label="组件类型"
> >
<el-select <el-select
v-model="bizType" v-model="bizType"
@ -158,7 +158,7 @@ export default {
}, { }, {
label: '基础组件', label: '基础组件',
value: 'native' value: 'native'
}, }
], ],
resolutionRatioOptions: [ resolutionRatioOptions: [
{ {

Loading…
Cancel
Save