dvcp_v2_webapp/packages/bigscreen/designer/components/componentConfig.vue

<template>
  <section class="componentConfig">
    <div class="layout-right__content--wrapper">
      <div class="layout-config__group">
        <h2>基础设置</h2>
        <div class="layout-config__item">
          <label>图表尺寸</label>
          <div class="layout-config__item--right">
            <el-input-number size="mini" :min="0" v-model="config.width" controls-position="right"/>
            <el-input-number size="mini" :min="0" v-model="config.height" controls-position="right"/>
          </div>
        </div>
        <div class="layout-config__item">
          <label>图表位置</label>
          <div class="layout-config__item--right">
            <el-input-number size="mini" :min="0" v-model="config.left" controls-position="right"/>
            <el-input-number size="mini" :min="0" v-model="config.top" controls-position="right"/>
          </div>
        </div>
        <config-item label="內边距">
          <el-input size="mini" v-model="config.padding" clearable placeholder="请输入符合css的padding合法值"/>
        </config-item>
      </div>
    </div>
    <div class="layout-right__content--wrapper">
      <div class="layout-config__group">
        <h2>组件设置</h2>
        <config-extra v-model="config"/>
      </div>
    </div>
    <div class="layout-right__content--wrapper">
      <div class="layout-config__group">
        <h2>弹窗设置</h2>
        <config-item label="标题">
          <el-input size="mini" clearable placeholder="请输入弹窗标题" v-model="config.dialogTitle"/>
        </config-item>
        <config-item label="内容" v-if="!['table','AiDvTable','AiDvMap','linkageMap'].includes(config.type)">
          <ai-dialog-btn dialog-title="弹窗内容" text="打开编辑器" :modal="false">
            <ai-editor clearable placeholder="请输入弹窗内容" v-model="config.dialogContent" :instance="instance"/>
          </ai-dialog-btn>
        </config-item>
      </div>
    </div>
  </section>
</template>

<script>
import ConfigItem from "./configItem";
import ConfigExtra from "./configExtra.vue";

export default {
  name: 'componentConfig',
  components: {ConfigExtra, ConfigItem},
  props: {
    config: {default: () => ({})},
    instance: Function,
    dict: Object,
  },
}
</script>

<style lang="scss" scoped>
.componentConfig {
  .table-config {
    & > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 232px;

      :deep( .el-select ) {
        width: 80px;
      }

      .el-select {
        width: 100%;

        .el-input {
          width: 100%;

          :deep( input ) {
            width: 80px
          }
        }
      }
    }
  }
}
</style>