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