弹窗
然后我在想,能不能自己也封装一个这种组件,不用每次都import事先写好的组件,能全局调用呢?正好工作中做到一个删除确认框的功能,就研究了一下。
<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>
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;
import Vue from 'vue' import deleteConfirm from "./components/deleteconfirm/index"; Vue.prototype.$confirm = deleteConfirm; ...
this.$confirm({ title: `确定要删除「我叫你一声」吗?`, placeholder: "请输入要删除的页面名称", validateText:'我叫你一声', async onOk() { //此处是点击确定按钮的回调 ... }, });
效果
本文链接:https://www.123wz.cn/post/58577.html
版权声明:
温馨提示:
本站提供的一切软件、教程和内容信息都来自网络收集整理,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,版权争议与本站无关。用户必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
上一篇:鸿蒙OS中vp、fp的问题
下一篇:vue项目打包时的优化学习
还没有评论,快来说点什么吧~