Vue 封装elementUI的el-popover

打印 上一主题 下一主题

主题 905|帖子 905|积分 2715

1.封装公共组件

  1. <template>
  2.         <div class="confirm-popover disInlineBlock ml10">
  3.                 <el-popover placement="bottom" v-model="visible" :trigger="triggerType">
  4.                         <div class="confirm-popover-popover">
  5.                                 <!-- 简单提示内容 -->
  6.                                 <p class="confimStyle" v-if="!advanced">
  7.                                         <span
  8.                                                 class="mr10 font20"
  9.                                                 :class="iconClass"
  10.                                                 :style="iconStyle"
  11.                                                 v-if="popoverIcon"
  12.                                         ></span
  13.                                         >{{ textMessage }}
  14.                                 </p>
  15.                                 <!-- 自定义提示内容 -->
  16.                                 <slot></slot>
  17.                         </div>
  18.                         <div class="operate-btns mt20">
  19.                                 <el-button
  20.                                         size="medium"
  21.                                         plain
  22.                                         class="w45pct"
  23.                                         @click="visible = false"
  24.                                         >{{ cancelTxt }}</el-button
  25.                                 >
  26.                                 <el-button
  27.                                         size="medium"
  28.                                         type="primary"
  29.                                         class="w45pct mlpct10-imp"
  30.                                         @click="fireHandler"
  31.                                         >{{ confirmTxt }}</el-button
  32.                                 >
  33.                         </div>
  34.                         <el-button
  35.                                 v-if="!advancedBtn"
  36.                                 :type="adsorptionBtnType"
  37.                                 :plain="isPlain"
  38.                                 :icon="adsorptionBtnIcon"
  39.                                 :style="falseBtnContentStyle"
  40.                                 :disabled="btnDisabled"
  41.                                 size="medium"
  42.                                 slot="reference"
  43.                                 @click="referChange"
  44.                         >
  45.                                 {{ adsorptionTxt }}
  46.                         </el-button>
  47.                         <el-button
  48.                                 v-if="advancedBtn"
  49.                                 :type="adsorptionBtnType"
  50.                                 :plain="isPlain"
  51.                                 :style="btnContentStyle"
  52.                                 :icon="adsorptionBtnIcon"
  53.                                 :disabled="btnDisabled"
  54.                                 size="medium"
  55.                                 slot="reference"
  56.                         >
  57.                                 <slot name="btnContent"></slot>
  58.                         </el-button>
  59.                 </el-popover>
  60.         </div>
  61. </template>
  62. <script>
  63. export default {
  64.         name: "ConfirmPopover",
  65.         props: {
  66.                 // 按钮大小
  67.                 size: {
  68.                         type: String,
  69.                         default: "small",
  70.                 },
  71.                 //被吸附的按钮是否禁用
  72.                 btnDisabled: {
  73.                         type: Boolean,
  74.                         default: false,
  75.                 },
  76.                 //是否朴素按钮
  77.                 isPlain: {
  78.                         type: Boolean,
  79.                         default: true,
  80.                 },
  81.                 //是否开启自定义提示内容
  82.                 advanced: {
  83.                         type: Boolean,
  84.                         default: false,
  85.                 },
  86.                 //是否开启自定义按钮内的内容(如果想自定义btn内容,advancedBtn必须为true)
  87.                 advancedBtn: {
  88.                         type: Boolean,
  89.                         default: false,
  90.                 },
  91.                 //是否需要icon
  92.                 popoverIcon: {
  93.                         type: Boolean,
  94.                         default: true,
  95.                 },
  96.                 //popover中的icon 图标
  97.                 iconClass: {
  98.                         type: String,
  99.                         default: "el-icon-warning",
  100.                 },
  101.                 //popover中的icon 行内样式
  102.                 iconStyle: {
  103.                         type: Object,
  104.                         default: function () {
  105.                                 return { color: "#f56c6c" };
  106.                         },
  107.                 },
  108.                 //btnContent中的icon 行内样式
  109.                 btnContentStyle: {
  110.                         type: Object,
  111.                         default: function () {
  112.                                 return { color: "#f56c6c" };
  113.                         },
  114.                 },
  115.                 //falseBtnContentStyle中的icon 行内样式
  116.                 falseBtnContentStyle: {
  117.                         type: Object,
  118.                         default: function () {
  119.                                 return { color: "#f56c6c" };
  120.                         },
  121.                 },
  122.                 //popover触发方式
  123.                 triggerType: {
  124.                         type: String,
  125.                         default: "click",
  126.                         required: false,
  127.                 },
  128.                 //提示文案
  129.                 textMessage: {
  130.                         type: String,
  131.                         default: "Hello world!!!",
  132.                         required: false,
  133.                 },
  134.                 //被吸附的按钮文案
  135.                 adsorptionTxt: {
  136.                         type: String,
  137.                         default: "按钮",
  138.                         required: false,
  139.                 },
  140.                 //被吸附的按钮的类型
  141.                 adsorptionBtnType: {
  142.                         type: String,
  143.                         default: "primary",
  144.                         required: false,
  145.                 },
  146.                 //被吸附的按钮的icon
  147.                 adsorptionBtnIcon: {
  148.                         type: String,
  149.                         default: "",
  150.                         required: false,
  151.                 },
  152.                 //取消按钮文案
  153.                 cancelTxt: {
  154.                         type: String,
  155.                         default: "取消",
  156.                         required: false,
  157.                 },
  158.                 //确认按钮文案
  159.                 confirmTxt: {
  160.                         type: String,
  161.                         default: "确定",
  162.                         required: false,
  163.                 },
  164.         },
  165.         components: {},
  166.         computed: {},
  167.         watch: {},
  168.         data() {
  169.                 return {
  170.                         visible: false, //popover显示与隐藏
  171.                 };
  172.         },
  173.         mounted() {},
  174.         methods: {
  175.                 fireHandler() {
  176.                         this.visible = false;
  177.                         this.$emit("emitCallback");
  178.                 },
  179.                 referChange() {
  180.                         this.visible = false;
  181.                         this.$emit("referBtn");
  182.                 },
  183.         },
  184. };
  185. </script>
  186. <style lang="scss" scoped>
  187. ::v-deep .el-icon-warning:before {
  188.         content: "\e7a3" !important;
  189. }
  190. ::v-deep .el-button {
  191.         min-width: 60px;
  192. }
  193. .confirm-popover-popover {
  194.         .confimStyle {
  195.                 color: #606266;
  196.                 font-size: 14px;
  197.         }
  198. }
  199. </style>
复制代码
2.使用场景

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

  1. 1.引入
  2. import confirmPopover from "@/components/ConfirmPopover";
  3. components:{confirmPopover}
  4. 2.使用
  5. <confirm-popover
  6.         v-if="libraryFlag.isCanDelete"
  7.         class="deleteBtnActive ml10"
  8.         :textMessage="delMessage"
  9.         adsorptionBtnType="danger"
  10.         adsorptionBtnIcon="el-icon-delete"
  11.         adsorptionTxt="删除"
  12.         :falseBtnContentStyle="falseBtnContentStyleObj"
  13.         triggerType="manual"
  14.         @referBtn="deleApply"
  15.         ref="del"
  16.         @emitCallback="delSure">
  17. </confirm-popover>
  18. 3.data
  19. delMessage: "请选择确认删除的数据?",
  20. falseBtnContentStyleObj: {
  21.   color: "#f9a7a7",
  22.   borderWidth: "1px",
  23.   borderColor: "#fde2e2",
  24.   borderStyle: "solid",
  25.   fontSize: "18px",
  26.   lineHeight: "13px",
  27.   fontWeight: 600,
  28.   background: "none",
  29. },
  30. 4.methods
  31. deleApply() {
  32.   this.visible = true;
  33.   this.$refs.del.visible = true;
  34. },
  35. delSure() {}
复制代码
2-2 结合el-radio的弹出框

  1. 1.引入
  2. import confirmPopover from "@/components/ConfirmPopover";
  3. components:{confirmPopover}
  4. 2.使用
  5. <confirm-popover
  6.         v-if="libraryFlag.isCanDelete"
  7.         class="deleteBtnActive ml10"
  8.         :textMessage="delMessage"
  9.         adsorptionBtnType="danger"
  10.         adsorptionBtnIcon="el-icon-delete"
  11.         adsorptionTxt="删除"
  12.         :falseBtnContentStyle="falseBtnContentStyleObj"
  13.         triggerType="manual"
  14.         @referBtn="deleApply"
  15.         ref="del"
  16.         @emitCallback="delSure">
  17.       <template slot="default">
  18.                  <div class="custom-message">
  19.                         <el-radio-group
  20.                           v-model="selectedOption"
  21.                           style="display: flex; flex-direction: column"
  22.                           class="ml20 mt10">
  23.                                 <el-radio label="1">删除已选{{ selectedCount }}条</el-radio>
  24.                                 <el-radio label="2" class="mt10">删除全部{{ totalCount }}条</el-radio>
  25.                          </el-radio-group>
  26.                   </div>
  27.            </template>
  28. </confirm-popover>
  29. 3.data
  30. delMessage: "请选择确认删除的数据?",
  31. falseBtnContentStyleObj: {
  32.   color: "#f9a7a7",
  33.   borderWidth: "1px",
  34.   borderColor: "#fde2e2",
  35.   borderStyle: "solid",
  36.   fontSize: "18px",
  37.   lineHeight: "13px",
  38.   fontWeight: 600,
  39.   background: "none",
  40. },
  41. selectedOption: null,
  42. selectedCount: 0,
  43. totalCount: 0,
  44. 4.methods
  45. deleApply() {
  46.   this.visible = true;
  47.   this.$refs.del.visible = true;
  48. },
  49. delSure() {}
复制代码


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

欢乐狗

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表