NwModal弹框组件 #

<template>
<div class="example">
  <Button type="primary" @click="handleModal1">打开弹框</Button>
  <NwModal v-model:visible="visiable" title="弹框1">
      <div ref="divRef" style="width: 100%; height: 200px">
      国外的信号塔就是不一样，
      上面竟然还写着汉字
      </div>
    </NwModal>
</div>    
</template>
<script setup lang="ts">
import {ref} from 'vue'
import { NwModal } from '@nw-design/ui'
import {Button} from 'ant-design-vue'
import '@nw-design/ui/dist/es/style.css'
const visiable = ref(false)
const handleModal1 = () => {
  visiable.value =true
}
</script>

<template>
<div class="example">
  <Button type="primary" @click="handleModal2">打开弹框2</Button>
  <NwModal v-model:visible="visiable2" title="可拖拽可全屏弹框" :draggable="true" :canFullscreen="true">
      <div ref="divRef" style="width: 100%; height: 200px">
      我爱世界杯 享受比赛
      </div>
    </NwModal>
</div>  
</template>
<script setup lang="ts">
import {ref} from 'vue'
import { NwModal } from '@nw-design/ui'
import {Button} from 'ant-design-vue'
import '@nw-design/ui/dist/es/style.css'
const visiable2 = ref(false)
const handleModal2 = () => {
  visiable2.value =true
}
</script>

<template>
<div class="example">
  <Button type="primary" @click="handleModal3">打开弹框3</Button>
  <NwModal v-model:visible="visiable3" title="自定义底部按钮弹框" :confirmLoading="true">
      <div ref="divRef" style="width: 100%; height: 200px">
      喜羊羊，美羊羊，懒羊羊，暖羊羊，沸羊羊，慢羊羊，红太狼，灰太狼，别看我只是一只羊
      </div>
       <template #insertFooter>
        <Button type="primary" danger>一键去阳</Button>
      </template>
    </NwModal>
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import { NwModal } from '@nw-design/ui'
import {Button} from 'ant-design-vue'
import '@nw-design/ui/dist/es/style.css'
const visiable3 = ref(false)
const handleModal3 = () => {
  visiable3.value =true
}
</script>