Mango UI

Button 按钮 pass 0.0.13+

基础用法

基础样式、大小，我相信你懂的

展开查看
<mg-button>button</mg-button>
<mg-button :type="'primary'">primary</mg-button>
<mg-button :type="'danger'">danger</mg-button>
<mg-button :type="'link'">link</mg-button>


<mg-button :type="'primary'">button</mg-button>
<mg-button :size="'medium'" :type="'primary'">medium</mg-button>
<mg-button :size="'small'" :type="'primary'">small</mg-button>
<mg-button :size="'mini'" :type="'primary'">mini</mg-button>
1
2
3
4
5
6
7
8
9
10

禁用状态

你也懂的...

展开查看
<mg-button disabled>button</mg-button>
<mg-button disabled :size="'medium'" :type="'primary'">primary</mg-button>
<mg-button disabled :size="'small'" :type="'danger'">danger</mg-button>
<mg-button disabled :size="'mini'" :type="'danger'">danger</mg-button>
<mg-button disabled :size="'mini'" :type="'link'">link</mg-button>
1
2
3
4
5

加载状态

...你懂得

展开查看
<template>
  <mg-button :loading="true">button</mg-button>
  <mg-button :loading="true" :size="'medium'" :type="'primary'">primary</mg-button>
  <mg-button :loading="true" :size="'small'" :type="'danger'">danger</mg-button>
  <mg-button :loading="true" :size="'mini'" :type="'danger'">danger</mg-button>
  <mg-button :loading="loading" @click="loadTrigger" :size="'mini'" :type="'primary'">load 2s</mg-button>
  <mg-button :loading="true" :size="'mini'" :type="'link'">link</mg-button>
</template>
<script>
  const App = {
    setup(){
      const loading = ref(false)
      loadTrigger = ()=>{
        loading.value = true
        setTimeout(()=>{
          loading.value = false
        },2000)
      }
      return {
        loading,
        loadTrigger
      }
    }
  }
</script>
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

Button Attributes

参数说明类型可选值默认值
type样式类型stringprimary/danger/link-
size按钮大小stringmedium/small/mini-
disabled禁用boolean—-
loading加载状态boolean—false