55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="header" @click="openSelect">
|
|
<view class="label">{{checkedInfo.text}}</view>
|
|
<u-icon v-if="!rotate" size="36" name="arrow-down" color="#D5AC66" />
|
|
<u-icon v-if="rotate" size="36" name="arrow-up" color="#D5AC66" />
|
|
</view>
|
|
<view v-if="show" class="body">
|
|
<view class="item" @click="select(item)" v-for="(item, index) in options" :key="item.value">
|
|
<text>{{item.text}}</text>
|
|
<u-icon style="transform: rotate(180deg);" v-if="checkedInfo.value === item.value" size="36" name="checkmark" color="#ee0a24" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
options: {
|
|
type: Array,
|
|
default: [],
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
checkedInfo: this.options[0],
|
|
show: false,
|
|
rotate: false,
|
|
}
|
|
},
|
|
methods: {
|
|
openSelect() {
|
|
this.show = !this.show;
|
|
this.rotate = !this.rotate;
|
|
},
|
|
select(item) {
|
|
console.log('11231', item);
|
|
this.checkedInfo = item;
|
|
this.show = false;
|
|
this.rotate = false;
|
|
this.$emit('change2', item);
|
|
},
|
|
},
|
|
onShow() {
|
|
console.log("滚动距离为：");
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url("dropdown.css");
|
|
</style> |