WIP Изменен baseOptions

This commit is contained in:
Daria Golova
2022-12-29 12:24:46 +03:00
parent 9fc796c9d7
commit c664f11bfb
3 changed files with 19 additions and 3 deletions

View File

@@ -2,6 +2,7 @@
.flex.flex-col.gap-y-2 .flex.flex-col.gap-y-2
.label.font-semibold.text-xxs.opacity-40(v-if="label") {{ label }} .label.font-semibold.text-xxs.opacity-40(v-if="label") {{ label }}
.base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative( .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
ref="select",
@click="open = !open", @click="open = !open",
:class="{'open': open, 'border-none': borderNone}", :class="{'open': open, 'border-none': borderNone}",
) )
@@ -16,7 +17,8 @@
) )
.items-container.mt-1( .items-container.mt-1(
@click="closeOptions", @click="closeOptions",
v-click-outside="leaveSelect" v-click-outside="leaveSelect",
:class="textClass"
) )
.item.py-2.px-4.cursor-pointer( .item.py-2.px-4.cursor-pointer(
v-for="item in items", v-for="item in items",
@@ -43,6 +45,7 @@ export default {
placeholderOpacity: Boolean, placeholderOpacity: Boolean,
center: Boolean, center: Boolean,
label: String, label: String,
textStyle: String,
}, },
emits: ["update:modelValue"], emits: ["update:modelValue"],
data() { data() {
@@ -59,6 +62,15 @@ export default {
this.$emit("update:modelValue", value); this.$emit("update:modelValue", value);
}, },
}, },
textClass() {
return this.textStyle
? {
[this.textStyle]: true,
}
: {
"text-base": true,
};
},
}, },
methods: { methods: {
clickItem(id, label) { clickItem(id, label) {

View File

@@ -8,7 +8,7 @@ export default {
name: "BaseOptions", name: "BaseOptions",
computed: { computed: {
parent() { parent() {
return this.$parent.$el; return this.$parent.$refs.select;
}, },
parentSize() { parentSize() {
return this.parent?.getBoundingClientRect(); return this.parent?.getBoundingClientRect();

View File

@@ -1,5 +1,9 @@
<template lang="pug"> <template lang="pug">
.base-select(@click="invertOpen", :class="{'open': open && !disable, 'border-none': borderNone}") .base-select(
@click="invertOpen",
:class="{'open': open && !disable, 'border-none': borderNone}",
ref="select"
)
.placeholder( .placeholder(
:class="{'value-color': value || placeholderOpacity, ...textClass}", :class="{'value-color': value || placeholderOpacity, ...textClass}",
:style="{'color': !disable || '#9ca3af', 'opacity': 1}" :style="{'color': !disable || '#9ca3af', 'opacity': 1}"