joc-button和joc-link 启用确认操作usePopConfirm后,v-permission指令冲突


页面中joc-button组件,启用了pop-confirm,此时,如果设置权限指令v-permission,打开页面控制台就会出现一个警告

HTML 全选
<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>

joc-button和joc-link 启用确认操作usePopConfirm后,v-permission指令冲突

解决方案:

因为操作确认模式,最外层元素是el-popconfirm,而el-popconfirm加载后是不显示的,因此和权限判断冲突了,

如果joc-button和joc-link设置了usepopconfirm属性,那么就不要用v-permission指令,而是用组件自带的属性 :permission,这样就不会冲突

修改后的代码:

HTML 全选
<joc-button :permission="4" type="danger" iconfont="icon-delete" usePopConfirm @click="handleButtonDeleteClick"
:popConfirmOptions="{ title: '确认删除?', confirmText: '删除', confirmButtonType: 'danger' }" >删除</joc-button>

这样就不会再警告了

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
张国生
评论列表

发表评论

评论内容
昵称: