fix select postion
This commit is contained in:
parent
6c966e8424
commit
13f45bcfef
@ -33,7 +33,8 @@ const _sfc_main = defineComponent({
|
|||||||
allowClear: { type: Boolean, default: false },
|
allowClear: { type: Boolean, default: false },
|
||||||
showSearch: { type: Boolean, default: false },
|
showSearch: { type: Boolean, default: false },
|
||||||
contentClass: null,
|
contentClass: null,
|
||||||
contentStyle: null
|
contentStyle: null,
|
||||||
|
position: { default: "top" }
|
||||||
},
|
},
|
||||||
emits: ["update:modelValue", "change", "search"],
|
emits: ["update:modelValue", "change", "search"],
|
||||||
setup(__props, { emit: emits }) {
|
setup(__props, { emit: emits }) {
|
||||||
@ -180,6 +181,7 @@ const _sfc_main = defineComponent({
|
|||||||
disabledInput: !__props.showSearch,
|
disabledInput: !__props.showSearch,
|
||||||
size: __props.size,
|
size: __props.size,
|
||||||
class: normalizeClass({ "layui-unselect": true }),
|
class: normalizeClass({ "layui-unselect": true }),
|
||||||
|
position: __props.position,
|
||||||
onRemove: handleRemove,
|
onRemove: handleRemove,
|
||||||
onClear: handleClear,
|
onClear: handleClear,
|
||||||
onInputValueChange: handleSearch,
|
onInputValueChange: handleSearch,
|
||||||
@ -199,7 +201,7 @@ const _sfc_main = defineComponent({
|
|||||||
}, null, 8, ["class"])
|
}, null, 8, ["class"])
|
||||||
]),
|
]),
|
||||||
_: 1
|
_: 1
|
||||||
}, 8, ["modelValue", "input-value", "allow-clear", "placeholder", "collapseTagsTooltip", "minCollapsedNum", "disabled", "disabledInput", "size"])) : (openBlock(), createBlock(_sfc_main$4, {
|
}, 8, ["modelValue", "input-value", "allow-clear", "placeholder", "collapseTagsTooltip", "minCollapsedNum", "disabled", "disabledInput", "size", "position"])) : (openBlock(), createBlock(_sfc_main$4, {
|
||||||
key: 1,
|
key: 1,
|
||||||
size: __props.size,
|
size: __props.size,
|
||||||
disabled: __props.disabled,
|
disabled: __props.disabled,
|
||||||
|
@ -34,7 +34,8 @@ const _sfc_main = defineComponent({
|
|||||||
collapseTagsTooltip: { type: Boolean },
|
collapseTagsTooltip: { type: Boolean },
|
||||||
size: { default: "md" },
|
size: { default: "md" },
|
||||||
tagProps: null,
|
tagProps: null,
|
||||||
disabledInput: { type: Boolean }
|
disabledInput: { type: Boolean },
|
||||||
|
position: { default: "top" }
|
||||||
},
|
},
|
||||||
emits: [
|
emits: [
|
||||||
"update:modelValue",
|
"update:modelValue",
|
||||||
@ -247,7 +248,8 @@ const _sfc_main = defineComponent({
|
|||||||
isDark: false,
|
isDark: false,
|
||||||
trigger: "hover",
|
trigger: "hover",
|
||||||
popperStyle: "padding:6px",
|
popperStyle: "padding:6px",
|
||||||
disabled: !__props.collapseTagsTooltip
|
disabled: !__props.collapseTagsTooltip,
|
||||||
|
position: __props.position
|
||||||
}, {
|
}, {
|
||||||
content: withCtx(() => [
|
content: withCtx(() => [
|
||||||
createElementVNode("div", _hoisted_3, [
|
createElementVNode("div", _hoisted_3, [
|
||||||
@ -283,7 +285,7 @@ const _sfc_main = defineComponent({
|
|||||||
}, 16, ["size"])
|
}, 16, ["size"])
|
||||||
]),
|
]),
|
||||||
_: 1
|
_: 1
|
||||||
}, 8, ["disabled"])) : createCommentVNode("", true),
|
}, 8, ["disabled", "position"])) : createCommentVNode("", true),
|
||||||
createElementVNode("input", {
|
createElementVNode("input", {
|
||||||
ref_key: "inputRefEl",
|
ref_key: "inputRefEl",
|
||||||
ref: inputRefEl,
|
ref: inputRefEl,
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { w as withInstall } from "../badge/index2.js";
|
import { w as withInstall } from "../badge/index2.js";
|
||||||
import { defineComponent, useSlots, ref, toRef, shallowRef, computed, watch, onMounted, openBlock, createBlock, Teleport, withDirectives, createVNode, Transition, withCtx, createElementVNode, normalizeClass, normalizeStyle, renderSlot, createTextVNode, toDisplayString, vShow, createCommentVNode, nextTick, getCurrentInstance, createElementBlock, Fragment, normalizeProps, mergeProps, unref } from "vue";
|
import { defineComponent, useSlots, ref, toRef, shallowRef, computed, watch, onMounted, openBlock, createBlock, Teleport, withDirectives, createVNode, Transition, withCtx, createElementVNode, normalizeClass, normalizeStyle, renderSlot, createTextVNode, toDisplayString, vShow, createCommentVNode, nextTick, getCurrentInstance, createElementBlock, Fragment, mergeProps, unref } from "vue";
|
||||||
import { o as onClickOutside, a as useResizeObserver, c as useEventListener, b as useThrottleFn } from "../_chunks/@vueuse/index.js";
|
import { o as onClickOutside, a as useResizeObserver, c as useEventListener, b as useThrottleFn } from "../_chunks/@vueuse/index.js";
|
||||||
var index$1 = /* @__PURE__ */ (() => ".lay-tooltip-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}\n")();
|
var index$1 = /* @__PURE__ */ (() => ".lay-tooltip-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}\n")();
|
||||||
var index = /* @__PURE__ */ (() => '.layui-popper{position:fixed;padding:10px;border-radius:3px;word-wrap:break-word;min-width:12px;min-height:12px;font-size:14px;box-sizing:border-box;box-shadow:0 2px 12px #00000026;background-color:#fff;color:#3a3a3a;border:1px solid #cecece;max-width:300px;z-index:99999}.layui-popper[position=top]{margin-bottom:6px}.layui-popper[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#cecece}.layui-popper[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#fff}.layui-popper[position=bottom]{margin-top:6px}.layui-popper[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#cecece}.layui-popper[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#fff}.layui-popper[position=right]{margin-left:6px}.layui-popper[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#cecece}.layui-popper[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#fff}.layui-popper[position=left]{margin-right:6px}.layui-popper[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#cecece}.layui-popper[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#fff}.layui-popper[position=top] .layui-popper-arrow,.layui-popper[position=bottom] .layui-popper-arrow{left:-moz-calc(44%);left:-webkit-calc(44%);left:calc(50% - 6px)}.layui-popper[position=left] .layui-popper-arrow,.layui-popper[position=right] .layui-popper-arrow{top:-moz-calc(44%);top:-webkit-calc(44%);top:calc(50% - 6px)}.layui-popper:after{content:" ";position:absolute;display:block}.layui-popper[position=top]:after{bottom:-7px;left:0;width:100%;height:7px}.layui-popper[position=bottom]:after{top:-7px;left:0;width:100%;height:7px}.layui-popper[position=left]:after{right:-7px;bottom:0;height:100%;width:7px}.layui-popper[position=right]:after{left:-7px;bottom:0;height:100%;width:7px}.layui-popper .layui-popper-arrow,.layui-popper .layui-popper-arrow:after{position:absolute;display:block;width:0;height:0;border-width:6px;border-style:solid;border-color:transparent}.layui-popper .layui-popper-arrow:after{content:" "}.layui-popper.layui-dark{background-color:#353535;color:#fff;border:1px solid #353535}.layui-popper.layui-dark[position=top]{margin-bottom:6px}.layui-popper.layui-dark[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#353535}.layui-popper.layui-dark[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#353535}.layui-popper.layui-dark[position=bottom]{margin-top:6px}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#353535}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#353535}.layui-popper.layui-dark[position=right]{margin-left:6px}.layui-popper.layui-dark[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#353535}.layui-popper.layui-dark[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#353535}.layui-popper.layui-dark[position=left]{margin-right:6px}.layui-popper.layui-dark[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#353535}.layui-popper.layui-dark[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#353535}\n')();
|
var index = /* @__PURE__ */ (() => '.layui-popper{position:fixed;padding:10px;border-radius:3px;word-wrap:break-word;min-width:12px;min-height:12px;font-size:14px;box-sizing:border-box;box-shadow:0 2px 12px #00000026;background-color:#fff;color:#3a3a3a;border:1px solid #cecece;max-width:300px;z-index:99999}.layui-popper[position=top]{margin-bottom:6px}.layui-popper[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#cecece}.layui-popper[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#fff}.layui-popper[position=bottom]{margin-top:6px}.layui-popper[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#cecece}.layui-popper[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#fff}.layui-popper[position=right]{margin-left:6px}.layui-popper[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#cecece}.layui-popper[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#fff}.layui-popper[position=left]{margin-right:6px}.layui-popper[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#cecece}.layui-popper[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#fff}.layui-popper[position=top] .layui-popper-arrow,.layui-popper[position=bottom] .layui-popper-arrow{left:-moz-calc(44%);left:-webkit-calc(44%);left:calc(50% - 6px)}.layui-popper[position=left] .layui-popper-arrow,.layui-popper[position=right] .layui-popper-arrow{top:-moz-calc(44%);top:-webkit-calc(44%);top:calc(50% - 6px)}.layui-popper:after{content:" ";position:absolute;display:block}.layui-popper[position=top]:after{bottom:-7px;left:0;width:100%;height:7px}.layui-popper[position=bottom]:after{top:-7px;left:0;width:100%;height:7px}.layui-popper[position=left]:after{right:-7px;bottom:0;height:100%;width:7px}.layui-popper[position=right]:after{left:-7px;bottom:0;height:100%;width:7px}.layui-popper .layui-popper-arrow,.layui-popper .layui-popper-arrow:after{position:absolute;display:block;width:0;height:0;border-width:6px;border-style:solid;border-color:transparent}.layui-popper .layui-popper-arrow:after{content:" "}.layui-popper.layui-dark{background-color:#353535;color:#fff;border:1px solid #353535}.layui-popper.layui-dark[position=top]{margin-bottom:6px}.layui-popper.layui-dark[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#353535}.layui-popper.layui-dark[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#353535}.layui-popper.layui-dark[position=bottom]{margin-top:6px}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#353535}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#353535}.layui-popper.layui-dark[position=right]{margin-left:6px}.layui-popper.layui-dark[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#353535}.layui-popper.layui-dark[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#353535}.layui-popper.layui-dark[position=left]{margin-right:6px}.layui-popper.layui-dark[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#353535}.layui-popper.layui-dark[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#353535}\n')();
|
||||||
@ -360,12 +360,15 @@ const _sfc_main = defineComponent({
|
|||||||
renderSlot(_ctx.$slots, "default")
|
renderSlot(_ctx.$slots, "default")
|
||||||
])
|
])
|
||||||
], 512)) : renderSlot(_ctx.$slots, "default", { key: 1 }),
|
], 512)) : renderSlot(_ctx.$slots, "default", { key: 1 }),
|
||||||
isMounted.value ? (openBlock(), createBlock(_sfc_main$1, normalizeProps(mergeProps({ key: 2 }, unref(innerProps))), {
|
isMounted.value ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
|
||||||
|
key: 2,
|
||||||
|
positio: __props.position
|
||||||
|
}, unref(innerProps)), {
|
||||||
default: withCtx(() => [
|
default: withCtx(() => [
|
||||||
renderSlot(_ctx.$slots, "content")
|
renderSlot(_ctx.$slots, "content")
|
||||||
]),
|
]),
|
||||||
_: 3
|
_: 3
|
||||||
}, 16)) : createCommentVNode("", true)
|
}, 16, ["positio"])) : createCommentVNode("", true)
|
||||||
], 64);
|
], 64);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
23
lib/index.js
23
lib/index.js
File diff suppressed because one or more lines are too long
@ -44,6 +44,7 @@ export interface SelectProps {
|
|||||||
showSearch?: boolean;
|
showSearch?: boolean;
|
||||||
contentClass?: string | Array<string | object> | object;
|
contentClass?: string | Array<string | object> | object;
|
||||||
contentStyle?: StyleValue;
|
contentStyle?: StyleValue;
|
||||||
|
position?:string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SelectEmits {
|
export interface SelectEmits {
|
||||||
@ -61,6 +62,7 @@ const props = withDefaults(defineProps<SelectProps>(), {
|
|||||||
disabled: false,
|
disabled: false,
|
||||||
multiple: false,
|
multiple: false,
|
||||||
size: "md",
|
size: "md",
|
||||||
|
position:"top"
|
||||||
});
|
});
|
||||||
|
|
||||||
const slots = useSlots();
|
const slots = useSlots();
|
||||||
@ -215,6 +217,7 @@ provide("searchMethod", props.searchMethod);
|
|||||||
:disabledInput="!showSearch"
|
:disabledInput="!showSearch"
|
||||||
:size="size"
|
:size="size"
|
||||||
:class="{ 'layui-unselect': true }"
|
:class="{ 'layui-unselect': true }"
|
||||||
|
:position="position"
|
||||||
@remove="handleRemove"
|
@remove="handleRemove"
|
||||||
@clear="handleClear"
|
@clear="handleClear"
|
||||||
@input-value-change="handleSearch"
|
@input-value-change="handleSearch"
|
||||||
|
@ -40,12 +40,14 @@ export interface TagInputProps {
|
|||||||
size?: TagInputSize;
|
size?: TagInputSize;
|
||||||
tagProps?: TagProps;
|
tagProps?: TagProps;
|
||||||
disabledInput?: boolean;
|
disabledInput?: boolean;
|
||||||
|
position?:string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<TagInputProps>(), {
|
const props = withDefaults(defineProps<TagInputProps>(), {
|
||||||
placeholder: undefined,
|
placeholder: undefined,
|
||||||
minCollapsedNum: 0,
|
minCollapsedNum: 0,
|
||||||
size: "md",
|
size: "md",
|
||||||
|
position:"top"
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
@ -274,6 +276,7 @@ defineExpose({
|
|||||||
trigger="hover"
|
trigger="hover"
|
||||||
popperStyle="padding:6px"
|
popperStyle="padding:6px"
|
||||||
:disabled="!collapseTagsTooltip"
|
:disabled="!collapseTagsTooltip"
|
||||||
|
:position="position"
|
||||||
>
|
>
|
||||||
<LayTag v-bind="tagProps" key="more" :closable="false" :size="size">
|
<LayTag v-bind="tagProps" key="more" :closable="false" :size="size">
|
||||||
+{{ moreCount }}...
|
+{{ moreCount }}...
|
||||||
|
@ -108,7 +108,7 @@ onMounted(() => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<slot v-else></slot>
|
<slot v-else></slot>
|
||||||
<lay-popper v-if="isMounted" v-bind="innerProps">
|
<lay-popper :positio="position" v-if="isMounted" v-bind="innerProps">
|
||||||
<slot name="content"></slot>
|
<slot name="content"></slot>
|
||||||
</lay-popper>
|
</lay-popper>
|
||||||
</template>
|
</template>
|
||||||
|
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user