vue使用jsx定义重复弹窗模板

最新推荐文章于 2024-07-15 17:15:41 发布

来赶鸭子上架

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量420

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ly1477868382/article/details/135971548

版权

本文介绍了如何在Vue.js应用中使用自定义组件messageModal，展示一个带有确认和取消功能的弹窗，以及处理点击事件的方法。

摘要由CSDN通过智能技术生成

页面：

<script setup>
import { messageModal } from './tipsModal.jsx'
</script>
<template>
  <div class="home">
    <button
      @click="
        messageModal('test内容', {
          cancel: () => {
            console.log('cancel')
          },
          confirm: () => {
            console.log('confirm')
          }
        })
      "
    >
      弹窗
    </button>
  </div>
</template>

<style lang="less" scoped></style>

模板：

import { render } from 'vue'
export function messageModal(cur, handle) {
  const div = document.createElement('div')
  const pro = (
    <div>
      <div>{cur}</div>
      <div
        onClick={() => {
          document.body.removeChild(div),
            console.log('cancel'),
            handle.cancel && handle.cancel()
        }}
      >
        取消
      </div>
      <div
        onClick={() => {
          document.body.removeChild(div),
            console.log('confirm'),
            handle.confirm && handle.confirm()
        }}
      >
        同意
      </div>
    </div>
  )
  render(pro, div)
  document.body.appendChild(div)
}