vue-admin-core/es/components/msg-editor/src/render-elem.mjs

A Component Library for Vue 3

import { h } from 'snabbdom';
import { DomEditor } from '@wangeditor/editor';
import emitter from './mitt.mjs';
import { getLeftAndTop } from './plugin.mjs';

function renderVariable(elem, children, editor) {
  const selected = DomEditor.isNodeSelected(editor, elem);
  const { label = "", value = "" } = elem;
  const vnode = h(
    "span",
    {
      props: {
        contentEditable: false
        // 不可编辑
      },
      style: {
        marginLeft: "3px",
        marginRight: "3px",
        backgroundColor: "var(--el-color-primary-light-9)",
        border: selected ? "2px solid var(--w-e-textarea-selected-border-color)" : "2px solid transparent",
        borderRadius: "3px",
        padding: "0 3px",
        cursor: "pointer",
        color: "var(--el-color-primary)",
        borderColor: "var(--el-color-primary-light-8)"
      },
      on: {
        click: (e) => {
          if (editor.isDisabled())
            return;
          const { top, left, isRight } = getLeftAndTop(editor, elem);
          const { width, height } = e.target.getBoundingClientRect();
          emitter.emit("show", {
            top: top + height,
            left: left - (!isRight ? width : 0),
            value
          });
          setTimeout(() => {
            function _hide() {
              emitter.emit("hide", editor);
            }
            editor.once("fullScreen", _hide);
            editor.once("unFullScreen", _hide);
            editor.once("scroll", _hide);
            editor.once("modalOrPanelShow", _hide);
            editor.once("modalOrPanelHide", _hide);
            function hideOnChange() {
              if (editor.selection != null) {
                _hide();
                editor.off("change", hideOnChange);
              }
            }
            editor.on("change", hideOnChange);
          });
        }
      }
    },
    `${label}`
    // 如 `${张三}`
  );
  return vnode;
}
const conf = {
  type: "variable",
  // 节点 type ，重要！！！
  renderElem: renderVariable
};

export { conf as default };
//# sourceMappingURL=render-elem.mjs.map