@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
260 lines (259 loc) • 8.44 kB
JavaScript
import { reactive, computed, ref, onMounted, toRefs, openBlock, createElementBlock, normalizeStyle, toDisplayString, createCommentVNode, renderSlot, createElementVNode, normalizeClass, withModifiers, withDirectives, createBlock, resolveDynamicComponent, vShow } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { r as renderIcon } from "./renderIcon-3d0fd47c.js";
import { CircleClose } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { create, translate } = createComponent("searchbar");
const _sfc_main = create({
props: {
modelValue: {
type: [String, Number],
default: ""
},
inputType: {
type: String,
default: "textarea"
},
label: {
type: String,
default: ""
},
maxLength: {
type: [String, Number],
default: "9999"
},
placeholder: {
type: String,
default: ""
},
clearable: {
type: Boolean,
default: true
},
clearIcon: {
type: Object,
default: () => CircleClose
},
background: {
type: String,
default: ""
},
inputBackground: {
type: String,
default: ""
},
focusStyle: {
type: Object,
// eslint-disable-next-line @typescript-eslint/no-empty-function
default: () => {
}
},
autofocus: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
inputAlign: {
type: String,
default: "left"
}
},
emits: [
"change",
"update:modelValue",
"blur",
"focus",
"clear",
"search",
"click-input",
"click-left-icon",
"click-right-icon"
],
setup(props, { slots, emit }) {
const state = reactive({
active: false
});
const searchbarStyle = computed(() => {
return {
background: props.background
};
});
const inputSearchbarStyle = computed(() => {
return {
background: props.inputBackground
};
});
const valueChange = (event) => {
const input = event.target;
let val = input.value;
if (props.maxLength && val.length > Number(props.maxLength)) {
val = val.slice(0, Number(props.maxLength));
}
emit("update:modelValue", val, event);
emit("change", val, event);
};
const focusCss = ref({});
const valueFocus = (event) => {
const input = event.target;
let value = input.value;
state.active = true;
focusCss.value = props.focusStyle;
emit("focus", value, event);
};
const valueBlur = (event) => {
setTimeout(() => {
state.active = false;
}, 0);
const input = event.target;
let value = input.value;
if (props.maxLength && value.length > Number(props.maxLength)) {
value = value.slice(0, Number(props.maxLength));
}
focusCss.value = {};
emit("blur", value, event);
};
const handleClear = (event) => {
emit("update:modelValue", "", event);
emit("change", "", event);
emit("clear", "");
};
const handleSubmit = () => {
emit("search", props.modelValue);
};
const clickInput = (event) => {
emit("click-input", event);
};
const leftIconClick = (event) => {
emit("click-left-icon", props.modelValue, event);
};
const rightIconClick = (event) => {
emit("click-right-icon", props.modelValue, event);
};
const styleSearchbar = computed(() => {
const style = {
textAlign: props.inputAlign
};
return style;
});
const inputsearch = ref(null);
onMounted(() => {
if (props.autofocus) {
inputsearch.value.focus();
}
});
return {
renderIcon,
inputsearch,
...toRefs(state),
valueChange,
valueFocus,
valueBlur,
handleClear,
handleSubmit,
searchbarStyle,
inputSearchbarStyle,
focusCss,
translate,
clickInput,
leftIconClick,
rightIconClick,
styleSearchbar
};
}
});
const _hoisted_1 = {
key: 0,
class: "cqmc-searchbar__search-label"
};
const _hoisted_2 = {
key: 1,
class: "cqmc-searchbar__search-icon cqmc-searchbar__left-search-icon"
};
const _hoisted_3 = ["type", "maxlength", "placeholder", "value", "disabled", "readonly"];
const _hoisted_4 = {
key: 1,
class: "cqmc-searchbar__search-icon cqmc-searchbar__iptright-search-icon"
};
const _hoisted_5 = {
key: 2,
class: "cqmc-searchbar__search-icon cqmc-searchbar__right-search-icon"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("view", {
class: "cqmc-searchbar",
style: normalizeStyle(_ctx.searchbarStyle)
}, [
_ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.label), 1)) : createCommentVNode("", true),
_ctx.$slots.leftout ? (openBlock(), createElementBlock("view", _hoisted_2, [
renderSlot(_ctx.$slots, "leftout")
])) : createCommentVNode("", true),
createElementVNode("view", {
class: "cqmc-searchbar__search-input",
style: normalizeStyle({ ..._ctx.inputSearchbarStyle, ..._ctx.focusCss })
}, [
_ctx.$slots.leftin ? (openBlock(), createElementBlock("view", {
key: 0,
class: "cqmc-searchbar__search-icon cqmc-searchbar__iptleft-search-icon",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.leftIconClick && _ctx.leftIconClick(...args))
}, [
renderSlot(_ctx.$slots, "leftin")
])) : createCommentVNode("", true),
createElementVNode("view", {
class: normalizeClass(["cqmc-searchbar__input-inner", _ctx.$slots.rightin && "cqmc-searchbar__input-inner-absolute"])
}, [
createElementVNode("form", {
class: "cqmc-searchbar__input-form",
action: "#",
onSubmit: _cache[5] || (_cache[5] = withModifiers((...args) => _ctx.handleSubmit && _ctx.handleSubmit(...args), ["prevent"]))
}, [
createElementVNode("input", {
ref: "inputsearch",
class: normalizeClass(["cqmc-searchbar__input-bar", _ctx.clearable && "cqmc-searchbar__input-bar_clear"]),
type: _ctx.inputType,
maxlength: _ctx.maxLength,
placeholder: _ctx.placeholder || _ctx.translate("placeholder"),
value: _ctx.modelValue,
disabled: _ctx.disabled,
readonly: _ctx.readonly,
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.clickInput && _ctx.clickInput(...args)),
onInput: _cache[2] || (_cache[2] = (...args) => _ctx.valueChange && _ctx.valueChange(...args)),
onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.valueFocus && _ctx.valueFocus(...args)),
onBlur: _cache[4] || (_cache[4] = (...args) => _ctx.valueBlur && _ctx.valueBlur(...args)),
style: normalizeStyle(_ctx.styleSearchbar)
}, null, 46, _hoisted_3)
], 32)
], 2),
createElementVNode("view", {
class: normalizeClass(["cqmc-searchbar__input-inner-icon", _ctx.$slots.rightin && "cqmc-searchbar__input-inner-icon-absolute"])
}, [
_ctx.clearable ? withDirectives((openBlock(), createElementBlock("view", {
key: 0,
onClick: _cache[6] || (_cache[6] = (...args) => _ctx.handleClear && _ctx.handleClear(...args)),
class: "cqmc-searchbar__search-icon cqmc-searchbar__input-clear"
}, [
_ctx.$slots["clear-icon"] ? renderSlot(_ctx.$slots, "clear-icon", { key: 0 }) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.clearIcon)), { key: 1 }))
], 512)), [
[vShow, String(_ctx.modelValue).length > 0]
]) : createCommentVNode("", true),
_ctx.$slots.rightin ? (openBlock(), createElementBlock("view", _hoisted_4, [
renderSlot(_ctx.$slots, "rightin")
])) : createCommentVNode("", true)
], 2)
], 4),
_ctx.$slots.rightout ? (openBlock(), createElementBlock("view", _hoisted_5, [
renderSlot(_ctx.$slots, "rightout")
])) : createCommentVNode("", true)
], 4);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};