sstt-archives-web/src/views/system/components/formSlotRender.vue

<script>
import { domMap } from "@/const/inputType";
import { templatePropsMap } from "@/const/templateProps";
export default {
  props: {
    config: Object,
    index: Number,
  },
  data() {
    return {
    };
  },
  methods: {
    optionsRender(h) {
      if(this.config.edit_input === "checkbox" || this.config.edit_input === "radio") {
        return ['选项1','选项2','选项3'].map(i => h('el-option',{ props: { value: i,label: i } }))
      }
      if(this.config.edit_input === "file" || this.config.edit_input === "files") {
        return [
          h('el-button',{
            slot: 'trigger',
            props: {
              size: 'small',
              type: 'primary'
            }
          }, '选取文件'),
          h('el-button',{
            style: {
              'margin-left': '10px'
            },
            props: {
              size: 'small',
              type: 'success'
            }
          }, '上传到服务器'),
          h('div',{
            class: 'el-upload__tip',
            slot: 'tip'
          },'文件不超过500kb')
        ]
      }
    },
  },
  computed: {},
  render(h) {
    return h(
      "div",
      {
        class: this.config.list_show ? "" : "no-list-show",
        style: {
          opacity: this.config.list_show ? 1 : 0.5,
          filter:
            this.index === this.$store.state.form.selectedIndex
              ? "drop-shadow(0 0 2px #0077CCFF) drop-shadow(0 0 8px #449FD9FF)"
              : "",
          position: "relative",
        },
      },
      [
        h(domMap.get(this.config.edit_input), {
          style: {
            width: "100%",
          },
          props: templatePropsMap.get(this.config.edit_input),
        },this.optionsRender(h)),
      ]
    );
  },
};
</script>

<style scoped lang="scss">
.no-list-show {
  &::after {
    content: "隐藏";
    color: red;
    font-size: 12px;

    position: absolute;
    right: 10px;
    top: 0;
  }
}
</style>