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.
93 lines
1.6 KiB
Vue
93 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="choice_more c6" bindtap="showDropdown">
|
|
<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 }">
|
|
<span class="sanjiao"></span>
|
|
<slot name="content"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
created() {},
|
|
props: {
|
|
dropdownShow: {},
|
|
width: {
|
|
taype: String,
|
|
default: "144px",
|
|
},
|
|
},
|
|
methods: {
|
|
hideDropdown() {
|
|
console.log(123123);
|
|
this.$emit("update:dropdownShow", false);
|
|
},
|
|
|
|
/**
|
|
* 阻止滑动穿透
|
|
*
|
|
*
|
|
*/
|
|
modalMove() {
|
|
return false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.choice_more {
|
|
position: relative;
|
|
}
|
|
.dropdown_box {
|
|
/* position: absolute; */
|
|
}
|
|
.dropdown_mask {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: transparent;
|
|
}
|
|
.dropdown {
|
|
position: absolute;
|
|
right:0;
|
|
top: 120%;
|
|
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: -12px;
|
|
right: 24px;
|
|
border: 6px solid #fff;
|
|
border-top: 6px solid transparent;
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
}
|
|
.dropdown .sanjiao {
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 0px;
|
|
top: -12px;
|
|
right: 8px;
|
|
border: 6px solid #fff;
|
|
border-top: 6px solid transparent;
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
}
|
|
</style>
|