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.
71 lines
1.3 KiB
71 lines
1.3 KiB
<template> |
|
<view class="PullDownBox"> |
|
<view @click="() => handleShowPullDown()" class="Pulldown-title-container"> |
|
<!-- 标题显示内容 --> |
|
<view class="Pulldown-title"> |
|
<slot name="title"></slot> |
|
</view> |
|
<view :class="{'icon': true,'normal':isShowPullDownBox, 'active': !isShowPullDownBox, 'flex-c-c': true}"> |
|
<u-icon name="arrow-down" color="#2979ff" size="28"></u-icon> |
|
</view> |
|
</view> |
|
|
|
<template v-if="isShowPullDownBox"> |
|
<view class="Pulldown_content"> |
|
<slot name="content"></slot> |
|
</view> |
|
</template> |
|
</view> |
|
|
|
|
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { ref, defineExpose } from 'vue'; |
|
|
|
/** 是否显示下拉框 */ |
|
const isShowPullDownBox = ref(false) |
|
|
|
/** 是否显示下拉内容 */ |
|
const handleShowPullDown = (flag = !isShowPullDownBox.value) => { |
|
isShowPullDownBox.value = flag |
|
} |
|
|
|
defineExpose({ isShowPullDownBox, handleShowPullDown }) |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import url(@/utils/style/common.scss); |
|
|
|
.PullDownBox { |
|
background: #fff; |
|
border-radius: 15upx; |
|
} |
|
|
|
.Pulldown-title-container { |
|
display: flex; |
|
padding: 15upx; |
|
} |
|
|
|
.Pulldown-title { |
|
flex: 1; |
|
} |
|
|
|
.icon { |
|
padding: 0 10upx; |
|
flex: none; |
|
transition: all 0.2s; |
|
} |
|
|
|
.Pulldown_content { |
|
padding: 10upx; |
|
} |
|
|
|
.normal { |
|
transform: rotate(0deg); |
|
} |
|
|
|
.active { |
|
transform: rotate(180deg); |
|
} |
|
</style> |