vue-tianditu2
Version:
68 lines (67 loc) • 1.89 kB
JavaScript
import { defineComponent as d, computed as p, h as a } from "vue";
import { IconClose as c } from "./icons.mjs";
/* empty css */
const h = d({
props: {
modelValue: { type: String, default: "" },
/** 显示在输入框的提示 */
placeholder: { type: String, default: "输入关键字搜索" },
/** 是否显示搜索按钮 */
searchBtn: { type: Boolean, default: !0 },
/** 是否显示导航按钮 */
routeBtn: { type: Boolean, default: !0 }
},
emits: {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
"update:modelValue": (e) => !0,
// 点击搜索按钮或回车时触发
// eslint-disable-next-line @typescript-eslint/no-unused-vars
search: (e) => !0
},
setup(e, { emit: n, slots: l }) {
let u = !1;
const t = p({
get() {
return e.modelValue;
},
set(o) {
n("update:modelValue", o);
}
});
return () => {
var o;
return a(
"div",
{
class: "tdt-search-box"
},
[
a("input", {
class: "tdt-search-box__input",
type: "text",
placeholder: e.placeholder,
value: t.value,
onCompositionstart: () => u = !0,
onCompositionend: () => u = !1,
onInput: (r) => setTimeout(() => !u && (t.value = r.target.value)),
onKeyup: (r) => r.code === "Enter" && n("search", t.value)
}),
a(
"i",
{
class: "tdt-search-box__close",
style: { display: e.modelValue ? "block" : "none" },
onClick: () => t.value = ""
},
[a(c)]
),
(o = l.default) == null ? void 0 : o.call(l)
]
);
};
}
});
export {
h as SearchBox
};
//# sourceMappingURL=SearchBox.mjs.map