Blame view

src/views/demo/comp/button/index.vue 3.65 KB
陈文彬 authored
1
<template>
2
  <PageWrapper
vben authored
3
    contentFullHeight
4
5
6
7
8
9
    title="基础组件"
    content=" 基础组件依赖于ant-design-vue,组件库已有的基础组件,项目中不会再次进行demo展示(二次封装组件除外)"
  >
    <template #rightFooter>
      <a-button type="primary">确认</a-button>
    </template>
陈文彬 authored
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

    <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>
53
      <a-button type="primary" preIcon="mdi:page-next-outline">主按钮</a-button>
陈文彬 authored
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
      <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>
77
  </PageWrapper>
陈文彬 authored
78
79
80
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
81
  import { PageWrapper } from '/@/components/Page';
陈文彬 authored
82
  export default defineComponent({
83
    components: { PageWrapper },
陈文彬 authored
84
85
  });
</script>