模式

安装

npm install @cypress-design/vue-modal

或者用纱线

yarn add @cypress-design/vue-modal

<script lang="ts" setup>
import { ref } from 'vue'
import Button from '@cypress-design/vue-button'
const visible = ref(false)
</script>

<template>
  <Modal v-model:show="visible" title="Modal Title">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Id perspiciatis hic
    ad minima ex recusandae autem incidunt, perferendis, illo voluptatum
    repudiandae iste voluptate reiciendis quam officiis voluptas laboriosam
    eligendi explicabo!
  </Modal>
  <Button @click="visible = true">Open Modal</Button>
</template>

规模、页脚和解雇

size 设置固定宽度 footer 插槽在身体下方增加一栏 close-on-backdrop-click 编号 : close-on-escape 保留一个出错的点击或逃避丢弃窗体。 关闭按钮总是关闭模式.

<script lang="ts" setup>
import { ref } from 'vue'
import Button from '@cypress-design/vue-button'
const visible = ref(false)
</script>

<template>
  <Modal
    v-model:show="visible"
    title="Send feedback"
    size="md"
    :close-on-backdrop-click="false"
    :close-on-escape="false"
  >
    Tell us what we could do better.
    <template #footer>
      <div class="flex gap-3">
        <Button @click="visible = false">Send</Button>
        <Button variant="white" @click="visible = false">Cancel</Button>
      </div>
    </template>
  </Modal>
  <Button @click="visible = true">Open Modal</Button>
</template>