<template> <div> <el-form-item :label-width="labelWidth" label="边框" > <el-input v-model="title" clearable read-only placeholder="请选择边框" @focus="init" > <template slot="append"> <el-button size="small" type="primary" @click="init" > 选择 </el-button> </template> </el-input> <BorderSelect v-model="config.type" ref="BorderSelect" /> </el-form-item> <el-form-item :label-width="labelWidth" label="上边距" > <el-input-number v-model="config.padding[0]" class="bs-el-input-number" :min="0" :step="1" /> </el-form-item> <el-form-item :label-width="labelWidth" label="右边距" > <el-input-number v-model="config.padding[1]" class="bs-el-input-number" :min="0" :step="1" /> </el-form-item> <el-form-item :label-width="labelWidth" label="下边距" > <el-input-number v-model="config.padding[2]" class="bs-el-input-number" :min="0" :step="1" /> </el-form-item> <el-form-item :label-width="labelWidth" label="左边距" > <el-input-number v-model="config.padding[3]" class="bs-el-input-number" :min="0" :step="1" /> </el-form-item> <div v-if="config.type"> <el-form-item :label-width="labelWidth" label="是否显示标题" v-if="config.type!='GcBorder16'" > <el-switch v-model="config.isTitle" class="bs-el-switch" :active-value="true" :inactive-value="false" /> </el-form-item> <el-form-item v-if="config.isTitle&&config.type!='GcBorder11'" :label-width="labelWidth" label="标题高度" > <el-input-number v-model="config.titleHeight" class="bs-el-input-number" :min="0" :step="1" /> </el-form-item> <el-form-item v-if="config.isTitle&&config.type!='GcBorder11'" :label-width="labelWidth" label="标题字体大小" > <el-input-number v-model="config.fontSize" class="bs-el-input-number" :min="0" :step="1" /> </el-form-item> <el-form-item v-if="config.isTitle&&config.type!='GcBorder11'" :label-width="labelWidth" label="标题颜色" > <el-color-picker v-model="config.fontColor" popper-class="bs-el-color-picker" class="bs-el-color-picker" show-alpha /> </el-form-item> <!-- <el-form-item v-if="config.type=='GcBorder15'" :label-width="labelWidth" label="外侧边框线宽度" > <el-input-number v-model="borderWidth" class="bs-el-input-number" :step="1" :min="0" :max="100000" /> </el-form-item> --> <div v-for="(setting, settingIndex) in list.setting" :key="settingIndex+1" > <el-form-item :label="setting.type=== 'padding' ? '' : setting.label" :label-width="labelWidth" > <el-input v-if="setting.type === 'input'" v-model="config[setting.field]" :placeholder="`请输入${setting.label}`" clearable /> <el-input v-model="config[setting.field]" v-else-if="setting.type === 'background'" clearable placeholder="选择或输入链接" > <template slot="append"> <el-button size="small" type="primary" @click="initCard" > 选择 </el-button> </template> </el-input> <el-button v-else-if="setting.type === 'move'" type="primary" @click="initMove(config.imgUrl)" > 图形切割 </el-button> <el-select v-else-if="setting.type === 'select'" v-model="config[setting.field]" popper-class="bs-el-select" class="bs-el-select" :placeholder="`请选择${setting.label}`" :multiple="setting.multiple" clearable > <el-option v-for="(opt, optIndex) in setting.options" :key="optIndex" :label="opt.label" :value="opt.value" /> </el-select> <template v-else-if="setting.type === 'colorSelect'"> <color-select v-model="colorScheme" @update="updateColorScheme" /> <div style=" display: flex; align-items: center; flex-wrap: wrap; " class="color-picker-box" > <el-color-picker v-for="(colorItem, colorItemIndex) in colors" :key="colorItemIndex" v-model="setting.value[colorItemIndex]" popper-class="bs-el-color-picker" show-alpha class="start-color" /> <span class="el-icon-circle-plus-outline" style="color: #007aff; font-size: 20px" @click="addColor" /> <span v-if="colors.length" class="el-icon-remove-outline" style="color: #ea0b30; font-size: 20px" @click="delColor()" /> </div> </template> <el-color-picker v-else-if="setting.type === 'colorPicker'" v-model="config[setting.field]" popper-class="bs-el-color-picker" class="bs-el-color-picker" show-alpha /> <BorderColorSetting v-else-if="setting.type === 'gradual'" v-model="config[setting.field]" /> <el-input-number v-else-if="setting.type === 'inputNumber'" v-model="config[setting.field]" class="bs-el-input-number" :step="setting.step || 1" :min="setting.min || 0" :max="setting.max || 100000" /> <el-radio-group v-else-if="setting.type === 'radio'" v-model="config[setting.field]" class="bs-el-radio-group" > <template v-for="(opt, optIndex) in setting.options"> <el-radio-button :key="optIndex" :label="opt.value" > {{ opt.label }} </el-radio-button> </template> </el-radio-group> <el-switch v-else-if="setting.type === 'switch'" v-model="config[setting.field]" class="bs-el-switch" :active-value="setting.active" :inactive-value="setting.inactive" /> <el-slider v-else-if="setting.type === 'slider'" v-model="config[setting.field]" :min="0" :max="1" :step="0.01" /> <PaddingSetting v-else-if="setting.type === 'padding'" v-model="config[setting.field]" /> </el-form-item> </div> <SourceDialog ref="SourceDialog" @getImg='changeImg' /> <MoveDialog @getArray='changeBorder' ref="MoveDialog"/> </div> </div> </template> <script> import _ from 'lodash' import plotList from 'data-room-ui/BorderComponents/settingList.js' import BorderColorSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderColorSetting/index.vue' import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue' import BorderSelect from 'data-room-ui/BorderSelect/index.vue' import SourceDialog from '../SourceDialog/index.vue' import MoveDialog from './MoveDialog/index.vue' export default { name: '', components: { BorderSelect, ColorSelect, BorderColorSetting, SourceDialog, MoveDialog }, props: { bigTitle:{ type: String, default: '' }, config: { type: Object, default: () => ({ type: '', titleHeight: 0, fontSize: 0, h: 0, }) }, labelWidth: { type: String, default: '100px' } }, watch:{ // borderWidth:{ // handler (val) { // this.config.borderWidth=val // } // }, 'config.type':{ handler (val) { this.config.isTitle=this.list.isTitle plotList[Symbol.iterator]=function*(){ let keys=Object.keys(plotList) for(let k of keys){ yield [k,plotList[k]] } } for(let [key,value] of plotList){ if(value.padding&&val==value.type){ this.config.padding=[...value.padding] } if(value.type==this.config.type){ value.setting.forEach((item)=>{ this.$set(this.config,item.field,item.value) }) } } } }, }, computed:{ title:{ set(){ this.config.type='' this.config.padding=[16,16,16,16] }, get(){ plotList[Symbol.iterator]=function*(){ let keys=Object.keys(plotList) for(let k of keys){ yield [k,plotList[k]] } } let name for(let [key,value] of plotList){ if(value.type==this.config.type){ name=value.name } } return name } }, list(){ plotList[Symbol.iterator]=function*(){ let keys=Object.keys(plotList) for(let k of keys){ yield [k,plotList[k]] } } let obj={} for(let [key,value] of plotList){ if(value.type==this.config.type){ obj={setting:value.setting,isTitle:value.isTitle} } } return obj } }, data () { return { // borderWidth:0 } }, mounted () { // if(this.config.borderWidth){ // this.borderWidth=this.config.borderWidth // } }, methods: { changeBorder(val){ this.$set(this.config,'borderArray',val) }, changeImg(val){ this.$set(this.config,'imgUrl',val.url) }, init(){ this.$refs.BorderSelect.init() }, initCard(){ this.$refs.SourceDialog.init() }, initMove(val){ this.$refs.MoveDialog.init(val,this.config.borderArray) } } } </script> <style lang="scss" scoped> ::v-deep .el-color-picker__trigger { border-color: var(--bs-el-border); } ::v-deep .el-input--suffix .el-input__inner{ padding-right: 10px !important; } .color-picker-box{ ::v-deep .el-color-picker__trigger { width: 27px!important; } } </style>