利用Vue3实现一个可以用js调用的组件

前言

项目开发中基本都会用到组件库，但是设计稿样式和功能不一定和组件库相同，尤其像是消息提示弹窗、确认弹窗，各个项目各个设计师都有自己的一套风格。虽然我们可以使用组件库中的组件对其进行样式覆盖来使用。但是一些定制功能还是不容易修改，这种情况我们就会选择自定义组件，然后通过 components 属性引入页面，显式写入标签调用的，对于消息提示这种给用户简单的提示或操作，大多数常用的ui库类似功能都支持通过js调用。我们也可以参照ui库的调用方式，实现一个通过js函数调用的自定义组件。

一、常规vue组件

假如我们需要实现一个确认框，点击按钮打开确认框，点击确认框的确定和取消按钮关闭确认框，并调用对应方法。

1. 组件主要代码：

src/components/confirm/confirm.vue

2. 使用方式

3. 实现效果

二、改为js调用组件

上面的调用组件的方式非常繁琐，既要引入，又要处理各中操作的回调，并且组件dom节点插入到当前页面之下，样式有可被组件内容覆盖或者受到其他影响。

我们希望实现的结果：通过js函数的方式调用组件，函数返回一个promise，确认then，取消catch`，例如:

confirm({
  title: '',
  message: ''
}).then(() => {
  // 点击确认
}).catch(() => {
  // 点击取消
})

1. 实现步骤：

首先确认需要返回一个 promise 对象。创建一个方法，首先返回一个 promise 对象。
使用vue 的 createapp 方法创建 confirm 组件实例。使用 createapp 第二个参数，我们可以将根 prop 传递给应用程序，将组件所需要的数据传入。
创建一个节点，用作将组件实例挂载的容器，将节点append到body中。
将组件实例挂载到创建的节点上，就实现组件的上级是body，不会受到调用页面影响。
当点击确定调用 resolve，并卸载当前组件，移除dom。点击取消调用 reject 并卸载当前组件，移除dom。

2. 具体实现代码：

修改 confirm 组件js部分，将 onconfirm 和 oncancel 从props 中传递进来，方便组件实例使用。

// src/components/confirm/confirm.vue
<script>
export default {
  name: 'confirm',
  props: {
    title: {
      type: string,
      default: '提示'
    },
    message: {
      type: string,
      default: '默认提示信息'
    },
    confirmbtntext: {
      type: string,
      default: '确认'
    },
    cancelbtntext: {
      type: string,
      default: '取消'
    },
    onconfirm: {
      type: function,
      default: () => {}
    },
    oncancel: {
      type: function,
      default: () => {}
    }
  }
}
</script>

在同目录下新建 index.js文件，将 onconfirm、oncancel 等参数通过props传递到组件，在实例中就能接收到事件回调。

// src/components/confirm/index.js
import { createapp } from 'vue'
import confirm from './confirm'
function confirm ({ title, message, confirmbtntext, cancelbtntext }) {
  return new promise((resolve, reject) => {
    // 实例化组件，createapp第二个参数是props
    const confirminstance = createapp(confirm, {
      title: title || '提示',
      message: message || '确认消息',
      confirmbtntext: confirmbtntext || '确定',
      cancelbtntext: cancelbtntext || '取消',
      onconfirm: () => {
        unmount()
        resolve()
      },
      oncancel: () => {
        unmount()
        reject(new error())
      }
    })
    // 卸载组件
    const unmount = () => {
      confirminstance.unmount()
      document.body.removechild(parentnode)
    }
    // 创建一个挂载容器
    const parentnode = document.createelement('div')
    document.body.appendchild(parentnode)
    // 挂载组件
    confirminstance.mount(parentnode)
  })
}

export default confirm

使用组件

setup () {
  const showconfirm = () => {
    confirm({
      title: '标题',
      message: '内容'
    }).then(() => {
      console.log('点击确认')
    }).catch(() => {
      console.log('点击取消')
    })
  }
  return {
    showconfirm
  }
}

3. 实现效果展示

总结

到此这篇关于利用vue3实现一个可以用js调用的组件的文章就介绍到这了,更多相关vue3实现js调用的组件内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！

黄山市民网：https://www.huangshanshimin.com/