TypeScript addon-actions.action函数代码示例

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了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,
}));

开发者ID:trungx，项目名称:vue-starter，代码行数:31，代码来源:VueAutocomplete.stories.ts

示例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'),
   },
 }));

开发者ID:trungx，项目名称:vue-starter，代码行数:7，代码来源:VueButton.stories.ts

示例3: withNotes

 withNotes(description)(() => ({
   component: CustomCvaComponent,
   props: {
     ngModel: 'Type anything',
     ngModelChange: action('ngModelChnange'),
   },
 }))

开发者ID:lyndontavares，项目名称:storybook，代码行数:7，代码来源:custom-cva-component.stories.ts

示例4: action

 .add('Action only', () => ({
   component: Button,
   props: {
     text: 'Action only',
     onClick: action('log 1'),
   },
 }))

开发者ID:chinmaymoharir，项目名称:storybook，代码行数:7，代码来源:addon-actions.stories.ts

示例5: action

story.add('Default', () => ({
  components: { VueSlider },
  template:   `<vue-slider :min="0" :max="200" :values="[0]" @change="action" />`,
  methods:    {
    action: action('@change'),
  },
}));

开发者ID:trungx，项目名称:vue-starter，代码行数:7，代码来源:VueSlider.stories.ts

示例6: withNotes

 withNotes({ text: 'My notes on a button with emojis' })(() => ({
   component: Button,
   props: {
     text: 'đ đ đ đŻ',
     onClick: action('This was clicked OMG'),
   },
 }))

开发者ID:lyndontavares，项目名称:storybook，代码行数:7，代码来源:index.stories.ts

示例7: action

 () => ({
   component: CustomCvaComponent,
   props: {
     ngModel: 'Type anything',
     ngModelChange: action('ngModelChnange'),
   },
 }),

开发者ID:chinmaymoharir，项目名称:storybook，代码行数:7，代码来源:custom-cva-component.stories.ts

示例8: action

 () => ({
   component: Button,
   props: {
     text: 'đ đ đ đŻ',
     onClick: action('This was clicked OMG'),
   },
 }),

开发者ID:chinmaymoharir，项目名称:storybook，代码行数:7，代码来源:index.stories.ts

示例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'),
  },
}));

开发者ID:trungx，项目名称:vue-starter，代码行数:8，代码来源:VueDateRangePicker.stories.ts

示例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'),
  },
}));

开发者ID:trungx，项目名称:vue-starter，代码行数:12，代码来源:VuePagination.stories.ts

注：本文中的@storybook/addon-actions.action函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。