按钮 button

演示地址

1) 集合

import button from 'vue-human/suites/button'

注：核心组件，已经包含在 core suites 内。

2) 组件目录

  • mn-btn
  • mn-link

3) mn-btn 组件

3.1 属性
参数 说明 类型 可选值 默认值
title 按钮标题 string - undefined
icon 图标，同 mn-icon 组件的 name 值 参考 mn-icon 同左 同左, undefined
theme 主题，由 css 实现 string primary、secondary、warning、error、inverse、primary-outline、secondary-outline、warning-outline、error-outline、inverse-outline、primary-link、secondary-link、warning-link、error-link 或 inverse-link，可参考 css 属性 undefined
size 尺寸 string undefined 或 sm undefined
disabled 失效状态 boolean - false
active 激活状态 boolean - false
block 是否为 100% 宽度的块状 boolean - false
circle 是否为圆形图标 boolean - false
margin 是否具有 margin-bottom 底部外边距 boolean - false
3.2 数据
参数 说明 类型 可选值 默认值
this.loading 加载状态 boolean - false
3.3 触发事件
事件名称 说明 参数
click 按钮点击有效后触发，如果安装处理 loading 状态不会触发，按钮处于 disabled 状态的话也不会触发，但会触发 error 事件。 event 和 this
error 同上 同上

注：click 事件与 loading 数据的使用案例

<template>
  <mn-btn @click="onOpen"></mn-btn>
</template>

<script>
  export default {
    methods: {
      onOpen (event, button) {
        button.loading = true
        setTimeout(() => {
          // Do something.
          button.loading = false
        }, 3000)
      }
    }
  }
</script>

click 是否返回两个参数，分别为 event 对象和 button 对象，button 对象为按钮自身，修改 button.loading 可以将按钮设定为加载状态。在加载状态下，按钮属于禁用状态和样式，避免重复触发 click 事件。

mn-link 扩展自 mn-btn，与 mn-btn 用法保持一致。

4.1 属性

相较于 mn-btn 新增的属性，其余属性同 mn-btn。

参数 说明 类型 可选值 默认值
to @todo 需要修改，暂时不建议使用：与 router-link 的 to 属性一样的用法传递。 string - undefined
href 字符串，外部链接。如果 to 属性和 this.$router 存在，则会忽略 href 属性。 string - undefined

5) 样式

5.1 变量
名称 说明 类型 可选值 默认值
$mn-button-theme 自定义主题的集合 map - ()
$mn-button-mobile-radius mobile 尺寸下的按钮圆角的尺寸 string - $mobile-radius，为 0.75rem
$mn-button-desktop-radius desktop 尺寸下的按钮圆角的尺寸 string - $desktop-radius，为 0.25rem

results matching ""

    No results matching ""