You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.1 KiB
51 lines
1.1 KiB
<template>
|
|
<el-dropdown
|
|
:hide-on-click="false"
|
|
:show-timeout="100"
|
|
trigger="click"
|
|
>
|
|
<el-button plain>
|
|
Platfroms({{ platforms.length }})
|
|
<i class="el-icon-caret-bottom el-icon--right" />
|
|
</el-button>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-checkbox-group
|
|
v-model="platforms"
|
|
style="padding: 5px 15px;"
|
|
>
|
|
<el-checkbox
|
|
v-for="item in platformsOptions"
|
|
:key="item.key"
|
|
:label="item.key"
|
|
>
|
|
{{ item.name }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
|
|
@Component({
|
|
name: 'PlatformDropdown'
|
|
})
|
|
export default class extends Vue {
|
|
@Prop({ required: true }) private value!: string[]
|
|
|
|
private platformsOptions = [
|
|
{ key: 'a-platform', name: 'a-platform' },
|
|
{ key: 'b-platform', name: 'b-platform' },
|
|
{ key: 'c-platform', name: 'c-platform' }
|
|
]
|
|
|
|
get platforms() {
|
|
return this.value
|
|
}
|
|
|
|
set platforms(value) {
|
|
this.$emit('input', value)
|
|
}
|
|
}
|
|
</script>
|
|
|