首先我们查看官方文档: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 | | Provides a toggle for switching between possible states. |
number | | Provides a numeric input to include the range of all possible values. |
| Provides a range slider component to include all possible values. | |
object | | Provides a JSON-based editor component to handle the object's values. Also allows edition in raw mode. |
array | | Provides a JSON-based editor component to handle the values of the array. Also allows edition in raw mode. |
| Provides a file input component that returns an array of URLs. Can be further customized to accept specific file types. | |
enum | | Provides a set of radio buttons based on the available options. |
| Provides a set of inlined radio buttons based on the available options. | |
| Provides a set of checkbox components for selecting multiple options. | |
| Provides a set of inlined checkbox components for selecting multiple options. | |
| Provides a drop-down list component to handle single value selection. | |
| Provides a drop-down list that allows multiple selected values. | |
string | | Provides a freeform text input. |
| Provides a color picker component to handle color values. Can be additionally configured to include a set of color presets. | |
| Provides a datepicker component to handle date selection. |
但这些都是简单类型,如果是复杂类型,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 |
| The name of the property. |
| Sets a type for the property. |
| Sets the property as optional or required. |
| Sets a Markdown description for the property. |
category | 分类 |
| Provide a short version of the type. |
| Provides an extended version of the type. |
| Provide a short version of the default value. |
| Provides a longer version of the default value. |
| Associates a control for the property. |
具体查看 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