自定义标签的样式

本文将介绍如何通过配置自定义标签的样式，包括修改标签样式和自定义标签内容。

修改样式

可以通过 title 配置项为组件设置标签的样式。title 支持内联样式和 CSS 类名的配置，以满足不同的样式需求。

field

复制成功!

<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'field',
          title: {
            style: 'color:red',
            title: 'field'
          },
          value: 'sss'
        },
      ]
    }
  }
}
</script>

自定义内容

通过 title 配置项可以自定义标签的内容。除了基本的文本标签外，还可以使用自定义组件或 HTML 标签作为标签内容，从而实现更复杂的展示效果。

复制成功!

<template>
  <div>
    <form-create :rule="rule" v-model:api="fApi" :option="options"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'field',
          title: {
            native: true,
            children: [
              {
                type: 'button',
                children: ['自定义'],
                on: {
                  click() {
                    alert('点击了按钮');
                  }
                }
              }
            ]
          },
          value: 'sss'
        },
      ]
    }
  }
}
</script>