storybook组件属性详解：组件props到strorybook Args

首先我们查看官方文档：https://storybook.js.org/docs/vue/writing-docs/doc-block-argstable#customizing

官方的例子么有看到v-model如何处理，数组、对象等复杂属性定义。

这里一个是props的定义，一个是Controls

先看一下官方文档，https://storybook.js.org/docs/vue/essentials/controls

官方的类型只有这些：https://storybook.js.org/docs/vue/essentials/controls#annotation

Data Tye	Control	Description
boolean	`boolean`	Provides a toggle for switching between possible states. `argTypes: { active: { control: 'boolean' }}`
number	`number`	Provides a numeric input to include the range of all possible values. `argTypes: { even: { control: { type: 'number', min:1, max:30, step: 2 } }}`
number	`range`	Provides a range slider component to include all possible values. `argTypes: { odd: { control: { type: 'range', min: 1, max: 30, step: 3 } }}`
object	`object`	Provides a JSON-based editor component to handle the object's values. Also allows edition in raw mode. `argTypes: { user: { control: 'object' }}`
array	`object`	Provides a JSON-based editor component to handle the values of the array. Also allows edition in raw mode. `argTypes: { odd: { control: 'object' }}`
	`file`	Provides a file input component that returns an array of URLs. Can be further customized to accept specific file types. `argTypes: { avatar: { control: { type: 'file', accept: '.png' } }}`
enum	`radio`	Provides a set of radio buttons based on the available options. `argTypes: { contact: { control: 'radio', options: ['email', 'phone', 'mail'] }}`
	`inline-radio`	Provides a set of inlined radio buttons based on the available options. `argTypes: { contact: { control: 'inline-radio', options: ['email', 'phone', 'mail'] }}`
	`check`	Provides a set of checkbox components for selecting multiple options. `argTypes: { contact: { control: 'check', options: ['email', 'phone', 'mail'] }}`
	`inline-check`	Provides a set of inlined checkbox components for selecting multiple options. `argTypes: { contact: { control: 'inline-check', options: ['email', 'phone', 'mail'] }}`
	`select`	Provides a drop-down list component to handle single value selection. `argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }}`
	`multi-select`	Provides a drop-down list that allows multiple selected values. `argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }}`
string	`text`	Provides a freeform text input. `argTypes: { label: { control: 'text' }}`
	`color`	Provides a color picker component to handle color values. Can be additionally configured to include a set of color presets. `argTypes: { color: { control: { type: 'color', presetColors: ['red', 'green']} }}`
	`date`	Provides a datepicker component to handle date selection. `argTypes: { startDate: { control: 'date' }}`

但这些都是简单类型，如果是复杂类型，react 很好办，比如：https://5a375b97f4b14f0020b0cda3-pmgvlqukun.chromatic.com/?path=/story/argtypes-typescript--unions

具体写法：

https://storybook.js.org/docs/vue/api/argtypes

const argTypes = {
  label: {
    name: 'label',
    type: { name: 'string', required: false },
    defaultValue: 'Hello',
    description: 'demo description',
    table: {
      type: { summary: 'string' },
      defaultValue: { summary: 'Hello' },
    },
    control: {
      type: 'text'
    }
  }
}

table 能够更好的描述清属性

Field	Description
`name`	The name of the property. `argTypes: { label: { name: 'Something' } }`
`type.name`	Sets a type for the property. `argTypes: { label: { type: { name: 'number' } } }`
`type.required`	Sets the property as optional or required. `argTypes: { label: { type: { required: true } }`
`description`	Sets a Markdown description for the property. `argTypes: { label: { description: 'Something' } }`
category	分类
`table.type.summary`	Provide a short version of the type. `argTypes: { label: { table: { type: { summary: 'a short summary' } }}}`
`table.type.detail`	Provides an extended version of the type. `argTypes: { label: { table: { type: { detail: 'something' } }}}`
`table.defaultValue.summary`	Provide a short version of the default value. `argTypes: { label: { table: { defaultValue: { summary: 'Hello World' } }}}`
`table.defaultValue.detail`	Provides a longer version of the default value. `argTypes: { label: { table: { defaultValue: { detail: 'Something' } }}}`
`control`	Associates a control for the property. `argTypes: { label: { control: { type: 'text'} } }` Read the Essentials documentation to learn more about controls.

具体查看 https://storybook.js.org/docs/vue/writing-docs/doc-block-argstable

给一个案例

// SubmitForm.stories.ts
...
export default {
  title: "ui组件/SubmitForm",
  component: SubmitForm,
  argTypes: {
    refName: {
      description: '表单组件引用',
      type: {
        required: true,
      },
      table: {
        defaultValue: {
          summary: 'defaultNameRef',
        }
      },
      control: {
        type: 'text'
      }
    },
    schema: {
      type: {
        required: true,
      },
      table: {
        type: {
          summary: '渲染表单所需JSON结构',
          detail: 'JSON结构包含表单渲染、交互所需要的必要字段，也包含表单的校验规则',
        },
        defaultValue: {
          summary: '[]',
          detail: `[
              {
                key: "moduleName",
                name: "title",
                type: SchemaType.Text,
                label: "栏目名称",
                placeholder: "请输入栏目名称",
                attrs: {
                  //
                },
                rules: [
                  {
                    required: true,
                    message: "栏目名称必填~",
                    trigger: RuleTrigger.Blur,
                  },
                ],
              }
            ]
          `
        }
      }
    },
    runtimeChange: {
      description: '实时监听表单的更新',
      table: {
        category: 'Events',
      },
    }
  }
};
...