Chi-UI

Appearance

Masker 遮罩 ​

代码示例 ​

基础用法 ​

直接打开遮罩，当然也可以渲染一些东西在遮罩上。

<template>
  <chi-button type="primary" @click="active = !active">打开</chi-button>
  <chi-masker closable v-model:active="active" @close="active = false"></chi-masker>
</template>

<script setup>
import { ref } from 'vue'

const active = ref(false)
</script>

自定义遮罩 ​

通过 mask 插槽，你可以自定义遮罩层，例如做一个镂空效果。

<script setup>
import { ref } from 'vue'

const active = ref(false)
</script>

<template>
  <chi-button type="primary" @click="active = !active"> 打开 </chi-button>
  <chi-masker v-model:active="active" transfer closable @close="active = false">
    <template #mask>
      <svg style="width: 100%; height: 100%">
        <defs>
          <mask id="custom-mask-zh">
            <rect x="0" y="0" width="100%" height="100%" fill="white" />
            <rect x="0" y="0" width="310" height="64" fill="black" />
          </mask>
        </defs>
        <rect
          x="0"
          y="0"
          width="100%"
          height="100%"
          fill="rgba(0, 0, 0, 45%)"
          mask="url(#custom-mask-zh)"
        />
      </svg>
    </template>
  </chi-masker>
</template>

API ​

Masker 属性 ​

名称类型说明默认值
activeboolean设置遮罩层是否显示，可以使用 v-model 双向绑定false
closableboolean设置是否可以点击遮罩层关闭false
transferboolean | string设置遮罩的渲染位置，设置为 true 时默认渲染至 <body>false

Masker 事件 ​

名称说明参数
close当用关闭功能触发关闭时触发

Masker 插槽 ​

名称说明参数
default显示层的内容
mask遮罩层的内容