0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修改PermissionButton的Props透传

This commit is contained in:
wangshuaiswim 2023-02-02 11:41:55 +08:00
parent be172b1580
commit ae37dbc2bd
1 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/PermissionButton/index.vue
View File

@ -4,14 +4,14 @@
<a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled"> <a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
<a-tooltip v-if="tooltip" v-bind="tooltip"> <a-tooltip v-if="tooltip" v-bind="tooltip">
<slot v-if="noButton"></slot> <slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick"> <a-button v-else v-bind="_buttonProps" :disabled="_isPermission" @click="handleClick">
<slot></slot> <slot></slot>
<template #icon> <template #icon>
<slot name="icon"></slot> <slot name="icon"></slot>
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick"> <a-button v-else v-bind="_buttonProps" :disabled="_isPermission" @click="handleClick">
<slot></slot> <slot></slot>
<template #icon> <template #icon>
<slot name="icon"></slot> <slot name="icon"></slot>
@ -22,7 +22,7 @@
<template v-else-if="tooltip"> <template v-else-if="tooltip">
<a-tooltip v-bind="tooltip"> <a-tooltip v-bind="tooltip">
<slot v-if="noButton"></slot> <slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick"> <a-button v-else v-bind="_buttonProps" :disabled="_isPermission" @click="handleClick">
<slot></slot> <slot></slot>
<template #icon> <template #icon>
<slot name="icon"></slot> <slot name="icon"></slot>
@ -32,7 +32,7 @@
</template> </template>
<template v-else> <template v-else>
<slot v-if="noButton"></slot> <slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick"> <a-button v-else v-bind="_buttonProps" :disabled="_isPermission" @click="handleClick">
<slot></slot> <slot></slot>
<template #icon> <template #icon>
<slot name="icon"></slot> <slot name="icon"></slot>
@ -42,7 +42,7 @@
</template> </template>
<a-tooltip v-else title="没有权限"> <a-tooltip v-else title="没有权限">
<slot v-if="noButton"></slot> <slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick"> <a-button v-else v-bind="_buttonProps" :disabled="_isPermission" @click="handleClick">
<slot></slot> <slot></slot>
<template #icon> <template #icon>
<slot name="icon"></slot> <slot name="icon"></slot>
@ -51,7 +51,9 @@
</a-tooltip> </a-tooltip>
</template> </template>
<script setup lang="ts" name="PermissionButton"> <script setup lang="ts" name="PermissionButton">
import type { ButtonProps, TooltipProps, PopconfirmProps } from 'ant-design-vue' import { PropType } from 'vue'
import { TooltipProps, PopconfirmProps } from 'ant-design-vue/es'
import { buttonProps } from 'ant-design-vue/es/button/button'
import { usePermissionStore } from '@/store/permission'; import { usePermissionStore } from '@/store/permission';
interface PermissionButtonEmits { interface PermissionButtonEmits {
@ -60,16 +62,33 @@ interface PermissionButtonEmits {
const emits = defineEmits<PermissionButtonEmits>() const emits = defineEmits<PermissionButtonEmits>()
interface PermissionButtonProps extends ButtonProps { // interface PermissionButtonProps extends ButtonProps {
tooltip?: TooltipProps; // tooltip?: TooltipProps;
popConfirm?: PopconfirmProps; // popConfirm?: PopconfirmProps;
hasPermission?: string | Array<string>; // hasPermission?: string | Array<string>;
noButton?: boolean; // noButton?: boolean;
} // }
const props = withDefaults(defineProps<PermissionButtonProps>(), { // const props = withDefaults(defineProps<PermissionButtonProps>(), {
noButton: false // noButton: false,
// })
const props = defineProps({
noButton: {
type: Boolean,
default: () => false
},
tooltip: {
type: Object as PropType<TooltipProps>,
},
popConfirm: {
type: Object as PropType<PopconfirmProps>,
},
hasPermission: {
type: String || Array,
},
...buttonProps()
}) })
const { tooltip, popConfirm, hasPermission, noButton, ...buttonProps } = props;
const { tooltip, popConfirm, hasPermission, noButton, ..._buttonProps } = props;
const permissionStore = usePermissionStore() const permissionStore = usePermissionStore()
@ -82,7 +101,7 @@ const isPermission = computed(() => {
const _isPermission = computed(() => const _isPermission = computed(() =>
'hasPermission' in props && isPermission.value 'hasPermission' in props && isPermission.value
? 'disabled' in buttonProps ? 'disabled' in buttonProps
? buttonProps.disabled ? buttonProps.disabled as boolean
: false : false
: true : true
) )