466 lines
10 KiB
Vue
466 lines
10 KiB
Vue
|
|
<template>
|
|
<view class="zb-dropdown-item zb-dropdown-item--down" :style="[parent.style,{
|
|
zIndex:zIndex
|
|
}]"
|
|
v-show="showWrap">
|
|
<view class="zb-overlay"
|
|
@touchmove.stop.prevent="()=>{}"
|
|
:class="[{
|
|
'mask__visible':mask
|
|
}]" @click.stop="close">
|
|
</view>
|
|
<view class="zb-popup zb-popup--top zb-dropdown-item__content zb-popup-slide-top-leave-active"
|
|
:class="[{
|
|
'content--visible_Y':mask
|
|
}]">
|
|
<view style="min-height: 50px;">
|
|
<view
|
|
class="zb-cell zb-cell--clickable zb-dropdown-item__option"
|
|
v-for="item,index in options"
|
|
:key="index"
|
|
@click.stop="clickCell(item)"
|
|
>
|
|
<view class="zb-cell__title"
|
|
:class="[{
|
|
'active-cell__title':mValue===item.value
|
|
}]"
|
|
:style="[{
|
|
color:mValue===item.value?activeColor:''
|
|
}]"
|
|
>
|
|
<text>{{item.text}}</text>
|
|
</view>
|
|
<view class="zb-cell__value" v-if="mValue===item.value">
|
|
<text
|
|
class="iconfont icon-duihao active-icon"
|
|
:style="[{
|
|
color:showWrap?activeColor:''
|
|
}]"
|
|
></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name:'zb-dropdown-item',
|
|
options: {
|
|
virtualHost: true
|
|
},
|
|
props:{
|
|
value:{
|
|
type:[String,Number],
|
|
},
|
|
modelValue:{
|
|
type:[String,Number],
|
|
},
|
|
name:{
|
|
type:[String,Number],
|
|
required:true
|
|
},
|
|
options: {
|
|
type:Array,
|
|
default:()=>[]
|
|
}
|
|
},
|
|
|
|
inject: {
|
|
parent: {
|
|
default: null,
|
|
},
|
|
},
|
|
data(){
|
|
return{
|
|
zIndex:null,
|
|
activeColor:null,
|
|
mask: false,
|
|
showWrap: false,
|
|
title:null,
|
|
}
|
|
},
|
|
watch:{
|
|
// #ifndef VUE3
|
|
value:{
|
|
handler(newValue, oldValue) {
|
|
const item = this.options.find(
|
|
(option) => option.value === this.mValue
|
|
);
|
|
this.title = item.text||''
|
|
this.$emit('change', {...item});
|
|
},
|
|
},
|
|
// #endif
|
|
|
|
// #ifdef VUE3
|
|
modelValue:{
|
|
handler(newValue, oldValue) {
|
|
const item = this.options.find(
|
|
(option) => option.value === this.mValue
|
|
);
|
|
this.title = item.text||''
|
|
this.$emit('change', {...item});
|
|
},
|
|
},
|
|
// #endif
|
|
showWrap:{
|
|
handler (newLength, oldLength) {
|
|
// console.log('newLength=====',newLength)
|
|
},
|
|
immediate: true
|
|
},
|
|
options:{
|
|
handler(newValue, oldLength) {
|
|
if(newValue.length){
|
|
const match = this.options.filter(
|
|
(option) => option.value === this.mValue
|
|
);
|
|
let title = match.length ? match[0].text :'';
|
|
|
|
this.title = title
|
|
}else {
|
|
}
|
|
|
|
},
|
|
immediate: true,
|
|
deep:true
|
|
}
|
|
},
|
|
computed: {
|
|
mValue(){
|
|
return this.value!=null?this.value:this.modelValue
|
|
},
|
|
displayTitle:{
|
|
get(){
|
|
if (this.title) {
|
|
return this.title;
|
|
}
|
|
const match = this.options.filter(
|
|
(option) => option.value === this.mValue
|
|
);
|
|
let title = match.length ? match[0].text :'';
|
|
this.title = title
|
|
return title
|
|
},
|
|
set(val){
|
|
this.title = val
|
|
}
|
|
},
|
|
},
|
|
methods:{
|
|
/**
|
|
* 获取父元素实例
|
|
*/
|
|
getDropdown(name = 'zb-dropdown-menu') {
|
|
let parent = this.$parent
|
|
let parentName = parent.$options.name
|
|
while (parentName !== name) {
|
|
parent = parent.$parent
|
|
if (!parent) return false
|
|
parentName = parent.$options.name
|
|
}
|
|
return parent
|
|
},
|
|
clickCell(item){
|
|
this.changeStatus(this,'mask','showWrap',false)
|
|
if (item.value !== this.mValue) {
|
|
this.title = item.text
|
|
this.$emit('update:modelValue', item.value);
|
|
this.$emit('input', item.value);
|
|
}
|
|
},
|
|
changeStatus(item, param1, param2, status) {
|
|
item[param1] = status
|
|
this.watchTimer && clearTimeout(this.watchTimer)
|
|
this.watchTimer = setTimeout(() => {
|
|
item[param2] = status
|
|
}, status ? 20 : 200)
|
|
},
|
|
close(item,type){
|
|
let index = this.parent.childrenList.findIndex(item=>item.title===this.title)
|
|
this.parent.closeMask({},index)
|
|
|
|
},
|
|
moveHandle(){
|
|
return false
|
|
},
|
|
bindRelation() {
|
|
let obj = this.parent.childrenList.find(item=>{
|
|
let flag = item.name === this.name
|
|
return flag
|
|
})
|
|
if (!this.parent || obj) {
|
|
return;
|
|
}
|
|
// #ifndef H5
|
|
let obj1 = Object.assign(
|
|
this.$data,
|
|
this.$props
|
|
)
|
|
// #endif
|
|
// #ifdef H5
|
|
let obj1 = this
|
|
// #endif
|
|
const children = [...this.parent.childrenList, obj1];
|
|
this.parent.childrenList = children;
|
|
|
|
},
|
|
},
|
|
created(){
|
|
this.bindRelation()
|
|
let parentDropMenu = this.getDropdown()
|
|
this.activeColor= parentDropMenu.activeColor
|
|
this.zIndex= parentDropMenu.zIndex
|
|
},
|
|
beforeDestroy() {
|
|
if (this.parent) {
|
|
this.parent.childrenList = this.parent.childrenList.filter(
|
|
(item) => item.title !== this.title
|
|
);
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.zb-dropdown-item {
|
|
position: fixed;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
}
|
|
.zb-dropdown-menu {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.zb-popup {
|
|
&-slide-top-leave-active,
|
|
&-slide-left-leave-active,
|
|
&-slide-right-leave-active,
|
|
&-slide-bottom-leave-active {
|
|
transition-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
|
|
.zb-popup-slide-top-enter,
|
|
.zb-popup-slide-top-leave-active {
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
|
|
.zb-popup-slide-right-enter,
|
|
.zb-popup-slide-right-leave-active {
|
|
transform: translate3d(100%, -50%, 0);
|
|
}
|
|
|
|
.zb-popup-slide-bottom-enter,
|
|
.zb-popup-slide-bottom-leave-active {
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
|
|
.zb-dropdown-menu__bar {
|
|
position: relative;
|
|
display: flex;
|
|
height: 48px;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 12px #6465661f;
|
|
}
|
|
|
|
.zb-dropdown-menu__item {
|
|
display: flex;
|
|
flex: 1;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
//cursor: pointer;
|
|
}
|
|
|
|
.zb-dropdown-menu__title {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
padding: 0 8px;
|
|
color: #323233;
|
|
font-size: 15px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.zb-dropdown-menu__title::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -4px;
|
|
margin-top: -5px;
|
|
border: 3px solid;
|
|
border-color: transparent transparent #dcdee0 #dcdee0;
|
|
-webkit-transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
opacity: 0.8;
|
|
content: '';
|
|
}
|
|
|
|
.zb-dropdown-menu__title--down::after {
|
|
margin-top: -1px;
|
|
-webkit-transform: rotate(135deg);
|
|
transform: rotate(135deg);
|
|
}
|
|
.zb-dropdown-menu__title--active::after {
|
|
border-color: transparent transparent currentColor currentColor;
|
|
}
|
|
.zb-dropdown-menu__bar--opened {
|
|
z-index: 11;
|
|
}
|
|
.zb-dropdown-menu__title--active {
|
|
color: #ee0a24;
|
|
}
|
|
.zb-dropdown-item--down {
|
|
bottom: 0;
|
|
}
|
|
.zb-overlay {
|
|
z-index: 2003;
|
|
position: absolute;
|
|
animation-duration: 0.2s;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
transition: opacity 0.3s;
|
|
}
|
|
.mask__visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.zb-popup {
|
|
position: fixed;
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
background-color: #fff;
|
|
-webkit-transition: -webkit-transform 0.2s;
|
|
transition: -webkit-transform 0.2s;
|
|
transition: transform 0.2s;
|
|
transition: transform 0.2s, -webkit-transform 0.2s;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.zb-dropdown-item__content {
|
|
position: absolute;
|
|
max-height: 80%;
|
|
transition-duration: 0.2s;
|
|
z-index: 2006;
|
|
}
|
|
|
|
.zb-popup--top {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.content--visible_Y {
|
|
transform: translateY(0px);
|
|
}
|
|
|
|
|
|
@keyframes zb-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes zb-fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.zb-fade {
|
|
&-enter-active {
|
|
animation: 0.2s zb-fade-in both ease-out;
|
|
}
|
|
|
|
&-leave-active {
|
|
animation: 0.2s zb-fade-out both ease-in;
|
|
}
|
|
}
|
|
|
|
|
|
.zb-cell{
|
|
position: relative;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 10px 16px;
|
|
overflow: hidden;
|
|
color: #323233;
|
|
font-size: 14px;
|
|
align-items: center;
|
|
line-height: 24px;
|
|
background-color: #fff;
|
|
}
|
|
.zb-cell::after {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
content: ' ';
|
|
pointer-events: none;
|
|
right: 16px;
|
|
bottom: 0;
|
|
left: 16px;
|
|
border-bottom: 1px solid #ebedf0;
|
|
-webkit-transform: scaleY(0.5);
|
|
transform: scaleY(0.5);
|
|
}
|
|
.zb-cell--clickable{
|
|
//cursor: pointer;
|
|
}
|
|
|
|
|
|
@font-face {
|
|
font-family: "iconfont"; /* Project id 3711565 */
|
|
src:
|
|
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAJ0AAsAAAAABiwAAAIqAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAooRgE2AiQDCAsGAAQgBYRnBzAbggXIrrApw71IoCYMFA7zwg8FpwSIh//2a/fNnxXFNKlm0SyaaJYoYSsJQqJ0UrcOmUPc/Z+2G0vd+VMRqtMdYw3bmbT7/5emDL2VRVgUDiFxWIyiVpkbW96eX2X9dryc+m6f/lTOAgrwA7GsfRdK96BF0/qBWi9QALuHtVTCXs+LXIXhVQe5E88I1G1Y1TvePb7uTJ8CqTtzA/Z4kDXHU5YEnYmUlmVaqwpldG8Wr0qk5xQv0efj11ZMSEoFu+3scSfufJ2zoOh0OxQfOvP10McSSiiwoiMTV93lE33RxPfVg4Ep2pkFP7rdwBe79oT419mNTTBJK8EPb6kACW6LNtwY9SBRvqOrm+TinWt8/sfn7NN08ZbovwqOnx96s+2/aiOD7zxyMyxKdbUg+AfGLUjMRoaUmwRpNCnvVq07ObrseL/fsfbAueqhamBEtGIiQ6FqisrcEkoatlBWtYO6ZTuHGwZofZFrmPNEEHp9IGl7R6HXN5W5H5QM+0NZr3/U3UTrvIa5iLYYA8EYwkfIIlWTa0kU9hKTtgy4rnCL3GQ0B7ZhlWt7WCNPsaG5SxwRAmJVwa7wGJalAs0qx0iMVEQvTJOa3mJEqupsYSggUAyEHoFMRKlRQJbi911CiVYpwCB1W2aNjIYHNoMFUHt6DQ3cySuNOwmHEAQQplTArjQLlUoK0M2zcigiDOmIorZgOiRCdWN9s/q0E1BnOymcaYXyfZulgep0AA==') format('woff2')
|
|
}
|
|
|
|
.iconfont {
|
|
font-family: "iconfont" !important;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.icon-duihao:before {
|
|
content: "\eaf1";
|
|
}
|
|
.zb-cell__title, .zb-cell__value{
|
|
flex: 1;
|
|
}
|
|
|
|
.zb-cell__value{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
.active-icon,.active-cell__title{
|
|
color: #ee0a24;
|
|
}
|
|
|
|
</style>
|