陶醉的松鼠

外观

本页目录

动态挂载dom节点 ​

boxt.js ​

ts
import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import box from './box.vue'



interface optionalType {
  title?:string,
  placeholder?:string
  text?:string
}


export default function (optional?:optionalType) {

  const container: string | Element = document.createElement('div') as HTMLElement;

  return new Promise((resolve, reject) => {
    const app = createApp(box,{
     ...optional,
      // 组件销毁时触发的回调
      onDestroy() {
        console.log('组件销毁时触发的回调')
        // @ts-ignore
        app.unmount(container);
        container.remove();
      },
      // 组件关闭时触发的回调
      // 这个回调用于显示组件的移出动画，和 onDestroy 不冲突
      onClose(data: unknown) {
        console.log('关闭回调触发')
        reject(data)
      },
      ok(res:any) {
        console.log('确认回调触发')
        console.log(res)
        resolve(res)
      },
    })
    app.use(ArcoVue)
    app.mount(container);
  })

}

vue模板文件 ​

vue
<template>
  <a-modal
    :visible="open"
    :title="title"
    title-align="start"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleCancel"
    unmount-on-close
  >
    <div v-if="text">{{ text }}</div>
    <a-form
      ref="formRef"
      :model="formModel"
      :label-col-props="{ span: 5 }"
      :wrapper-col-props="{ span: 19 }"
    >
      <a-input
        v-model="formModel.value"
        placeholder="请输入"
      />
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, ref, watch } from 'vue'

  const open = ref(false)
  // const emits = defineEmits(['update:open', 'reload'])
  const props = defineProps({
    title: {
      type: String,
      default() {
        return '提示'
      }
    },
    placeholder: {
      type: String,
      default() {
        return '请输入'
      }
    },
    text: {
      type: String,
      default() {
        return undefined
      }
    },
    onDestroy: {
      type: Function,
      required: true
    },
    onClose: {
      type: Function,
      required: true
    },
    ok: {
      type: Function,
      required: true
    }
  })
  const generateFormModel = () => {
    return {
      value: undefined
    }
  }
  const formModel = reactive(generateFormModel())

  watch(
    () => open.value,
    (val) => {
      if (!val) {
        props.onDestroy()
      }
    }
  )

  onMounted(() => {
    open.value = true
  })
  const getRoleList = () => {
  }
  const handleCancel = () => {
    console.log('点击取消')
    props.onClose({...formModel})
    open.value = false
  }
  const handleOk = () => {
    props.ok({...formModel})
    open.value = false
    console.log('点击确定')
  }


  getRoleList()

</script>
vue
     <a-button type="primary" status="danger" size="small" @click="prompt">prompt操作按钮</a-button>
ts
const ModalContent = {
    setup() {
      const style=`padding-top: 2px;padding-bottom: 2px;font-size: 14px;line-height: 1.5715;width: 100%;padding-right: 0;padding-left: 0;color: inherit;line-height: 1.5715;background: none;border: none;border-radius: 0;outline: none;cursor: inherit;-webkit-appearance: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);`
      function onInput(e:any){
        // console.log(e.target.value)
      };
      return () => [h('div', {class: 'arco-input-wrapper username',style:'margin-bottom: 10px;'}, [
        h('input', {style,onInput,placeholder:'This is an info message'}, 'This is an info message'),
      ]),h('div', {class: 'arco-input-wrapper password'}, [
        h('input', {style,onInput,placeholder:'This is an info message'}, 'This is an info message'),
      ])]
    },
  }
const prompt=()=>{
  Modal.success({
    title: '重置密码',
    content: () => h(ModalContent),
    cancelText:'123',
    closable:true,
    visible:false,
    maskClosable:false,
    titleAlign:'start',
    onOk:(e)=>{
      console.log(e)
    },
    cancel:(e)=>{
      console.log(e)
    },
    onBeforeOk:(doom)=>{ //ok事件前触发
      const {value:username}=document.querySelector(".username input")
      const {value:password}=document.querySelector(".password input")
      console.log(username)
      console.log(password)
      if(username){
        doom() //确定输入内容没问题，则调用回调关闭
      }

    },
  })
}

打开Dialog ​

父组件

vue
<mycomponent>
      <template v-slot:dialog="dialogDate">
        <a-modal :visible="dialogDate.dialogVisible">
          <div>{{ dialogDate }}</div>
          <template #footer>
            <a-button size="small" type="outline" @click="dialogDate.openDialog">取消</a-button>
          </template>
        </a-modal>
      </template>
    </mycomponent>

子组件

vue
<template>
  <div>
    <el-button @click="openDialog">打开{{dialogVisible}}</el-button>
    <slot name="dialog" :dialogVisible="dialogVisible" :openDialog="openDialog"></slot>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  // const dialog = inject('dialog')
  // provide('dialog', dialog)
  const dialogVisible = ref(false)
  const openDialog = () => {
    dialogVisible.value = !dialogVisible.value
    console.log(dialogVisible)
  }
</script>

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