vben
2021-01-18 6392b7f04839edf801f63a48cfe03461dbd160de
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<template>
  <PageWrapper
    contentFullHeight
    title="基础组件"
    content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示(二次封装组件除外)"
  >
    <template #rightFooter>
      <a-button type="primary">确认</a-button>
    </template>
 
    <div class="my-2">
      <h3>success</h3>
      <a-button color="success">成功</a-button>
      <a-button color="success" class="ml-2" disabled> 禁用 </a-button>
      <a-button color="success" class="ml-2" loading> loading </a-button>
      <a-button color="success" type="link" class="ml-2"> link </a-button>
      <a-button color="success" type="link" class="ml-2" loading> loading link </a-button>
      <a-button color="success" type="link" class="ml-2" disabled> disabled link </a-button>
    </div>
 
    <div class="my-2">
      <h3>warning</h3>
      <a-button color="warning">警告</a-button>
      <a-button color="warning" class="ml-2" disabled> 禁用 </a-button>
      <a-button color="warning" class="ml-2" loading> loading </a-button>
      <a-button color="warning" type="link" class="ml-2"> link </a-button>
      <a-button color="warning" type="link" class="ml-2" loading> loading link </a-button>
      <a-button color="warning" type="link" class="ml-2" disabled> disabled link </a-button>
    </div>
 
    <div class="my-2">
      <h3>error</h3>
      <a-button color="error">错误</a-button>
      <a-button color="error" class="ml-2" disabled> 禁用 </a-button>
      <a-button color="error" class="ml-2" loading> loading </a-button>
      <a-button color="error" type="link" class="ml-2"> link </a-button>
      <a-button color="error" type="link" class="ml-2" loading> loading link </a-button>
      <a-button color="error" type="link" class="ml-2" disabled> disabled link </a-button>
    </div>
 
    <div class="my-2">
      <h3>ghost</h3>
      <a-button ghost>幽灵</a-button>
      <a-button ghost class="ml-2" disabled> 禁用 </a-button>
      <a-button ghost class="ml-2" loading> loading </a-button>
      <a-button ghost type="link" class="ml-2"> link </a-button>
      <a-button ghost type="link" class="ml-2" loading> loading link </a-button>
      <a-button ghost type="link" class="ml-2" disabled> disabled link </a-button>
    </div>
 
    <div class="my-2">
      <h3>primary</h3>
      <a-button type="primary" preIcon="mdi:page-next-outline">主按钮</a-button>
      <a-button type="primary" class="ml-2" disabled> 禁用 </a-button>
      <a-button type="primary" class="ml-2" loading> loading </a-button>
      <a-button type="link" class="ml-2"> link </a-button>
      <a-button type="link" class="ml-2" loading> loading link </a-button>
      <a-button type="link" class="ml-2" disabled> disabled link </a-button>
    </div>
 
    <div class="my-2">
      <h3>default</h3>
      <a-button type="default">默认</a-button>
      <a-button type="default" class="ml-2" disabled> 禁用 </a-button>
      <a-button type="default" class="ml-2" loading> loading </a-button>
      <a-button type="link" class="ml-2"> link </a-button>
      <a-button type="link" class="ml-2" loading> loading link </a-button>
      <a-button type="link" class="ml-2" disabled> disabled link </a-button>
    </div>
 
    <div class="my-2">
      <h3>dashed</h3>
      <a-button type="dashed">dashed</a-button>
      <a-button type="dashed" class="ml-2" disabled> 禁用 </a-button>
      <a-button type="dashed" class="ml-2" loading> loading </a-button>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  export default defineComponent({
    components: { PageWrapper },
  });
</script>