Skip to content

按钮组件 jb-btn

头像

头像

jb-btn组件是在NaiveUIButton组件基础上扩展的一个组件,所以NaiveUI中支持的属性在jb-btn中都可以使用。 jb-btn做了以下扩展:

  • 支持配置url请求地址,点击后自动发起请求。
  • 支持tooltip提示
  • 支持confirm确认
  • 支持点击后打开Dialog弹出框
  • 支持点击后打开Drawer抽屉
  • 支持点击后打开新页面
  • 支持通过url下载文件

Props

名称类型默认值说明
urlstringundefined按钮被点击后,会向该url发起请求
@success(resData)=>void请求成功后的回调,只有在url有效时才生效,resData是响应数据
@error(resData)=>void请求失败后的回调,只有在url有效时才生效,resData是响应数据
confirmTextstringundefined如果属性值有效,按钮被点击后,将首先弹出确认提示框,确认之后再执行之后的逻辑,确认提示框的内容就是该属性值
@confirm()=>void确认提示框点击确认按钮的回调
@cancel()=>void确认提示框点击取消按钮的回调
tipTextstringundefined按钮上方的提示文字,鼠标移动到按钮上时显示。
iconstringundefined按钮上显示的图标名,只支持Iconify图标
isLinkBtnbooleanfalse是否是超链接按钮,点击后打开url对应的新网页
下载相关
downloadstring| trueundefined是否是一个下载按钮,如果传入字符串,则会用该字符串作为文件名下载,如果传入true,则会通过响应头中的attachement名称作为文件名
downloadFormobjectundefined下载请求附带的参数
Dialog弹窗相关
modalComponentComponentPublicInstanceundefined点击后要通过Dialog弹窗显示的组件,比如传入一个编辑页面组件
modalComponentPropsobjectundefined传递给modalComponent的参数,会通过props的方式传递给modalComponent组件
modalWidthstring'800px'Dialog弹窗的宽度,只有在modalComponent有效时才生效
modalTitlestringundefinedDialog弹窗的标题,只有在modalComponent有效时才生效
modalArgsobjectundefinedDialog弹框的参数,参考这里
@modalYesClick({close,
componentRef,
componentProps} )=>void
点击弹窗确认按钮后的回调。回调函数可以获得以下参数:
close: 关闭窗口函数
componentRef:modalComponent的ref引用
componentProps:同 modalComponentProps
@modalNoClick({close,
componentRef,
componentProps} )=>void
点击弹窗取消按钮后的回调。回调函数的参数同@modalYesClick
抽屉相关
drawerComponentComponentPublicInstanceundefined点击后要通过Drawer抽屉显示的组件,比如传入一个详情页面组件
drawerComponentPropsobjectundefined传递给drawerComponent的参数,会通过props的方式传递给drawerComponent组件
drawerTitlestringundefinedDrawer抽屉的标题,只有在drawerComponent有效时才生效
drawerArgsobjectundefinedDrawer抽屉的参数,参考这里
drawerPositiveTextstring确认Drawer抽屉的确认按钮文字,只有在drawerComponent有效时才生效,为空则不显示该按钮
drawerPositiveTypestringprimary抽屉的确认按钮样式,参考n-button的type
drawerNegativeTextstring关闭Drawer抽屉的取消按钮文字,只有在drawerComponent有效时才生效,为空则不显示该按钮
drawerNegativeTypestringdefault抽屉的取消按钮样式,参考n-button的type
@drawerYesClick({close,
componentRef,
componentProps} )=>void
点击抽屉的确认按钮触发的回调
@drawerNoClick({close,
componentRef,
componentProps} )=>void
点击抽屉的取消按钮触发的回调

示例

最简单的用法,带一个icon

vue
<jb-btn :icon="Icons.SEARCH"> 查询</jb-btn>
<jb-btn :icon="Icons.SEARCH"> 查询</jb-btn>

带tooltip,点击后触发jb-crud-pageshowEditModal方法,打开编辑页

vue
<jb-btn :icon="Icons.ADD" type="primary"
    tip-text="新增系统参数类型"
    @click="typePage?.showEditModal('新增系统参数类型')"
></jb-btn>
<jb-btn :icon="Icons.ADD" type="primary"
    tip-text="新增系统参数类型"
    @click="typePage?.showEditModal('新增系统参数类型')"
></jb-btn>

带确认提示框,确认后发起请求,请求成功后触发jb-crud-pageloadData函数

vue
<jb-btn :icon="Icons.REFRESH" type="primary" ghost
    confirm-text="确认刷新缓存?"
    url="/api/admin/globalConfig/clearCache"
    @success="itemPage?.loadData()"
>刷新缓存</jb-btn>
<jb-btn :icon="Icons.REFRESH" type="primary" ghost
    confirm-text="确认刷新缓存?"
    url="/api/admin/globalConfig/clearCache"
    @success="itemPage?.loadData()"
>刷新缓存</jb-btn>

点击后打开Dialog弹窗,向弹窗内组件传入Props参数,点击确认按钮后触发回调

vue
<template>
    <jb-btn icon="solar:lock-password-bold" secondary circle type="warning"
        tip-text="重置密码"
        :modal-component="ResetPwd"
        modal-title="重置密码"
        modal-width="600px"
        :modal-component-props="{ userId: row.id }"
        @modal-yes-click="doResetPwd"
    >
    </jb-btn>
</template>
<script setup lang="ts">
    import ResetPwd from './components/reset-pwd/index.vue'

    function doResetPwd({ close, componentRef }: DynamicComponentEmitArgs) {
        //触发弹窗内组件暴露的submit函数,成功之后,关闭弹窗
        componentRef.submit().then(() => {
            close()
        })
    }
</script>
<template>
    <jb-btn icon="solar:lock-password-bold" secondary circle type="warning"
        tip-text="重置密码"
        :modal-component="ResetPwd"
        modal-title="重置密码"
        modal-width="600px"
        :modal-component-props="{ userId: row.id }"
        @modal-yes-click="doResetPwd"
    >
    </jb-btn>
</template>
<script setup lang="ts">
    import ResetPwd from './components/reset-pwd/index.vue'

    function doResetPwd({ close, componentRef }: DynamicComponentEmitArgs) {
        //触发弹窗内组件暴露的submit函数,成功之后,关闭弹窗
        componentRef.submit().then(() => {
            close()
        })
    }
</script>

点击后打开一个抽屉,向抽屉内组件传入参数,隐藏确认按钮,将弹窗宽度设为1400px

vue
<jb-btn :icon="Icons.USERS" circle secondary
    :tip-text="`${row.name}-用户列表`"
    :drawer-component="RoleUser"
    :drawer-title="`${row.name}-用户列表`"
    drawer-positive-text=""
    :drawer-component-props="{ roleId: row.id }"
    :drawer-args="{defaultWidth: 1400}"
>
</jb-btn>
<jb-btn :icon="Icons.USERS" circle secondary
    :tip-text="`${row.name}-用户列表`"
    :drawer-component="RoleUser"
    :drawer-title="`${row.name}-用户列表`"
    drawer-positive-text=""
    :drawer-component-props="{ roleId: row.id }"
    :drawer-args="{defaultWidth: 1400}"
>
</jb-btn>

点击后,根据url打开一个新网页

vue
<jb-btn tip-text="如何获取账户AK" quaternary circle
        icon="mingcute:question-fill"
        url="https://portal.qiniu.com/user/key"
        is-link-btn
    ></jb-btn>
<jb-btn tip-text="如何获取账户AK" quaternary circle
        icon="mingcute:question-fill"
        url="https://portal.qiniu.com/user/key"
        is-link-btn
    ></jb-btn>