WIP Изменен baseOptions
This commit is contained in:
@@ -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) {
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
@@ -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}"
|
||||||
|
|||||||
Reference in New Issue
Block a user