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 } }}
	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',
      },
    }
  }
};
...

转载本站文章《storybook组件属性详解：组件props到strorybook Args》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/8895.html