基于element-ui二次封裝后的組件如何在storybook中展示

搜索了一下網(wǎng)上關(guān)于如何在storybook中引入基于element-ui二次封裝后的組件的資料幾乎沒用或者比較老舊,而且storybook初看文檔有點(diǎn)不太友好,自己硬著頭皮按照文檔測試了一遍自己之前寫的UI組件引入到storybook,在踩過一些坑后整理一下供大家參考。

一、storybook的作用

1、可以避免公司前端重復(fù)造輪子
統(tǒng)一放在storybook上,其他前端可以在這里看到其他成員是否實(shí)現(xiàn)過自己將要實(shí)現(xiàn)的組件。
2、提升組件通用性
storybook內(nèi)的組件可以與業(yè)務(wù)解耦。
3、可以自動(dòng)生成使用文檔和示例


image.png

4、輕松實(shí)現(xiàn)結(jié)構(gòu)化組件文檔
5、方便手動(dòng)在線測試

二、如何在vue2.x+element-ui中引入

1、按照storybook文檔安裝即可;我的是vue2項(xiàng)目,因此運(yùn)行即可
npx sb init
2、根據(jù)要求安裝所需要的插件。

npm i @storybook/addon-storysource --dev
.storybook/main.js addons部分添加"@storybook/addon-storysource" 如下

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-storysource" // 新增

  ]
}

3、啟動(dòng)storybook
npm run storybook
4、按照示例編寫你自己的組件xxxx.stories.js文件并放置在storybook的示例文件目錄下(src/stories)

DialogWithBtn.stories.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vue from "vue";
Vue.use(ElementUI)
import MyDialogWithBtn from './DialogWithBtn.vue';

export default {
  title: 'Example/DialogWithBtn',
  component: MyDialogWithBtn,
  argTypes: {
    visible: { control: { type: 'boolean'},description:'控制是否可見' },
    title:{ control: { type: 'text'},description:'設(shè)置對話框頂部標(biāo)題' },
    onCancelEvent:{description:'點(diǎn)擊取消后的回調(diào)事件'},
    onSureEvent:{description:'點(diǎn)擊確定后的回調(diào)事件',action: 'clicked'},
    'update:visible':{description:'同步visible數(shù)值(該參數(shù)不涉及修改,可忽略)'},
    default:{description:'底部按鈕之前的默認(rèn)插槽(該參數(shù)不涉及修改,可忽略)'},
    footer:{description:'底部按鈕footer具名插槽(該參數(shù)不涉及修改,可忽略)'},
  },
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MyDialogWithBtn },
  template: '<div><el-button @click="onShowDialog">點(diǎn)我顯示對話框</el-button> <my-dialog-with-btn @onSureEvent="onSureEvent" @onCancelEvent="onCancelEvent" :visible.sync="visible" :title="title">對話框啊</my-dialog-with-btn></div>',
  methods:{
    onShowDialog(){
      this.visible=true
      console.log('展示了')
    },
  }
});

export const dialogWithBtn = Template.bind({});
dialogWithBtn.args = {
  title: '對話框1',
};

// export const dialogWithBtn2 = Template.bind({});
// dialogWithBtn2.args = {
//   title: '對話框2',
// };


值得指出的是我這里偷了懶,直接全部引入了element-ui,你們可以也可以按需引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vue from "vue";
Vue.use(ElementUI)

DialogWithBtn.vue 我也直接放這個(gè)目錄了,你可以放置你實(shí)際的目錄位置中并正確引入即可。
DialogWithBtn.vue


<template>
    <el-dialog :visible.sync="visibleDialog" v-bind="$attrs" v-on="$listeners">
      <slot></slot>
      <template #footer>
        <slot name="footer">
          <div class="dialog-footer-ct">
            <el-button @click="cancelOp">取 消</el-button>
            <el-button @click="sureOp" type="primary">確 定</el-button>
          </div>
        </slot>
      </template>
    </el-dialog>
</template>

<script>
    export default {
      name: 'dialog-with-btn',
      props: {
        visible: {
          default: false,
          type: Boolean,
        },

      },
      computed: {
        visibleDialog: {
          get() {
            return this.visible
          },
          set(val) {
            this.$emit('update:visible', val)
          },

        },
      },
      methods: {
        cancelOp() {
          this.$emit('onCancelEvent')
          this.visibleDialog = false;
        },
        sureOp() {
          this.$emit('onSureEvent')
          this.visibleDialog = false;
        },

      },
     //  data:{
     //      return {
     //        visibleDialog
     //      }
     // }
    }
</script>

<style scoped>
  .dialog-footer-ct{
    margin: 10px auto;
    text-align: center;
  }

</style>

5、進(jìn)入http://localhost:6006/?path=/story/example-dialogwithbtn--dialog-with-btn 查看效果

image.png

6、各個(gè)面板介紹
image.png

三、注意點(diǎn)

·1、默認(rèn)觸發(fā)事件及回調(diào)事件需要以on開頭才可以在Actions上看到事件及傳參的數(shù)據(jù)(storybook/vue6.2.8沒有這個(gè)要求了)。

image.png

這個(gè)的話,大家看preview.js就知道為啥了。
image.png

2、記得在DialogWithBtn.stories.js中引入element-ui并注冊,否則將報(bào)錯(cuò)
3、示例組件的參數(shù)記得填全且屬性值記得別寫死而應(yīng)該與argTypes保持一致。
image.png

4、demo已上傳至 github https://github.com/have-not-BUG/vue-element-ui-storybook-demo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容