Vue 封装elementUI的el-popover

1.封装公共组件
<template><div class="confirm-popover disInlineBlock ml10"><el-popover placement="bottom" v-model="visible" :trigger="triggerType"><div class="confirm-popover-popover"><!-- 简单提示内容 --><p class="confimStyle" v-if="!advanced"><spanclass="mr10 font20":class="iconClass":style="iconStyle"v-if="popoverIcon"></span>{{ textMessage }}</p><!-- 自定义提示内容 --><slot></slot></div><div class="operate-btns mt20"><el-buttonsize="medium"plainclass="w45pct"@click="visible = false">{{ cancelTxt }}</el-button><el-buttonsize="medium"type="primary"class="w45pct mlpct10-imp"@click="fireHandler">{{ confirmTxt }}</el-button></div><el-buttonv-if="!advancedBtn":type="adsorptionBtnType":plain="isPlain":icon="adsorptionBtnIcon":style="falseBtnContentStyle":disabled="btnDisabled"size="medium"slot="reference"@click="referChange">{{ adsorptionTxt }}</el-button><el-buttonv-if="advancedBtn":type="adsorptionBtnType":plain="isPlain":style="btnContentStyle":icon="adsorptionBtnIcon":disabled="btnDisabled"size="medium"slot="reference"><slot name="btnContent"></slot></el-button></el-popover></div>
</template><script>
export default {name: "ConfirmPopover",props: {// 按钮大小size: {type: String,default: "small",},//被吸附的按钮是否禁用btnDisabled: {type: Boolean,default: false,},//是否朴素按钮isPlain: {type: Boolean,default: true,},//是否开启自定义提示内容advanced: {type: Boolean,default: false,},//是否开启自定义按钮内的内容(如果想自定义btn内容,advancedBtn必须为true)advancedBtn: {type: Boolean,default: false,},//是否需要iconpopoverIcon: {type: Boolean,default: true,},//popover中的icon 图标iconClass: {type: String,default: "el-icon-warning",},//popover中的icon 行内样式iconStyle: {type: Object,default: function () {return { color: "#f56c6c" };},},//btnContent中的icon 行内样式btnContentStyle: {type: Object,default: function () {return { color: "#f56c6c" };},},//falseBtnContentStyle中的icon 行内样式falseBtnContentStyle: {type: Object,default: function () {return { color: "#f56c6c" };},},//popover触发方式triggerType: {type: String,default: "click",required: false,},//提示文案textMessage: {type: String,default: "Hello world!!!",required: false,},//被吸附的按钮文案adsorptionTxt: {type: String,default: "按钮",required: false,},//被吸附的按钮的类型adsorptionBtnType: {type: String,default: "primary",required: false,},//被吸附的按钮的iconadsorptionBtnIcon: {type: String,default: "",required: false,},//取消按钮文案cancelTxt: {type: String,default: "取消",required: false,},//确认按钮文案confirmTxt: {type: String,default: "确定",required: false,},},components: {},computed: {},watch: {},data() {return {visible: false, //popover显示与隐藏};},mounted() {},methods: {fireHandler() {this.visible = false;this.$emit("emitCallback");},referChange() {this.visible = false;this.$emit("referBtn");},},
};
</script><style lang="scss" scoped>
::v-deep .el-icon-warning:before {content: "\e7a3" !important;
}
::v-deep .el-button {min-width: 60px;
}
.confirm-popover-popover {.confimStyle {color: #606266;font-size: 14px;}
}
</style>
2.使用场景

   2-1 单纯的弹出按钮框 类似于这种

   

1.引入
import confirmPopover from "@/components/ConfirmPopover";
components:{confirmPopover}
2.使用
<confirm-popoverv-if="libraryFlag.isCanDelete"class="deleteBtnActive ml10":textMessage="delMessage"adsorptionBtnType="danger"adsorptionBtnIcon="el-icon-delete"adsorptionTxt="删除":falseBtnContentStyle="falseBtnContentStyleObj"triggerType="manual"@referBtn="deleApply"ref="del"@emitCallback="delSure">
</confirm-popover>
3.data
delMessage: "请选择确认删除的数据?",
falseBtnContentStyleObj: {color: "#f9a7a7",borderWidth: "1px",borderColor: "#fde2e2",borderStyle: "solid",fontSize: "18px",lineHeight: "13px",fontWeight: 600,background: "none",
},
4.methods
deleApply() {this.visible = true;this.$refs.del.visible = true;
},
delSure() {}

2-2 结合el-radio的弹出框

1.引入
import confirmPopover from "@/components/ConfirmPopover";
components:{confirmPopover}
2.使用
<confirm-popoverv-if="libraryFlag.isCanDelete"class="deleteBtnActive ml10":textMessage="delMessage"adsorptionBtnType="danger"adsorptionBtnIcon="el-icon-delete"adsorptionTxt="删除":falseBtnContentStyle="falseBtnContentStyleObj"triggerType="manual"@referBtn="deleApply"ref="del"@emitCallback="delSure"><template slot="default"><div class="custom-message"><el-radio-groupv-model="selectedOption"style="display: flex; flex-direction: column"class="ml20 mt10"><el-radio label="1">删除已选{{ selectedCount }}条</el-radio><el-radio label="2" class="mt10">删除全部{{ totalCount }}条</el-radio></el-radio-group></div></template>
</confirm-popover>
3.data
delMessage: "请选择确认删除的数据?",
falseBtnContentStyleObj: {color: "#f9a7a7",borderWidth: "1px",borderColor: "#fde2e2",borderStyle: "solid",fontSize: "18px",lineHeight: "13px",fontWeight: 600,background: "none",
},
selectedOption: null,
selectedCount: 0,
totalCount: 0,
4.methods
deleApply() {this.visible = true;this.$refs.del.visible = true;
},
delSure() {}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/23394.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3中进度条上加高亮圆点

实现效果 小圆点基于进度条定位&#xff08;left&#xff09;。 实现代码 <template><!-- 这块代码实现的功能&#xff1a;progressData遍历的年份进度数组&#xff0c;展示每年完成的进度--><ul><li v-for"(item, index) in progressData" :k…

Unity VR 零基础开发之 Pico4 MR

一、新建Unity2021.3.37 3D工程 二、切换到Android安卓平台 1、点击Unity编辑器左上角的Flie后&#xff0c;选择Build Setting选项。 2、弹出弹窗后&#xff0c;点击Android选项&#xff0c;然后再点击Switch Platform按钮切换成安卓平台。 3、切换完成后Android选项后面会显示…

Centos7下安装sqlplus并连接远程数据库

已经不用Oracle好多年了&#xff0c;然而近期有项目居然需要用到Oracle&#xff0c;并且是在内网的&#xff0c;所以没办法直接安装数据库连接工具来测试连接&#xff0c;只能在Linux的服务器上面安装sqlplus工具来连接&#xff0c;找资料完成了安装和连接&#xff0c;遂记录。…

3. QGis二次开发项目实践一之解决“无法定位程序输入点“

前言 本章讲述实现本项目实现过程中遇到的QGis二次开发库版本和Qt以及其他动态库的版本匹配问题问题复现 本项目是要作为一个子模块集成到用户的项目中本项目最初的开发环境为QGis3.28+Qt5.15.2,而当时并未问清楚用户开发环境所以交付给用户之后,出现了类似下图的问题 出现该…

uniapp利用canvas绘制ECG网格图附带心电图显示------代码

之前是一个关于如何绘制心电图的代码&#xff0c;后续需求是添加ECG的网格背景图也是利用canvas绘制的 先看代码&#xff1a; <template><view><page-head :title"title"></page-head><!-- 心电图显示区 --><view class"disp…

AI论文:一键生成论文的高效工具

说到这个问题&#xff0c;那真的得看你对“靠谱”的定义是怎样的啦&#xff1f; 众所周知&#xff0c;写论文是一项极其耗时间的事情&#xff0c;从开始的选题到文献资料搜索查阅&#xff0c;大纲整理等等一大堆的繁杂工作是极艰辛的。用AI写论文就不一样了&#xff0c;自动化…

深入QML:现代用户界面开发的强大工具20240606

深入QML&#xff1a;现代用户界面开发的强大工具 引言 在数字化时代&#xff0c;用户界面 (UI) 是任何应用程序不可或缺的一部分。为了提供流畅、直观且具有吸引力的用户体验&#xff0c;开发者需要一种强大且灵活的开发工具。QML&#xff08;Qt Modeling Language&#xff0…

简述在 Vue 中,子组件为何不可以修改父组件传递的 Prop ?

在 Vue 中&#xff0c;子组件不应该直接修改父组件传递的 Prop&#xff0c;这是基于 Vue 的单向数据流和组件之间通信的设计原则。以下是几个关键原因&#xff1a; 单向数据流&#xff1a;Vue 提倡的是单向数据流&#xff0c;即从父组件流向子组件。当父组件的状态发生变化时&…

php7.3安装phalcon扩展

php7安装3.4版本的phalcon扩展 适用于Centos6.x和Centos7.x系统&#xff0c;php使用7.1版本&#xff0c;wlnmp一键包已支持该扩展 phalcon扩展包地址&#xff1a;https://github.com/phalcon/cphalcon &#xff08;git clone 有可能连接不上&#xff09; 1、安装所需依赖&a…

Linux Kernel nf_tables 本地权限提升漏洞(CVE-2024-1086)

文章目录 前言声明一、netfilter介绍二、漏洞成因三、漏洞危害四、影响范围五、漏洞复现六、修复方案临时解决方案升级修复方案 前言 2024年1月&#xff0c;各Linux发行版官方发布漏洞公告&#xff0c;修复了一个 netfilter:nf_tables 模块中的释放后重用漏洞&#xff08;CVE-…

基于语音识别的智能电子病历(其他)CC、HPI、ROS案例分析

门诊使用基于语音识别的智能电子病历相对要少一些。很多系统的门诊系统包含了丰富的模版&#xff0c;美国退伍军人医院在非常早的时候&#xff08;2010年之前&#xff09;就通过使用大量的模版来进行处理门诊的数据录入。下面分析中的截图也是来自一些美国退伍军人医院的系统。…

网络高频攻击手段与基本防护措施总结

主要攻击手段 一、云平台攻击 云平台攻击是指针对云服务器的恶意行为&#xff0c;旨在获取非法访问权限、窃取敏感数据或者破坏服务器的正常运行。云平台攻击的形式多样&#xff0c;以下是对云平台攻击的一些主要类型和特点的详细分析&#xff1a; 攻击类型&#xff1a; 凭据…

idea修改国际化语言教程

教程背景 第一种&#xff0c;如果以前的项目已经有国际化语言了&#xff0c;现在的项目是导入的。 第二种&#xff0c;你中途把idea删除卸载了&#xff0c;在安装了别的版本&#xff0c;把这个项目导入进来后的。 第三种&#xff0c;你下载或复制的别人的项目。 以上这三种…

如何实现vue项目不同屏幕适配(2024最新)

文章目录 1.下载插件&#xff0c;修改px单位为rem单位2.配置vue.config.js(如下图位置所示)3.屏幕自适应4.项目实际使用 1.下载插件&#xff0c;修改px单位为rem单位 npm i postcss-plugin-px2rem2.配置vue.config.js(如下图位置所示) 注意在根目录下&#xff0c;如果没有该文…

MySQL深分页,limit 100000,10 优化

文章目录 一、limit深分页为什么会变慢二、优化方案2.1 通过子查询优化&#xff08;覆盖索引&#xff09;回顾B树结构覆盖索引把条件转移到主键索引树 2.2 INNER JOIN 延迟关联2.3 标签记录法&#xff08;要求id是有序的&#xff09;2.4 使用between...and... 我们日常做分页需…

浅谈人工智能在新型电力系统建设和电力行业中的应用和未来发展趋势

文章目录 概要应用场景分析未来趋势分析小结备注 概要 人工智能在新型电力系统建设和电力行业中具有广泛的应用和潜力。它可以大大提高电力系统的运行效率、可靠性和安全性&#xff0c;同时减少能源浪费和环境影响。 应用场景分析 能源预测和优化&#xff1a;人工智能可以通过…

引擎:UI

一、控件介绍 Button 按钮 创建一个按钮 按钮禁用 精灵模式 颜色模式 缩放模式 绑定点击事件 EditBox 输入框 Layout 布局 支持水平排列、垂直排列、背包排列 PageView 页面视图 ProgressBar 进度条 RichText 富文本 绑定点击事件 事件可以被其它标签包裹 图文混排 Scroll…

AG32 MCU+FPGA 使用感受

前言&#xff1a; 笔者35了&#xff0c;10多年前开始玩单片机/FPGA啥的&#xff0c;从现在回想过去&#xff0c;眼下真的是我们国家微电子发展的好时候。各种各样的国产单片机&#xff0c;FPGA啥的&#xff0c;想想本科的时候用的Freescale&#xff0c;后来用的STM32&#xff0…

13、数字中国建设整体布局规划

指导思想 《规划》强调,要坚持以新时代中国特色社会主义思想特别是网络强国的重要思想为指导,深入贯彻党的二十大精神,坚持稳中求进工作总基调,完整、准确、全面贯彻新发展理念,加快构建新发展格局,着力推动高质量发展,统筹发展和安全,强化系统观念和底线思维,加强整…

解决 ublox_f9p的 topic “/ublox_driver/receiver_lla“中无位置精度(P_std)的问题

一、背景 GNSS/INS组合导航是车辆导航等领域中常见的组合方式。ublox_f9p 设备因其优秀的性能被广泛关注,其可以直接发布 GNSS的高精度定位解,为GNSS/INS组合导航的实时定位提供极大的便利。其中 ubuntu环境下,ublox_f9p 设备的操作如下: 【1】Ubuntu18.04 下的安装,运行…