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开发框架网发布内容,转载请附上原文出处连接
张国生
评论列表

发表评论

评论内容
昵称:
关联文章

joc-buttonjoc-link 启用确认操作usePopConfirmv-permission指令冲突
权限指令v-permission
微信支付:API v3 Postman脚本使用指南
vue3重新封装element-plus组件库的按钮组件el-button
增加浮动固定操作按钮
iNeuOS工业互联网操作系统,分布式云端控制安全策略增加实时日志功能
在Vue 3项目中使用TypeScriptPinia进行持久化状态管理初始化操作
JOC快速开发平台,增加调试监听功能
如何在进销存系统中进行账期管理封账操作
.NET IIS第一次访问慢,程序池被回收问题,IIS初始化(启用预加载)
iNeuOS工业互联网操作系统,发布3.6.4版本:云端安全控制实时日志功能,附Chrome、FirefoxEdge浏览器测试性能对比
JOC.EFCore使用
JOC快速开发平台添加了水印设置
JOC.Framework 小程序uni-app添加全局水印
微信支付: API V3支付回调签名验证
纸壳CMS v3.5升级.Net 6免费下载
DevExpress 组件 历史各版本下载地址【更新:V21.1.5】
iNeuOS工业互联网操作系统,矿山动态产量计量系统铁路车辆识别系统应用场景案例
iNeuOS工业互联网操作系统,增加算法分析平台,包括快速傅里叶变换、包络分析、倒频谱自相关等算法
EF Core dotnet-ef 常用命令,指令