更新记录

1.0.0（2024-05-26） 下载此版本

初次上传

平台兼容性

shmilyr-popup 可手势关闭弹窗

参数说明

插槽

事件

使用示例

<template>
  <view>
    <button type="button" @click="visible1 = true">底部可手势弹窗</button>
    <button type="button" @click="visible2 = true">左侧可手势弹窗</button>
    <button type="button" @click="visible3 = true">顶部可手势弹窗</button>
    <button type="button" @click="visible4 = true">右侧可手势弹窗</button>
    <button type="button" @click="visible5 = true">模糊背景弹窗</button>
    <button type="button" @click="visible6 = true">不可使用手势关闭弹窗</button>
    <button type="button" @click="visible7 = true">中间弹窗</button>
    <button type="button" @click="visible8 = true">模态框</button>
    <button type="button" @click="visible9 = true">模态框自定义按钮</button>
    <button type="button" @click="visible10 = true">无取消按钮</button>
    <!-- Pupup Example -->
    <shmilyr-popup
      v-model="visible1"
      placement="bottom"
    >
      <view style="height: 60vh;">底部可手势弹窗</view>
    </shmilyr-popup>
    <shmilyr-popup
      v-model="visible2"
      placement="left"
    >
      <view style="width: 40vw;">左侧可手势弹窗</view>
    </shmilyr-popup>
    <shmilyr-popup
      v-model="visible3"
      placement="top"
    >
      <view style="height: 60vh;">顶部可手势弹窗</view>
    </shmilyr-popup>
    <shmilyr-popup
      v-model="visible4"
      placement="right"
    >
      <view style="width: 40vw;">右侧可手势弹窗</view>
    </shmilyr-popup>
    <shmilyr-popup
      v-model="visible7"
      placement="center"
    >
      <view style="width: 70vw;height:300rpx;">中间弹窗(中间弹窗时不可使用手势关闭)</view>
    </shmilyr-popup>
    <shmilyr-popup
      v-model="visible5"
      placement="bottom"
      :blur="5"
    >
      <view style="height: 60vh;">模糊背景弹窗</view>
    </shmilyr-popup>
    <shmilyr-popup
      v-model="visible6"
      placement="bottom"
      :enable-gesture="false"
    >
      <view style="height: 60vh;">不可使用手势关闭弹窗</view>
    </shmilyr-popup>
    <shmilyr-popup
      v-model="visible8"
      placement="center"
      modal
      title="弹窗标题"
      content="消息提示模态框"
      modalCancelText="取消"
      modalConfirmText="确认"
      modalCancelColor="#B1B7C6"
      modalConfirmColor="#FED309"
      modalWidth="70vw"
    >
    </shmilyr-popup>
    <shmilyr-popup
      v-model="visible9"
      placement="center"
      modal
      content="自定义按钮"
    >
      <template #modal-footer>
        <view style="padding: 20rpx;width: 100%;">
          <button type="primary" style="border-radius: 100rpx;" @click="visible9 = false">确认</button>
        </view>
      </template>
    </shmilyr-popup>
    <shmilyr-popup
      v-model="visible10"
      placement="center"
      modal
      content="无取消按钮"
      :modal-cancel-button="false"
    ></shmilyr-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
      visible6: false,
      visible7: false,
      visible8: false,
      visible9: false,
      visible10: false,
    }
  }
}
</script>