joc-button和joc-link 启用确认操作usePopConfirm后,v-permission指令冲突
页面中joc-button组件,启用了pop-confirm,此时,如果设置权限指令v-permission,打开页面控制台就会出现一个警告
<joc-button v-permission="4" type="danger" iconfont="icon-delete" usePopConfirm @click="handleButtonDeleteClick"
:popConfirmOptions="{ title: '确认删除?', confirmText: '删除', confirmButtonType: 'danger' }" >删除</joc-button>
[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended.
at <ElPopper ref_key="popperRef" ref=Ref< undefined > role="tooltip" ... >
at <ElTooltip ref_key="tooltipRef" ref=Ref< undefined > trigger="click" ... >
at <ElPopconfirm key=0 title="确认删除?" confirm-button-text="确定" ... >
at <JocButton type="danger" iconfont="icon-delete" usePopConfirm="" ... >
at <ElFormItem>
at <ElForm inline=true show-message=false inline-message=true >
at <ElRow class="joc-page-tools" >
at <JocPageTools>
at <JocPage class="joc-page-box joc-layout-flex p-2" >
at <Organization class="joc-page-box joc-layout-flex p-2" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <KeepAlive include= (2) ['Home', 'organization'] >
at <RouterView class="joc-page-box joc-layout-flex p-2" >
at <ElMain class="p-0 joc-page-main" >
at <ElContainer class="overflow-hidden" >
at <ElContainer class="joc-home overflow-hidden root-1" >
at <Readyuser class="root-1" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > >
at <RouterView class="root-1" >
at <App>
解决方案:
因为操作确认模式,最外层元素是el-popconfirm,而el-popconfirm加载后是不显示的,因此和权限判断冲突了,
如果joc-button和joc-link设置了usepopconfirm属性,那么就不要用v-permission指令,而是用组件自带的属性 :permission,这样就不会冲突
修改后的代码:
<joc-button :permission="4" type="danger" iconfont="icon-delete" usePopConfirm @click="handleButtonDeleteClick"
:popConfirmOptions="{ title: '确认删除?', confirmText: '删除', confirmButtonType: 'danger' }" >删除</joc-button>
这样就不会再警告了