77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
<template>
|
|
|
|
<div class="selectBox">
|
|
<div class="title">{{name}}</div>
|
|
<select
|
|
:class="classNam"
|
|
@change="onChange($event.target.value)"
|
|
>
|
|
<option v-if="selectedItem.length === 0" :value='phValue'>
|
|
{{placeholder}}
|
|
</option>
|
|
<option v-for="(item, id) in list"
|
|
:value="item"
|
|
:key="id"
|
|
:selected="selectedItem == item"
|
|
>
|
|
{{item}}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SelectO',
|
|
props: {
|
|
list: Array,
|
|
selectedItem: String,
|
|
classNam: {type: String, default: () => "sone"},
|
|
name: String,
|
|
},
|
|
data() {
|
|
return {
|
|
placeholder: '--',
|
|
phValue:'pvalue'
|
|
}
|
|
},
|
|
methods: {
|
|
onChange(selectedItem) {
|
|
if (selectedItem === this.phValue) return
|
|
//console.log('select onChange', selectedItem)
|
|
this.$emit('input', selectedItem)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
div.selectBox {
|
|
display: inline-block;
|
|
margin: 2px;
|
|
padding: 0px;
|
|
border: 1px solid rgba(155, 191, 208, 0.83);
|
|
|
|
}
|
|
|
|
select.sone {
|
|
width: 100px;
|
|
background: rgba(169, 175, 180, 0.35);
|
|
border: 1px solid aliceblue;
|
|
line-height: 20px;
|
|
margin: 0px;
|
|
|
|
}
|
|
|
|
.title {
|
|
margin: 0px;
|
|
|
|
width: 60px;
|
|
line-height: 20px;
|
|
display: inline-block;
|
|
background: rgba(155, 191, 208, 0.56);
|
|
}
|
|
|
|
</style> |