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
1 year ago
|
<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>
|