mirror of
https://github.com/youzan/vant.git
synced 2025-10-20 10:44:59 +00:00
fix(create-vant-cli-app): incorrect compiler-sfc name
This commit is contained in:
@@ -0,0 +1,43 @@
|
||||
# DemoButton 按钮
|
||||
|
||||
### 介绍
|
||||
|
||||
DemoButton 是一个示例按钮组件
|
||||
|
||||
### 引入
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { DemoButton } from '<%= name %>';
|
||||
|
||||
Vue.use(DemoButton);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<demo-button type="primary" />
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------- | -------- | -------- | --------- |
|
||||
| type | 按钮类型 | _string_ | `primary` |
|
||||
| color `1.0.0` | 按钮颜色 | _string_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ---------- | ------------ |
|
||||
| click | 点击时触发 | event: Event |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------- | -------- |
|
||||
| default | 默认插槽 |
|
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block title="基础用法">
|
||||
<demo-button type="primary" style="margin-left: 15px">按钮</demo-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义颜色">
|
||||
<demo-button color="#03a9f4" style="margin-left: 15px">按钮</demo-button>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<button class="demo-button">
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'demo-button',
|
||||
|
||||
props: {
|
||||
color: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="<%= cssLang %>">
|
||||
.demo-button {
|
||||
min-width: 120px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
background-color: #f44;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
}
|
||||
</style>
|
@@ -0,0 +1,3 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`render demo button 1`] = `<button class="demo-button"></button>`;
|
@@ -0,0 +1,7 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import DemoButton from '../../demo-button';
|
||||
|
||||
test('render demo button', () => {
|
||||
const wrapper = mount(DemoButton);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
Reference in New Issue
Block a user