本文整理汇总了TypeScript中@storybook/addon-actions.action函数的典型用法代码示例。如果您正苦于以下问题：TypeScript action函数的具体用法？TypeScript action怎么用？TypeScript action使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了action函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: data
story.add('Default', () => ({
components: { VueAutocomplete },
data(): any {
return {
autocompleteOptions: [],
};
},
methods: {
onRequest(query: string) {
action('@request');
const returnOptions: boolean = Math.random() > 0.5 || query.indexOf('foo') > -1;
if (returnOptions) {
this.autocompleteOptions = AutocompleteOptionsFixture;
} else {
this.autocompleteOptions = [];
}
},
request: action('@request'),
change: action('@change'),
},
template: `<vue-autocomplete
:options="autocompleteOptions"
:max-options="3"
placeholder="Type something (e.g. foo)"
@request="onRequest($event);request($event)"
@change="change"/>`,
i18n,
}));示例2: action
story.add(item.label, () => ({
components: { VueButton },
template: `<vue-button @click="action" ${item.props ? item.props.join(' ') : ''}>${item.label}</vue-button>`,
methods: {
action: action('@onClick'),
},
}));示例3: withNotes
withNotes(description)(() => ({
component: CustomCvaComponent,
props: {
ngModel: 'Type anything',
ngModelChange: action('ngModelChnange'),
},
}))示例4: action
.add('Action only', () => ({
component: Button,
props: {
text: 'Action only',
onClick: action('log 1'),
},
}))示例5: action
story.add('Default', () => ({
components: { VueSlider },
template: `<vue-slider :min="0" :max="200" :values="[0]" @change="action" />`,
methods: {
action: action('@change'),
},
}));示例6: withNotes
withNotes({ text: 'My notes on a button with emojis' })(() => ({
component: Button,
props: {
text: 'đ đ đ đŻ',
onClick: action('This was clicked OMG'),
},
}))示例7: action
() => ({
component: CustomCvaComponent,
props: {
ngModel: 'Type anything',
ngModelChange: action('ngModelChnange'),
},
}),示例8: action
() => ({
component: Button,
props: {
text: 'đ đ đ đŻ',
onClick: action('This was clicked OMG'),
},
}),示例9: action
story.add('Default', () => ({
components: { VueDateRangePicker },
template: `<vue-date-range-picker @change="action" :first-day-of-week="1" placeholder-start="Select a start date" placeholder-end="Select a end date" />`,
i18n,
methods: {
action: action('@change'),
},
}));示例10: data
story.add('Default', () => ({
components: { VuePagination },
data() {
return {
page: 1,
};
},
template: `<vue-pagination :pages="10 " :current="page" @change="action($event);page=$event" />`,
methods: {
action: action('@change'),
},
}));