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
10 months ago
|
<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>
|