Modal / 模态框
模态对话框是一种常见的 UI 元素，用于显示需要引起用户注意的信息。
特性
允许嵌套
允许滚动模态框内容
完全可自定义模态内容
处理了滚动穿透，同时不会导致页面偏移
优化移动端体验
基础用法
<script setup>
import { ref } from 'vue'
import { Btn, Modal, Paper } from '@roku-ui/vue'
const show = ref(false)
</script>
<template>
<Btn @click="show = true">
Open Modal
</Btn>
<Modal v-model="show">
<Paper>
This is a modal
</Paper>
</Modal>
</template>你可能会注意到，当打开模态框时页面的滚动条会消失，同时模态后的页面无法滚动。这是模态框的正确实现。
一般来说在 Windows 系统中，滚动条消失后页面会发生横向偏移。这是因为 Windows 系统的滚动条是占据页面空间的。对此我们动态计算了滚动条的宽度，然后将其应用到页面上，以避免页面偏移。