storybook组件属性详解：组件props到strorybook Args
Author：zhoulujun Date：
首先我们查看官方文档：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