Vue 封装elementUI的el-popover

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>
63. <script>
64. export default {
65.         name: "ConfirmPopover",
66.         props: {
67.                 // 按钮大小
68.                 size: {
69.                         type: String,
70.                         default: "small",
71.                 },
72.                 //被吸附的按钮是否禁用
73.                 btnDisabled: {
74.                         type: Boolean,
75.                         default: false,
76.                 },
77.                 //是否朴素按钮
78.                 isPlain: {
79.                         type: Boolean,
80.                         default: true,
81.                 },
82.                 //是否开启自定义提示内容
83.                 advanced: {
84.                         type: Boolean,
85.                         default: false,
86.                 },
87.                 //是否开启自定义按钮内的内容(如果想自定义btn内容，advancedBtn必须为true)
88.                 advancedBtn: {
89.                         type: Boolean,
90.                         default: false,
91.                 },
92.                 //是否需要icon
93.                 popoverIcon: {
94.                         type: Boolean,
95.                         default: true,
96.                 },
97.                 //popover中的icon 图标
98.                 iconClass: {
99.                         type: String,
100.                         default: "el-icon-warning",
101.                 },
102.                 //popover中的icon 行内样式
103.                 iconStyle: {
104.                         type: Object,
105.                         default: function () {
106.                                 return { color: "#f56c6c" };
107.                         },
108.                 },
109.                 //btnContent中的icon 行内样式
110.                 btnContentStyle: {
111.                         type: Object,
112.                         default: function () {
113.                                 return { color: "#f56c6c" };
114.                         },
115.                 },
116.                 //falseBtnContentStyle中的icon 行内样式
117.                 falseBtnContentStyle: {
118.                         type: Object,
119.                         default: function () {
120.                                 return { color: "#f56c6c" };
121.                         },
122.                 },
123.                 //popover触发方式
124.                 triggerType: {
125.                         type: String,
126.                         default: "click",
127.                         required: false,
128.                 },
129.                 //提示文案
130.                 textMessage: {
131.                         type: String,
132.                         default: "Hello world!!!",
133.                         required: false,
134.                 },
135.                 //被吸附的按钮文案
136.                 adsorptionTxt: {
137.                         type: String,
138.                         default: "按钮",
139.                         required: false,
140.                 },
141.                 //被吸附的按钮的类型
142.                 adsorptionBtnType: {
143.                         type: String,
144.                         default: "primary",
145.                         required: false,
146.                 },
147.                 //被吸附的按钮的icon
148.                 adsorptionBtnIcon: {
149.                         type: String,
150.                         default: "",
151.                         required: false,
152.                 },
153.                 //取消按钮文案
154.                 cancelTxt: {
155.                         type: String,
156.                         default: "取消",
157.                         required: false,
158.                 },
159.                 //确认按钮文案
160.                 confirmTxt: {
161.                         type: String,
162.                         default: "确定",
163.                         required: false,
164.                 },
165.         },
166.         components: {},
167.         computed: {},
168.         watch: {},
169.         data() {
170.                 return {
171.                         visible: false, //popover显示与隐藏
172.                 };
173.         },
174.         mounted() {},
175.         methods: {
176.                 fireHandler() {
177.                         this.visible = false;
178.                         this.$emit("emitCallback");
179.                 },
180.                 referChange() {
181.                         this.visible = false;
182.                         this.$emit("referBtn");
183.                 },
184.         },
185. };
186. </script>
188. <style lang="scss" scoped>
189. ::v-deep .el-icon-warning:before {
190.         content: "\e7a3" !important;
191. }
192. ::v-deep .el-button {
193.         min-width: 60px;
194. }
195. .confirm-popover-popover {
196.         .confimStyle {
197.                 color: #606266;
198.                 font-size: 14px;
199.         }
200. }
201. </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企服之家，中国第一个企服评测及商务社交产业平台。