85 lines
1.8 KiB
Vue
85 lines
1.8 KiB
Vue
<template>
|
|
<a-select v-bind="$attrs" v-model="innerValue" show-arrow @change="onChange">
|
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
|
<div slot="dropdownRender" slot-scope="menu">
|
|
<v-nodes :vnodes="menu" />
|
|
<a-divider style="margin: 0;" />
|
|
<div
|
|
style="padding: 4px 12px; cursor: pointer;"
|
|
@mousedown="e => e.preventDefault()"
|
|
>
|
|
<a-checkbox v-model="allVal" @change="checkedAll"><span @click.prevent="handleClick">ALL</span></a-checkbox>
|
|
</div>
|
|
</div>
|
|
</a-select>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: [String, Number, Array],
|
|
},
|
|
allChecked: {
|
|
type: Boolean,
|
|
default:false
|
|
}
|
|
},
|
|
components: {
|
|
VNodes: {
|
|
functional: true,
|
|
render: (h, ctx) => ctx.props.vnodes,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
innerValue: this.value,
|
|
allVal:this.allChecked
|
|
}
|
|
},
|
|
methods: {
|
|
checkedAll(val) {
|
|
this.$emit('changeAll', val.target.checked)
|
|
},
|
|
handleClick(e) {
|
|
console.log("dfasdfasfad", e);
|
|
this.allVal = !this.allVal
|
|
this.$emit('changeAll', this.allVal)
|
|
},
|
|
onChange(val) {
|
|
this.$emit('input', val)
|
|
this.$emit('change', val)
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(val) {
|
|
this.innerValue = val
|
|
},
|
|
deep: true
|
|
},
|
|
allChecked: {
|
|
handler(val) {
|
|
this.allVal = val
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.ant-select {
|
|
width: 100%;
|
|
.ant-select-arrow-icon {
|
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
}
|
|
&-open {
|
|
.ant-select-arrow-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
.ant-select-dropdown-content{
|
|
position: relative;
|
|
background: #03353f;
|
|
}
|
|
</style>
|