|
1 | 1 | <template>
|
2 |
| - <div> |
3 |
| - <tyh-button size="mini" type="primary">小型按钮</tyh-button> |
4 |
| - <tyh-button size="small" type="primary">中等按钮</tyh-button> |
5 |
| - <tyh-button type="primary">正常大小</tyh-button> |
6 |
| - <tyh-button size="large" type="primary">大号按钮</tyh-button> |
7 |
| - </div> |
8 |
| - <div> |
9 |
| - <tyh-alert message="这是一个普通提示" /> |
10 |
| - <tyh-alert type="primary" message="这是一个主要提示" /> |
11 |
| - <tyh-alert type="success" message="这是一个成功提示" /> |
12 |
| - <tyh-alert type="danger" message="这是一个危险提示" /> |
13 |
| - <tyh-alert type="warning" message="这是一个警告提示" /> |
14 |
| - </div> |
15 |
| - <div> |
16 |
| - <div class="fitBox"> |
17 |
| - <div class="item" v-for="fit in fits" :key="fit"> |
18 |
| - <span class="text">{{ fit }}</span> |
19 |
| - <tyh-avatar |
20 |
| - round |
21 |
| - src="https://tianyuhao.cn/v3/assets/giraffe.jpg" |
22 |
| - :fit="fit" |
23 |
| - /> |
24 |
| - </div> |
25 |
| - </div> |
26 |
| - </div> |
27 |
| - <tyh-card shadow="always"> |
28 |
| - <template v-slot:title>主标题</template> |
29 |
| - <template v-slot:subtitle>副标题</template> |
30 |
| - <p>总是显示阴影</p> |
31 |
| - </tyh-card> |
32 |
| - |
33 |
| - <tyh-card shadow="hover"> |
34 |
| - <template v-slot:title>主标题</template> |
35 |
| - <template v-slot:subtitle>副标题</template> |
36 |
| - <p>鼠标移入显示</p> |
37 |
| - </tyh-card> |
38 |
| - |
39 |
| - <tyh-card shadow="noShadow"> |
40 |
| - <template v-slot:title>主标题</template> |
41 |
| - <template v-slot:subtitle>副标题</template> |
42 |
| - <p>从不显示</p> |
43 |
| - </tyh-card> |
44 |
| - |
45 |
| - <div> |
46 |
| - <tyh-radio v-model="radio3" label="备选项1" border>备选项1</tyh-radio> |
47 |
| - <tyh-radio v-model="radio3" label="备选项2" border>备选项2</tyh-radio> |
48 |
| - <tyh-radio v-model="radio3" label="备选项3" border>备选项3</tyh-radio> |
49 |
| - </div> |
50 |
| - <!-- <tyh-tagging type="">你在干什么</tyh-tagging> |
51 |
| - <tyh-tagging type="primary">你在干什么</tyh-tagging> |
52 |
| - <tyh-tagging type="success">你在干什么</tyh-tagging> |
53 |
| - <tyh-tagging type="danger">你在干什么</tyh-tagging> |
54 |
| - <tyh-tagging type="warning">你在干什么</tyh-tagging> --> |
55 |
| - <tyh-radio v-model="radio4" label="备选项1" border size="large" |
56 |
| - >备选项1</tyh-radio |
57 |
| - > |
58 |
| - <tyh-radio v-model="radio4" label="备选项2" border size="large" |
59 |
| - >备选项2</tyh-radio |
60 |
| - > |
61 |
| - <tyh-radio v-model="radio4" label="备选项3" border size="large" |
62 |
| - >备选项3</tyh-radio |
63 |
| - > |
64 |
| - |
65 |
| - <tyh-radio v-model="radio4" label="备选项1" border size="medium" |
66 |
| - >备选项1</tyh-radio |
67 |
| - > |
68 |
| - <tyh-radio v-model="radio4" label="备选项2" border size="medium" |
69 |
| - >备选项2</tyh-radio |
70 |
| - > |
71 |
| - <tyh-radio v-model="radio4" label="备选项3" border size="medium" |
72 |
| - >备选项3</tyh-radio |
73 |
| - > |
74 |
| - |
75 |
| - <tyh-radio v-model="radio4" label="备选项1" border size="small" |
76 |
| - >备选项1</tyh-radio |
77 |
| - > |
78 |
| - <tyh-radio v-model="radio4" label="备选项2" border size="small" |
79 |
| - >备选项2</tyh-radio |
80 |
| - > |
81 |
| - <tyh-radio v-model="radio4" label="备选项3" border size="small" |
82 |
| - >备选项3</tyh-radio |
83 |
| - > |
84 |
| - |
85 |
| - <tyh-radio v-model="radio4" label="备选项1" border size="mini" |
86 |
| - >备选项1</tyh-radio |
87 |
| - > |
88 |
| - <tyh-radio v-model="radio4" label="备选项2" border size="mini" |
89 |
| - >备选项2</tyh-radio |
90 |
| - > |
91 |
| - <tyh-radio v-model="radio4" label="备选项3" border size="mini" |
92 |
| - >备选项3</tyh-radio |
93 |
| - > |
| 2 | + <tyh-tagging>标注1</tyh-tagging> |
| 3 | + <tyh-tagging type="primary">标注2</tyh-tagging> |
| 4 | + <tyh-tagging type="success">标注3</tyh-tagging> |
| 5 | + <tyh-tagging type="danger">标注4</tyh-tagging> |
| 6 | + <tyh-tagging type="warning">标注5</tyh-tagging> |
94 | 7 | </template>
|
95 | 8 |
|
96 | 9 | <script setup>
|
97 | 10 | import { ref } from 'vue'
|
98 |
| -const radio3 = ref('备选项3') |
99 |
| -const radio4 = ref('备选项3') |
100 |
| -// import { ref, nextTick, reactive, provide } from 'vue' |
101 | 11 | const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
|
102 | 12 | const fun = (x) => x + 1
|
103 | 13 | fun(2)
|
|
0 commit comments