rollback
parent
4fdd9fbaae
commit
0f9db0e0ab
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="van-dropdown-menu">
|
||||
<div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item">
|
||||
<div class="van-dropdown-menu__title" :class="[ showSelectMultiple ? 'van-dropdown-menu__title--active van-dropdown-menu__title--down' : '' ]" @click="selectActive()">
|
||||
<div class="van-ellipsis">{{ selectName }}</div>
|
||||
</div>
|
||||
<div v-if="showSelectMultiple" class="btn_left">
|
||||
<span v-if="!all" @click="toggleAll()">全选</span>
|
||||
<span v-if="all" @click="toggleFalseAll()">取消全选</span>
|
||||
</div>
|
||||
<div v-if="showSelectMultiple" class="btn_true" @click="submitSelect()">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showSelectMultiple" class="van-dropdown-item van-dropdown-item--down" style="top: 40.9531px;">
|
||||
<div ref="content" class="van-popup van-popup--bottom van-dropdown-item__content">
|
||||
|
||||
<van-checkbox-group v-model="checked" res="checkboxGroup" @change="selectDataOptsChange">
|
||||
<div v-for="(item,index) in selectDataOpts" :key="typeof item === 'object' ? item[options.value] : item" role="button" :tabindex="index" class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
<van-checkbox :name="typeof item === 'object' ? item[options.value] : item" checked-color="var(--theme-color)">{{ index+1 }}.{{ typeof item === 'object' ? item[options.label] : item }}</van-checkbox></span>
|
||||
</div>
|
||||
</div>
|
||||
</van-checkbox-group>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script >
|
||||
import { Checkbox, CheckboxGroup, DropdownMenu, DropdownItem } from 'vant'
|
||||
import { PopupManager } from "element-ui/lib/utils/popup";
|
||||
|
||||
export default {
|
||||
name: 'CopyCode',
|
||||
components: {
|
||||
VanCheckbox: Checkbox,
|
||||
VanCheckboxGroup: CheckboxGroup,
|
||||
// eslint-disable-next-line
|
||||
VanDropdownMenu: DropdownMenu,
|
||||
// eslint-disable-next-line
|
||||
VanDropdownItem: DropdownItem
|
||||
},
|
||||
props: {
|
||||
selectName: {
|
||||
type: String,
|
||||
default: '全部'
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
otherName: {
|
||||
type: String,
|
||||
default: '供应商'
|
||||
},
|
||||
checkedList: {
|
||||
type: Array,
|
||||
default: function() { return [] }
|
||||
},
|
||||
selectDataOpts: {
|
||||
type: Array,
|
||||
default: function() { return [] }
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
})
|
||||
},
|
||||
multipleLimit: {
|
||||
type: Number,
|
||||
default: 50
|
||||
}
|
||||
// showSelectMultiple: {
|
||||
// type: Boolean,
|
||||
// default: false
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zIndex: PopupManager.nextZIndex(),
|
||||
showSelectMultiple: false,
|
||||
checked: [],
|
||||
all: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.checked = this.checkedList
|
||||
},
|
||||
methods: {
|
||||
selectActive() {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
this.showSelectMultiple = !this.showSelectMultiple
|
||||
},
|
||||
toggleAll() {
|
||||
const data = []
|
||||
for (let i = 0; i < this.selectDataOpts.length; i++) {
|
||||
data.push(typeof this.selectDataOpts[i] === 'object' ? this.selectDataOpts[i][this.options.value] : this.selectDataOpts[i])
|
||||
}
|
||||
this.all = true
|
||||
this.checked = data
|
||||
},
|
||||
toggleFalseAll() {
|
||||
this.all = false
|
||||
this.checked = []
|
||||
},
|
||||
submitSelect() {
|
||||
this.showSelectMultiple = false
|
||||
this.$emit('confirm', this.checked)
|
||||
// this.selectNameData()
|
||||
},
|
||||
cancelSelect() {
|
||||
this.showSelectMultiple = false
|
||||
},
|
||||
selectDataOptsChange(data) {
|
||||
this.selectNameData()
|
||||
},
|
||||
selectNameData() {
|
||||
if (!this.checked.length || this.selectDataOpts.length === this.checked.length) {
|
||||
this.$emit('selectMutiple', { checked: this.checked, name: '全部' + this.otherName })
|
||||
} else {
|
||||
this.$emit('selectMutiple', { checked: this.checked, name: '已选中（' + this.checked.length + ')' + this.otherName })
|
||||
}
|
||||
},
|
||||
onCopy() {
|
||||
},
|
||||
onError() {
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.copy{
|
||||
font-size:14px;
|
||||
}
|
||||
.blank{
|
||||
position: relative;
|
||||
width:100%;
|
||||
height:60px;
|
||||
}
|
||||
.btn_true{
|
||||
width:60px;
|
||||
height:30px;
|
||||
border-radius: 5px;
|
||||
background-color:var(--theme-color);
|
||||
color:#fff;
|
||||
position: absolute;
|
||||
text-align:center;
|
||||
line-height:30px;
|
||||
right:10px;
|
||||
font-size:14px;
|
||||
top:10px;
|
||||
}
|
||||
.btn_left{
|
||||
width:60px;
|
||||
height:30px;
|
||||
position: absolute;
|
||||
text-align:center;
|
||||
line-height:30px;
|
||||
left:10px;
|
||||
font-size:14px;
|
||||
top:10px;
|
||||
}
|
||||
.block_content{
|
||||
width:100%;
|
||||
}
|
||||
.flex_bottom{
|
||||
position: absolute ;
|
||||
bottom:-10px;
|
||||
left:0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue