123资源网

Vue.extend创建动态组件的应用

广告也精彩

弹窗

然后我在想,能不能自己也封装一个这种组件,不用每次都import事先写好的组件,能全局调用呢?正好工作中做到一个删除确认框的功能,就研究了一下。

Vue.extend创建动态组件的应用

一、创建一个组件(deleteconfirm.vue)

<template>   <a-modal     :title="null"     width="416px"     :bodyStyle="{ padding: '0px' }"     :visible="visible"     :confirm-loading="confirmLoading"     okType="danger"     okText="删除"     :closable="false"     @ok="handleOk"     @cancel="handleCancel"   >     <div class="delete-confirm-wrap">       <div class="title-wrap mb10">         <a-icon           class="mr10"           type="exclamation-circle"           theme="filled"           :style="{ color: '#f9ad15' }"         />         <span class="confirm-title">{{ title }}</span>       </div>       <div class="warning-title mb10">         删除后相关数据一并删除,此操作不可逆!       </div>       <div class="confirm-tip mb10">如确认删除,请输入:{{ validateText }}</div>       <a-input         class="flex-one"         :placeholder="placeholder"         v-model="userInputText"       />     </div>   </a-modal> </template> <script> export default {   name: "deleteConfirm",   props: {     title: {       type: String,       default: "您确定要删除吗?",     },     placeholder: {       type: String,       default: "",     },     validateText: {       type: String,       default: "",     },     onOk: {       type: Function,       default() {         return () => {};       },     },     onCancel: {       type: Function,       default() {         return () => {};       },     },   },   data() {     return {       //是否显示       visible: false,       //确定Loading       confirmLoading: false,       //用户输入的确认文案       userInputText: "",     };   },   computed: {},   methods: {     //点击确定按钮     async handleOk() {       //点确定之前校验用户输入的与需要校验的文案是不是一致       if (this.userInputText !== this.validateText) {         this.$message.error("输入错误");         return;       }       this.confirmLoading = true;       //回调用户函数       await this.onOk(this.userInputText);       this.confirmLoading = false;       this.visible = false;     },     //取消按钮     handleCancel() {       this.onCancel("cancel");       this.visible = false;     },   }, }; </script>  <style lang="scss" scoped> .delete-confirm-wrap {   border-radius: 6px;   height: 170px;   padding: 24px;   .title-wrap {     font-weight: 500;     font-size: 16px;     display: flex;     align-items: center;   }   .warning-title {     color: #ff4d4f;   }   .confirm-tip {     color: #8591a1;   } } </style> 

二、在该组件同目录下新建index.js

import Vue from 'vue' //导入组件 import deleteConfirmComp from './deleteconfirm' //创建构造函数 const deleteConfirmConstructor = Vue.extend(deleteConfirmComp); //构建删除方法 const deleteConfirm = (options = {}) => {     //动态实例化组件     let instance = new deleteConfirmConstructor({         //此处针对子组件的props进行合并覆盖         propsData: {             ...options         }     });     //挂载实例渲染     instance.$mount();     //绑定到body上     document.body.appendChild(instance.$el);     //显示出弹窗     instance.visible = true; } //导出该方法 export default deleteConfirm; 

三、在main.js中挂载deleteConfirm方法到Vue原型对象上,以便能够全局调用该方法

import Vue from 'vue' import deleteConfirm from "./components/deleteconfirm/index"; Vue.prototype.$confirm = deleteConfirm; ... 

四、使用

this.$confirm({         title: `确定要删除「我叫你一声」吗?`,         placeholder: "请输入要删除的页面名称",         validateText:'我叫你一声',         async onOk() {           //此处是点击确定按钮的回调           ...         },       }); 

五、效果

效果

Vue.extend创建动态组件的应用

广告也精彩

本文链接:https://www.123wz.cn/post/58577.html

版权声明:
温馨提示:
本站提供的一切软件、教程和内容信息都来自网络收集整理,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,版权争议与本站无关。用户必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

发表评论

您需要 登录账户 后才能发表评论

还没有评论,快来说点什么吧~

联系客服
网站客服业务合作Q交流群
635140321
公众号
公众号
公众号
返回顶部