通过遮罩层,可以强调部分内容。
基本使用
显示遮罩层
html
<iui-mask v-model="visible"></iui-mask>
<script setup>
import { ref } from "vue";
const visible = ref(false);
const onClick = () => {
visible.value = true;
};
</script>
<iui-mask v-model="visible"></iui-mask>
<script setup>
import { ref } from "vue";
const visible = ref(false);
const onClick = () => {
visible.value = true;
};
</script>
函数调用
通过 ref
调用遮罩层的方法
html
<iui-mask ref="mask">
<view :style="{ width: '200px', height: '160px' }">
<iui-image src="example.png"></iui-image>
</view>
</iui-mask>
<script setup>
import { ref } from "vue";
const mask = ref(null);
onMounted(() => {
mask.value.show();
});
</script>
<iui-mask ref="mask">
<view :style="{ width: '200px', height: '160px' }">
<iui-image src="example.png"></iui-image>
</view>
</iui-mask>
<script setup>
import { ref } from "vue";
const mask = ref(null);
onMounted(() => {
mask.value.show();
});
</script>
API
<Mask>
props<Mask>
methods