按钮组件 jb-btn

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

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

Props

名称	类型	默认值	说明
url	string	`undefined`	按钮被点击后，会向该url发起请求
@success	(resData)=>void		请求成功后的回调，只有在`url`有效时才生效，resData是响应数据
@error	(resData)=>void		请求失败后的回调，只有在`url`有效时才生效，resData是响应数据
confirmText	string	`undefined`	如果属性值有效，按钮被点击后，将首先弹出确认提示框，确认之后再执行之后的逻辑，确认提示框的内容就是该属性值
@confirm	()=>void		确认提示框点击确认按钮的回调
@cancel	()=>void		确认提示框点击取消按钮的回调
tipText	string	`undefined`	按钮上方的提示文字，鼠标移动到按钮上时显示。
icon	string	`undefined`	按钮上显示的图标名，只支持`Iconify`图标
isLinkBtn	boolean	`false`	是否是超链接按钮，点击后打开`url`对应的新网页
下载相关
download	string\| true	`undefined`	是否是一个下载按钮,如果传入字符串，则会用该字符串作为文件名下载，如果传入true，则会通过响应头中的attachement名称作为文件名
downloadForm	object	`undefined`	下载请求附带的参数
Dialog弹窗相关
modalComponent	ComponentPublicInstance	`undefined`	点击后要通过Dialog弹窗显示的组件，比如传入一个编辑页面组件
modalComponentProps	object	`undefined`	传递给`modalComponent`的参数，会通过`props`的方式传递给`modalComponent`组件
modalWidth	string	'800px'	Dialog弹窗的宽度，只有在`modalComponent`有效时才生效
modalTitle	string	`undefined`	Dialog弹窗的标题，只有在`modalComponent`有效时才生效
modalArgs	object	`undefined`	Dialog弹框的参数，参考这里
@modalYesClick	({close, componentRef, componentProps} )=>void		点击弹窗确认按钮后的回调。回调函数可以获得以下参数： `close`: 关闭窗口函数 `componentRef`:`modalComponent`的ref引用 `componentProps`:同 modalComponentProps
@modalNoClick	({close, componentRef, componentProps} )=>void		点击弹窗取消按钮后的回调。回调函数的参数同`@modalYesClick`
抽屉相关
drawerComponent	ComponentPublicInstance	`undefined`	点击后要通过Drawer抽屉显示的组件，比如传入一个详情页面组件
drawerComponentProps	object	`undefined`	传递给`drawerComponent`的参数，会通过`props`的方式传递给`drawerComponent`组件
drawerTitle	string	`undefined`	Drawer抽屉的标题，只有在`drawerComponent`有效时才生效
drawerArgs	object	`undefined`	Drawer抽屉的参数，参考这里
drawerPositiveText	string	`确认`	Drawer抽屉的确认按钮文字，只有在`drawerComponent`有效时才生效，为空则不显示该按钮
drawerPositiveType	string	`primary`	抽屉的确认按钮样式，参考n-button的type
drawerNegativeText	string	`关闭`	Drawer抽屉的取消按钮文字，只有在`drawerComponent`有效时才生效，为空则不显示该按钮
drawerNegativeType	string	`default`	抽屉的取消按钮样式，参考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-page的showEditModal方法，打开编辑页

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-page的loadData函数

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>

按钮组件 jb-btn ​

Props ​

示例 ​

按钮组件 jb-btn

Props

示例