diantou/src_custom/_form-designer/component-library/xm-title-bar.vue

<template>
  <div>
    <a-form-model-item label="标题名称">
      <a-input v-model="component.attrFD.formItemProps.inputProps.barTitle"></a-input>
    </a-form-model-item>
    <a-form-model-item label="标题栏颜色">
      <a-input disabled :value="component.attrFD.formItemProps.inputProps.barColor.hex" />
      <sd-color v-model="component.attrFD.formItemProps.inputProps.barColor" />
    </a-form-model-item>
  </div>
</template>

<script>
import components from './_import-components/xm-title-bar-import'
export const metaInfo = {
  caption: '标题栏',
  component: {
    render() {
      return <span>标题栏</span>
    },
  },
  icon: 'sd-square',
  // 不需要的配置属性
  hiddenProps: [
    'readonly',
    'required',
    'name',
    'caption',
    'description',
    'displayExpr',
    'mobileVisible',
  ],
}
export const fieldProps = {
  dataType: 'string',
  attrFD: {
    hideLabel: true,
    // 前端控件  不需要保存到数据库
    transient: true,
    formItemProps: { inputProps: { barTitle: '标题栏', barColor: { hex: '#fff' } } },
  },
}
export default {
  name: 'XmTitleBar',
  metaInfo: {
    title: 'XmTitleBar',
  },
  components,
  data() {
    return {}
  },
  methods: {},
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>