popup 弹窗 ​

<template>
  <jp-section-selector :current="-1" vibrate-short :list="['上方弹出', '下方弹出', '左方弹出', '右方弹出']" @change="change1"></jp-section-selector>

  <jp-popup ref="filter1" height="300px" popup-id="1" transition="slider" type="top">
    <view>你好你好</view>
  </jp-popup>

  <jp-popup ref="filter2" height="300px" popup-id="2" transition="slider" type="bottom">
    <view>你好你好</view>
  </jp-popup>

  <jp-popup ref="filter3" height="100vh" width="80vw" popup-id="3" transition="slider" type="left">
    <view>你好你好</view>
  </jp-popup>

  <jp-popup ref="filter4" height="100vh" width="80vw" popup-id="4" transition="slider" type="right">
    <view>你好你好</view>
  </jp-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const filter1 = ref<any>(null)
const filter2 = ref<any>(null)
const filter3 = ref<any>(null)
const filter4 = ref<any>(null)

onMounted(() => {
  filter1.value.show()
})

const change1 = (index: number) => {
  if (index === 0) {
    filter1.value.show()
  }
  if (index === 1) {
    filter2.value.show()
  }
  if (index === 2) {
    filter3.value.show()
  }
  if (index === 3) {
    filter4.value.show()
  }
}
</script>