Making a platform selector, dropdown/radio button WIP

src/layout/components/Settings/Dropdown/Platform.vue

@@ -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>

src/layout/components/Settings/Dropdown/index.js

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

src/layout/components/Settings/index.vue

@@ -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)
     }
   }
 }