You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
864 B
62 lines
864 B
2 years ago
|
|
||
|
|
## 代码演示
|
||
|
|
|
||
|
|
### 基础用法
|
||
|
|
|
||
|
|
```HTML
|
||
|
|
<hd-button type="primary" @click="Show">显示遮罩层</hd-button>
|
||
|
|
<hd-overlay :show="show" @click="Hide" />
|
||
|
|
```
|
||
|
|
|
||
|
|
```ts
|
||
|
|
|
||
|
|
const show = ref<boolean>(false)
|
||
|
|
|
||
|
|
function Show() {
|
||
|
|
show.value = true
|
||
|
|
}
|
||
|
|
function Hide() {
|
||
|
|
show.value = false
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### 嵌入内容
|
||
|
|
|
||
|
|
通过默认插槽可以在遮罩层上嵌入任意内容。
|
||
|
|
|
||
|
|
```html
|
||
|
|
<hd-button type="primary" @click="Show">嵌入内容</hd-button>
|
||
|
|
<hd-overlay :show="show" @click="Hide">
|
||
|
|
<view class="wrapper">
|
||
|
|
<div class="block" />
|
||
|
|
</view>
|
||
|
|
</hd-overlay>
|
||
|
|
```
|
||
|
|
|
||
|
|
```ts
|
||
|
|
|
||
|
|
const show = ref<boolean>(false)
|
||
|
|
|
||
|
|
function Show() {
|
||
|
|
show.value = true
|
||
|
|
}
|
||
|
|
function Hide() {
|
||
|
|
show.value = false
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
.wrapper {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.block {
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
```
|