vue3项目 - 封装确认框组件

目的：通过vue实例调用$confirm函数弹出确认框。import导入函数使用也需要支持。

分析功能

• 实现组件基础结构和样式。
• 实现函数式调用组件方式和完成交互。
• 加上打开时动画效果。
• 给购物车删除加上确认框。
• 给vue挂载原型函数$confirm

实现函数式调用组件方式和完成交互

封装确认框组件

xtx-confirm.vue

<template>
  <div class="xtx-confirm">
    <div class="wrapper" ref="target">
      <div class="header">
        <h3>{
   {
   title}}</h3>
        <a href="JavaScript:;" class="iconfont icon-close-new" @click="cancelCallback"></a>
      </div>
      <div class="body">
        <i class="iconfont icon-warning"></i>
        <span>{
   {
   text}}</span>
      </div>
      <div class="footer">
        <XtxButton @click="cancelCallback" size="mini" type="gray">取消</XtxButton>
        <XtxButton @click="confirmCallback" size="mini" type="primary">确认</XtxButton>
      </div>
    </div>
  </div>
</template>

<script>
// 注意：当前组件不是在 #app 下进行渲染，无法使用 #app 下的环境