按钮组件 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>