60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<template>
|
|
<form-field>
|
|
<label>{{label}}</label>
|
|
<select @change="handleChange">
|
|
<option :selected="!modelValue" v-if="emptyLabel" value>{{emptyLabel}}</option>
|
|
<option
|
|
:selected="modelValue === item.value"
|
|
v-for="item in items"
|
|
:key="item"
|
|
:value="item.value"
|
|
>{{item.label}}</option>
|
|
</select>
|
|
</form-field>
|
|
</template>
|
|
|
|
<script>
|
|
import FormField from "./FormField.vue";
|
|
export default {
|
|
components: { FormField },
|
|
props: ["items", "modelValue", "label", "emptyLabel"],
|
|
methods: {
|
|
handleChange(e) {
|
|
this.$emit("update:modelValue", parseInt(e.target.value));
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
select {
|
|
flex: 1;
|
|
display: block;
|
|
color: #ccc;
|
|
line-height: 1.3;
|
|
padding: 0.6em 1.4em 0.5em 0.8em;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
border: none;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background-color: #121212;
|
|
}
|
|
select::-ms-expand {
|
|
display: none;
|
|
}
|
|
select:hover {
|
|
border-color: #888;
|
|
}
|
|
select:focus {
|
|
color: #ccc;
|
|
outline: none;
|
|
}
|
|
select option {
|
|
font-weight: normal;
|
|
}
|
|
</style>
|