Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <template>
<select
:aria-label="selectSpecs['label']"
:style="{'background-color': selectSpecs['bgColor'], 'color': selectSpecs['fontColor'], 'font-family': selectSpecs['fontWeight']}"
class="shadow-none border-0 w-auto custom-select cursor-pointer"
@input="handleInput"
:value="value"
:class="selectSpecs['arrowPos']">
<option
v-for="(op, index) in selectSpecs['options']"
class="cursor-pointer"
:class="{hidden: selectSpecs['isHidden'] && index === 0}"
:selected="index === 0"
:key="index"
:value="op">
{{ op }}
</option>
</select>
</template>
<script>
export default {
props: ['selectSpecs', 'value'],
methods: {
handleInput(e) {
this.$emit('input', e.target.value);
}
}
}
</script>
<style lang="scss" scoped>
.hidden {
display: none;
}
option {
width: 2rem;
}
.cursor-pointer {
cursor: pointer;
}
.custom-select {
font-size: 1.2rem;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
background-image: url("~/assets/svgs/arrow.svg");
background-repeat: no-repeat, repeat;
background-size: 1.2rem 1.2rem;
}
.custom-select.left {
margin-left: 0.5rem;
padding-left: 1rem;
background-position: left 0em top 50%, 0 0;
}
.custom-select.right {
padding-right: 1rem;
background-position: right 0em top 50%, 0 0;
}
@include media-breakpoint-down(xssm) {
.custom-select.left {
margin-left: 0;
}
}
</style>
|