Making a platform selector, dropdown/radio button WIP

This commit is contained in:
Chad Derya 2019-08-30 17:55:46 +01:00
parent 90e790cee4
commit 0902be2aff
3 changed files with 66 additions and 2 deletions

View File

@ -0,0 +1,49 @@
<template>
<el-dropdown :show-timeout="100" trigger="click">
<el-button plain>
{{ platform_selection === 'DE' ? 'Platform: DE' : 'Platform: UK' }}
<i class="el-icon-caret-bottom el-icon--right" />
</el-button>
<el-dropdown-menu slot="dropdown" class="no-padding dropdown-menu">
<el-dropdown-item>
<el-radio-group v-model="platform_selection" style="padding: 10px;">
<el-radio :value="DE">
DE
</el-radio>
<el-radio :value="UK">
UK
</el-radio>
</el-radio-group>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
props: {
value: {
type: String,
default: 'DE'
}
},
computed: {
platform_selection: {
get() {
console.log(this.value)
return this.value
},
set(val) {
console.log(this.value)
this.$emit('input', val)
}
}
}
}
</script>
<style lang="scss" scoped>
.dropdown-menu {
z-index: 40000 !important;
}
</style>

View File

@ -0,0 +1 @@
export { default as PlatformDropdown } from './Platform'

View File

@ -23,17 +23,28 @@
<el-switch v-model="sidebarLogo" class="drawer-switch" />
</div>
<div class="drawer-item">
<span>Select Platform</span>
<PlatformDropdown v-model="postForm.platform_selection" />
</div>
</div>
</div>
</template>
<script>
import ThemePicker from '@/components/ThemePicker'
import { PlatformDropdown } from './Dropdown'
const defaultForm = {
platform_selection: 'DE'
}
export default {
components: { ThemePicker },
components: { ThemePicker, PlatformDropdown },
data() {
return {}
return {
postForm: Object.assign({}, defaultForm)
}
},
computed: {
fixedHeader: {
@ -76,6 +87,9 @@ export default {
key: 'theme',
value: val
})
},
selectPlatform(val) {
console.log(val)
}
}
}