Button按钮

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-btn": "/miniprogram_npm/vtuweapp/button/vtu-btn"
    3. }
    4.

    代码演示

    按钮类型

    支持defaultprimaryinfowarningdanger五种类型，默认为default

    1. <vtu-btn >普通按钮</vtu-btn>
    2. <vtu-btn type="primary">主要按钮</vtu-btn>
    3. <vtu-btn type="success">成功按钮</vtu-btn>
    4. <vtu-btn type="warning">警告按钮</vtu-btn>
    5. <vtu-btn type="danger">danger按钮</vtu-btn>
    6.

    按钮阴影

    通过shadow属性给按钮添加阴影

    1. <vtu-btn shadow>普通按钮</vtu-btn>
    2. <vtu-btn shadow type="primary">主要按钮</vtu-btn>
    3. <vtu-btn shadow type="success">成功按钮</vtu-btn>
    4. <vtu-btn shadow type="warning">警告按钮</vtu-btn>
    5. <vtu-btn shadow type="danger">danger按钮</vtu-btn>
    6.

    朴素按钮

    通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色

    1. <vtu-btn plain="true">普通按钮</vtu-btn>
    2. <vtu-btn type="primary" plain="true">主要按钮</vtu-btn>
    3. <vtu-btn type="success" plain="true">成功按钮</vtu-btn>
    4. <vtu-btn type="warning" plain="true">警告按钮</vtu-btn>
    5. <vtu-btn type="danger" plain="true">danger按钮</vtu-btn>
    6.

    按钮尺寸

    支持defaultmediumsmallmini四种尺寸，默认为default

    1. <vtu-btn size="default">默认尺寸</vtu-btn>
    2. <vtu-btn size="medium">中等按钮</vtu-btn>
    3. <vtu-btn size="small">小型按钮</vtu-btn>
    4. <vtu-btn size="mini">超小按钮</vtu-btn>
    5.

    圆角按钮

    通过round属性，将按钮设置为圆角按钮

    1. <vtu-btn plain="true" round="true">普通按钮</vtu-btn>
    2. <vtu-btn type="primary" round="true">主要按钮</vtu-btn>
    3. <vtu-btn type="success" round="true">成功按钮</vtu-btn>
    4. <vtu-btn type="warning" round="true">警告按钮</vtu-btn>
    5. <vtu-btn type="danger" round="true">danger按钮</vtu-btn>
    6.

    禁用按钮

    通过disabled属性，将按钮设置不可用

    1. <vtu-btn disabled="true">普通按钮</vtu-btn>
    2. <vtu-btn type="primary" disabled="true">主要按钮</vtu-btn>
    3. <vtu-btn type="success" disabled="true">成功按钮</vtu-btn>
    4. <vtu-btn type="warning" disabled="true">警告按钮</vtu-btn>
    5. <vtu-btn type="danger" disabled="true">danger按钮</vtu-btn>
    6.

    图标按钮

    通过icon属性，可对按钮设置图标

    1. <vtu-btn inlineBlock icon="iconfont icon-jiansuo"></vtu-btn>
    2. <vtu-btn inlineBlock type="primary" icon="iconfont icon-jiansuo">主要按钮</vtu-btn>
    3. <vtu-btn inlineBlock type="success" icon="iconfont icon-shangchuan">成功按钮</vtu-btn>
    4. <vtu-btn inlineBlock type="warning" icon="iconfont icon-bianji"></vtu-btn>
    5. <vtu-btn inlineBlock type="danger" icon="iconfont icon-picture-delet"></vtu-btn>
    6. <vtu-btn inlineBlock type="danger">删除按钮<i class="iconfont icon-picture-delet"></i></vtu-btn>
    7.

    加载按钮

    通过loading属性，设置按钮加载状态

    <vtu-btn loading></vtu-btn>
<vtu-btn loading type="primary">更新</vtu-btn>
<vtu-btn loading type="success" loading-text="加载中"></vtu-btn>

    自定义颜色

    <vtu-btn v-class="btn-class" bg-color="#6739b6" font-color="#fff">purple</vtu-btn>
<vtu-btn v-class="btn-class" bg-color="#a5673f" font-color="#fff">brown</vtu-btn>
<vtu-btn v-class="btn-class" bg-color="linear-gradient(45deg, #ec008c, #6739b6)" font-color="#fff">霞红渐变</vtu-btn>

    组件参数

    Props

    参数说明类型默认必填
    id标识符String-否
    type按钮类型，可选值为primaryinfowarningdangerStringdefault否
    size按钮尺寸，可选值为 default medium small miniStringdefault否
    icon左侧图标名称String-否
    plain是否为朴素按钮Booleanfalse否
    loading是否显示为加载状态Booleanfalse否
    inlineBlock是否为块级元素Booleanfalse否
    round是否为圆角按钮Booleanfalse否
    circle是否为圆形按钮Booleanfalse否
    disabled是否禁用按钮Booleanfalse否
    shadow是否显示阴影Booleanfalse否
    open-type微信开放能力String-否
    lang指定返回用户信息的语言，zh_CN 简体中文， zh_TW 繁体中文，en 英文String-否
    loading-text加载状态提示文字String-否
    session-from会话来源，open-type="contact"时有效String-否
    send-message-title会话内消息卡片标题，open-type="contact"时有效String当前标题否
    send-message-path会话内消息卡片点击跳转小程序路径，open-type="contact"时有效String当前分享路径否
    send-message-img会话内消息卡片图片，open-type="contact"时有效String截图否
    app-parameter打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效String-否
    show-message-card是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效Booleanfalse否
    bg-color自定义按钮背景色String-否
    font-color自定义文字颜色String-否

    Events

    方法名说明参数返回值
    bind:click点击按钮，且按钮状态不为加载或禁用时触发-绑定的参数对象
    bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息， 从返回参数的 detail 中获取到的值同 wx.getUserInfo-同 wx.getUserInfo
    bind:getphonenumber获取用户手机号回调-同 wx.getphonenumber
    bind:contact客服消息回调-同 wx.contact
    bind:error当使用开放能力时，发生错误的回调-同 wx.error
    bind:opensetting在打开授权设置页后回调-同 wx.opensetting
    bind:launchapp打开 APP 成功的回调，open-type=launchApp时有效-同 wx.launchapp

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Button 按钮 - 图1