You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
<template>
|
|
<div class="g-rh-rh-quickconfirm">
|
|
<div class="choice_more c6">
|
|
<slot name="title"></slot>
|
|
<div class="dropdown_box" @touchmove="modalMove" v-if="dropdownShow">
|
|
<div class="dropdown_mask" @click="hideDropdown"></div>
|
|
<div class="dropdown" style="z-index: 999" :style="{ width, background: bgColor }">
|
|
<span class="sanjiao" :style="{ borderBottomColor: bgColor }"></span>
|
|
<slot name="content"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
dropdownShow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: "144px",
|
|
},
|
|
// 背景色自定义
|
|
bgColor: {
|
|
type: String,
|
|
default: "#fff",
|
|
},
|
|
},
|
|
methods: {
|
|
hideDropdown() {
|
|
this.$emit("hideDropdown", false);
|
|
},
|
|
modalMove() {
|
|
this.$emit("hideDropdown", false);
|
|
return false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.choice_more {
|
|
position: relative;
|
|
}
|
|
.dropdown_box {
|
|
/* position: absolute; */
|
|
}
|
|
.dropdown_mask {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 999;
|
|
background-color: transparent;
|
|
}
|
|
.dropdown {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 130%;
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
box-shadow: 0px 0px 6px 0px rgba(148, 148, 148, 0.5);
|
|
}
|
|
.dropdown .sanjiao {
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 0px;
|
|
top: -11px;
|
|
right: 6px;
|
|
border: 6px solid transparent;
|
|
}
|
|
</style>
|