Dialog 对话框 #

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

const visible = ref(false)
</script>

<template>
  <vi-button @click="visible = true">打开 Dialog</vi-button>
  <vi-dialog v-model="visible" width="30%" title="你知道吗">
    香菜是这个世界上最难吃的菜
    <template #footer>
      <vi-button @click="visible = false">确认</vi-button>
      <vi-button type="info" @click="visible = false">取消</vi-button>
    </template>
  </vi-dialog>
</template>

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

const visible1 = ref(false)
const visible2 = ref(false)
</script>

<template>
  <vi-row>
    <vi-button @click="visible1 = true">打开简写的 Dialog</vi-button>
    <vi-button @click="visible2 = true">打开自定义的 Dialog</vi-button>
  </vi-row>
  <vi-dialog 
    v-model="visible1" 
    width="30%" 
    title="简写形式" 
    content="使用 content 属性简写"
    :show-close-btn="false"
  />
  <vi-dialog 
    v-model="visible2" 
    width="30%" 
    :show-close-btn="false">
    <template #header>
      <span>自定义的头部</span>
      <vi-button type="danger" @click="visible2 = false">
        <vi-icon name="Close" />
      </vi-button>
    </template>
    自定义主体内容
    <template #footer>
      自定义底部
      <vi-button @click="visible2 = false">关闭</vi-button>
    </template>
  </vi-dialog>
</template>

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

const visible1 = ref(false)
const visible2 = ref(false)
</script>

<template>
  <vi-button @click="visible1 = true">打开 Dialog</vi-button>
  <vi-dialog v-model="visible1" title="嵌套 Dialog">
    <vi-button @click="visible2 = true">打开嵌套</vi-button>
    <vi-dialog 
      v-model="visible2" 
      width="30%" 
      title="我是一个" 
      content="在 Dialog 里面的 Dialog"
    />
  </vi-dialog>
</template>

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

const visible1 = ref(false)
const visible2 = ref(false)
</script>

<template>
  <vi-button @click="visible1 = true">内容居中</vi-button>
  <vi-dialog v-model="visible1" title="嵌套 Dialog" center>
    这是内容
    <vi-dialog 
      v-model="visible2" 
      width="30%" 
      title="整体居中" 
      content="我在屏幕中间"
      box-center
      :show-close-btn="false"
    />
    <template #footer>
      <vi-button @click="visible2 = true">整体居中</vi-button>
    </template>
  </vi-dialog>
</template>

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

const visible = ref(false)
</script>

<template>
  <vi-button @click="visible = true">打开</vi-button>
  <vi-dialog v-model="visible" title="隐藏遮罩层" :mask="false">
    无遮罩层
  </vi-dialog>
</template>

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

const visible = ref(false)
</script>

<template>
  <vi-button @click="visible = true">打开</vi-button>
  <vi-dialog v-model="visible" title="解锁滚动条" :lock-scroll="false">
    试着滚动一下鼠标滚轮
  </vi-dialog>
</template>

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

const visible = ref(false)
const movable = ref(true)
</script>

<template>
  <vi-button @click="visible = true">打开</vi-button>
  <vi-dialog v-model="visible" width="30%" title="可移动(拖拽)" :movable="movable">
    将鼠标放到 header 区域，然后按下拖动。
    <vi-button @click="movable = !movable">
      切换为 {{ movable ? '不可移动' : '可移动' }}
    </vi-button>
  </vi-dialog>
</template>

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

const visible = ref(false)

const open = () => {
  console.log('dialog open')
}
const close = () => {
  console.log('dialog close')
}
</script>

<template>
  <vi-button @click="visible = true">打开</vi-button>
  <vi-dialog 
    v-model="visible" 
    width="30%" 
    title="点击遮罩层" 
    box-center 
    :click-mask-close="false"
    @open="open"
    @close="close">
    试着点击遮罩层
  </vi-dialog>
</template>

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

const visible = ref(false)
</script>

<template>
  <vi-button @click="visible = true">打开</vi-button>
  <vi-dialog v-model="visible" width="30%" title="关闭时销毁" destroy>
    在开发者工具中的 Elements 中查看吧！
  </vi-dialog>
</template>

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

const visible = ref(false)

const beforeClose = (close: () => void) => {
  console.log('before close 阻止了关闭', close)
}
</script>

<template>
  <vi-button @click="visible = true">打开</vi-button>
  <vi-dialog v-model="visible" width="30%" title="阻止关闭" :before-close="beforeClose">
    <span>试着点击右上角 "关闭按钮" 与 "遮罩层"。他们都无法关闭此 Dialog，但下方按钮可以。</span>
    <template #footer>
      <vi-button @click="visible = false">修改 v-model 关闭</vi-button>
    </template>
  </vi-dialog>
</template>