mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 10:41:06 +08:00
543fbbacb6
Expand the Vue3 Webpack5 Storybook template with comprehensive component support: - Add Button, Header, and Page components for JavaScript and TypeScript (4.9) - Include stories, components, and CSS files - Implement Storybook best practices with autodocs and component testing
53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<template>
|
|
<button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
|
|
</template>
|
|
|
|
<script>
|
|
import './button.css';
|
|
import { reactive, computed } from 'vue';
|
|
|
|
export default {
|
|
name: 'my-button',
|
|
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
primary: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
size: {
|
|
type: String,
|
|
validator: function (value) {
|
|
return ['small', 'medium', 'large'].indexOf(value) !== -1;
|
|
},
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
},
|
|
},
|
|
|
|
emits: ['click'],
|
|
|
|
setup(props, { emit }) {
|
|
props = reactive(props);
|
|
return {
|
|
classes: computed(() => ({
|
|
'storybook-button': true,
|
|
'storybook-button--primary': props.primary,
|
|
'storybook-button--secondary': !props.primary,
|
|
[`storybook-button--${props.size || 'medium'}`]: true,
|
|
})),
|
|
style: computed(() => ({
|
|
backgroundColor: props.backgroundColor,
|
|
})),
|
|
onClick() {
|
|
emit('click');
|
|
},
|
|
};
|
|
},
|
|
};
|
|
</script>
|