cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
55 lines (54 loc) • 2.35 kB
JavaScript
import { ref, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, withModifiers } from "vue";
import { inputKeyListener } from "../utils/dom.mjs";
import style0 from "./TouchKeyboard.vue_used_vue_type_style_index_0_lang.module.mjs";
import _export_sfc from "../../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = {
name: "TouchKeyboard",
emits: ["input", "hide"],
setup(_, { emit }) {
const textarea = ref(null);
const h = inputKeyListener((val) => emit("input", val));
const onKeepKeyboard = (ev) => {
if (ev.target.name === "touchKeyboardToggle" || document.activeElement !== textarea.value) {
return;
}
const allow = ["TEXTAREA", "INPUT", "SELECT", "BUTTON"];
if (!allow.includes(ev.target.tagName)) {
ev.preventDefault();
}
emit("hide");
};
onMounted(() => textarea.value.focus());
onMounted(() => document.addEventListener("mousedown", onKeepKeyboard, true));
onUnmounted(() => document.removeEventListener("mousedown", onKeepKeyboard, true));
return {
onKeyDown: (e) => h.down(e),
onKeyUp: (e) => h.up(e),
onKeyPress: (e) => h.press(e),
onInput: (e) => h.input(e),
textarea
};
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(_ctx.$style.kbd)
}, [
createElementVNode("textarea", mergeProps({ ref: "textarea" }, _ctx.$attrs, {
autocomplete: "off",
autocapitalize: "off",
spellcheck: "false",
tabindex: "-1",
onKeydown: _cache[0] || (_cache[0] = (...args) => $setup.onKeyDown && $setup.onKeyDown(...args)),
onKeyup: _cache[1] || (_cache[1] = (...args) => $setup.onKeyUp && $setup.onKeyUp(...args)),
onKeypress: _cache[2] || (_cache[2] = (...args) => $setup.onKeyPress && $setup.onKeyPress(...args)),
onInput: _cache[3] || (_cache[3] = (...args) => $setup.onInput && $setup.onInput(...args)),
onSubmit: _cache[4] || (_cache[4] = withModifiers(() => false, ["prevent"]))
}), null, 16)
], 2);
}
const cssModules = {
"$style": style0
};
var TouchKeyboard = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__cssModules", cssModules]]);
export { TouchKeyboard as default };