qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Curtain 幕帘

幕帘组件，可以用来放置广告提示内容

使用指南

在 Taro 文件中引入组件

import { AtCurtain } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/curtain.scss";

一般用法

说明：

  • 该组件为受控组件，组件的开关状态由 isOpened 来控制，开发者需要通过 onClose 事件来更新 isOpened 值变化,从而关闭幕帘。
<template>
  <view>
    <AtCurtain
      :isOpened="isOpened"
      @close="onClose"
    >
      <image
        style='width:100%;height:250px'
        :src="curtainPng"
      />
    </AtCurtain>
    <AtButton
      @click="handleChange">
      右上关闭幕帘
    </AtButton>
  </view>
</template>

<script>
import curtainPng from '../../../assets/images/curtain.png'
import { AtCurtain, AtButton } from 'taro-ui-vue3'
export default {
  name: 'AtCurtainDemo',
  components: {
    AtCurtain, 
    AtButton
  },
  data() {
    return {
      isOpened: false,
      curtainPng,
    }
  },
  methods: {
    handleChange () {
      this.isOpened = true
    },

    onClose () {
      this.isOpened = false
    }
  },
}
</script>

参数

参数说明类型可选值默认值
isOpened是否开启Boolean-false
closeBtnPosition关闭图标位置String'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'bottom

事件

事件名称说明返回参数
onClose点击关闭按钮触发事件event