TypeScript addon-actions.action函數代碼示例

本文整理匯總了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；未經允許，請勿轉載。