mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 04:37:47 +08:00
dec5d665a3
* feat: change to import scss Change the import css to import scss to facilitate style modification * fix: fixed: storybook support scss file fixed: storybook support scss file * chore: remove redundant code in webpack.config.js Remove redundant code in webpack.config.js
42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
import { addDecorator } from '@storybook/html'
|
|
import { createApp } from 'vue'
|
|
// import '../src/style/element-ui@2.13.2.css'
|
|
import '../packages/theme-chalk/src/index.scss'
|
|
import install from '../packages/element-plus'
|
|
import './demo.css'
|
|
|
|
/**
|
|
* Wraps a story into a Vue Element
|
|
* @param {JSX.Element} template - Story templates
|
|
* @param {VueElement}
|
|
*/
|
|
const Wrapper = (template) => {
|
|
return {
|
|
data() {
|
|
return {}
|
|
},
|
|
template,
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Custom Addon for previewing ElementPlus component in Vue3
|
|
* Due to lacking of support for Vue3, the rendering method has to be made by ourself
|
|
* This method takes a template string as parameter returns a HTMLElement which will be inserted to the iframe root node by `@StoryBook`
|
|
* @param {Story} content
|
|
* @return {HTMLElement}
|
|
*/
|
|
function CustomDecorator(content, context) {
|
|
const templateOrComponent = content()
|
|
const app = typeof templateOrComponent === 'string'
|
|
? createApp(Wrapper(templateOrComponent))
|
|
: createApp(templateOrComponent)
|
|
install(app)
|
|
const entry = document.createElement('div')
|
|
entry.className = 'element-plus-previewer'
|
|
app.mount(entry)
|
|
return entry
|
|
}
|
|
|
|
addDecorator(CustomDecorator);
|