Blame view

src/views/demo/comp/button/index.vue 3.62 KB
陈文彬 authored
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
<template>
  <div class="p-4">
    <Alert
      message="温馨提醒"
      description="基础组件依赖于 ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示(二次封装组件除外)"
      type="info"
      show-icon
    />

    <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>
52
      <a-button type="primary" preIcon="mdi:page-next-outline">主按钮</a-button>
陈文彬 authored
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
86
87
      <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>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Alert } from 'ant-design-vue';
  export default defineComponent({
    components: { Alert },
    setup() {
      return {};
    },
  });
</script>