提交 ec8d177f 编写于 作者: D DCloud_LXH

feat: rich-text support itemclick event

上级 4f8ad863
import { onMounted, ref, watch, getCurrentInstance } from 'vue' import { onMounted, ref, watch, getCurrentInstance } from 'vue'
import { defineBuiltInComponent } from '@dcloudio/uni-components' import {
defineBuiltInComponent,
useCustomEvent,
EmitEvent,
} from '@dcloudio/uni-components'
import parseHtml from './html-parser' import parseHtml from './html-parser'
import parseNodes from './nodes-parser' import parseNodes from './nodes-parser'
...@@ -18,9 +22,23 @@ export default /*#__PURE__*/ defineBuiltInComponent({ ...@@ -18,9 +22,23 @@ export default /*#__PURE__*/ defineBuiltInComponent({
MODE: 3, MODE: 3,
}, },
props, props,
setup(props) { emits: [
'click',
'touchstart',
'touchmove',
'touchcancel',
'touchend',
'longpress',
],
setup(props, { emit, attrs }) {
const vm = getCurrentInstance() const vm = getCurrentInstance()
const rootRef = ref<HTMLElement | null>(null) const rootRef = ref<HTMLElement | null>(null)
const trigger = useCustomEvent<EmitEvent<typeof emit>>(rootRef, emit)
const hasItemClick = !!attrs.onItemclick
function triggerItemClick(e: Event, detail = {}) {
trigger('itemclick', e, detail)
}
function _renderNodes(nodes: string | unknown[]) { function _renderNodes(nodes: string | unknown[]) {
if (typeof nodes === 'string') { if (typeof nodes === 'string') {
...@@ -29,7 +47,8 @@ export default /*#__PURE__*/ defineBuiltInComponent({ ...@@ -29,7 +47,8 @@ export default /*#__PURE__*/ defineBuiltInComponent({
const nodeList = parseNodes( const nodeList = parseNodes(
nodes, nodes,
document.createDocumentFragment(), document.createDocumentFragment(),
(vm?.root.type as any).__scopeId || '' (vm?.root?.type as any).__scopeId || '',
hasItemClick && triggerItemClick
) )
rootRef.value!.firstElementChild!.innerHTML = '' rootRef.value!.firstElementChild!.innerHTML = ''
rootRef.value!.firstElementChild!.appendChild(nodeList) rootRef.value!.firstElementChild!.appendChild(nodeList)
......
...@@ -102,7 +102,12 @@ function normlizeValue(tagName, name, value) { ...@@ -102,7 +102,12 @@ function normlizeValue(tagName, name, value) {
return value return value
} }
export default function parseNodes(nodes, parentNode, scopeId) { export default function parseNodes(
nodes,
parentNode,
scopeId,
triggerItemClick
) {
nodes.forEach(function (node) { nodes.forEach(function (node) {
if (!isPlainObject(node)) { if (!isPlainObject(node)) {
return return
...@@ -140,9 +145,11 @@ export default function parseNodes(nodes, parentNode, scopeId) { ...@@ -140,9 +145,11 @@ export default function parseNodes(nodes, parentNode, scopeId) {
}) })
} }
processClickEvent(node, elem, triggerItemClick)
const children = node.children const children = node.children
if (Array.isArray(children) && children.length) { if (Array.isArray(children) && children.length) {
parseNodes(node.children, elem) parseNodes(node.children, elem, scopeId, triggerItemClick)
} }
parentNode.appendChild(elem) parentNode.appendChild(elem)
...@@ -160,3 +167,17 @@ export default function parseNodes(nodes, parentNode, scopeId) { ...@@ -160,3 +167,17 @@ export default function parseNodes(nodes, parentNode, scopeId) {
}) })
return parentNode return parentNode
} }
function processClickEvent(node, elem, triggerItemClick) {
if (['a', 'img'].includes(node.name) && triggerItemClick) {
elem.setAttribute('onClick', 'return false;')
elem.addEventListener(
'click',
(e) => {
triggerItemClick(e, { node })
e.stopPropagation()
},
true
)
}
}
...@@ -5028,7 +5028,7 @@ function normlizeValue(tagName, name, value) { ...@@ -5028,7 +5028,7 @@ function normlizeValue(tagName, name, value) {
return getRealPath(value); return getRealPath(value);
return value; return value;
} }
function parseNodes(nodes, parentNode, scopeId) { function parseNodes(nodes, parentNode, scopeId, triggerItemClick) {
nodes.forEach(function(node) { nodes.forEach(function(node) {
if (!shared.isPlainObject(node)) { if (!shared.isPlainObject(node)) {
return; return;
...@@ -5064,9 +5064,10 @@ function parseNodes(nodes, parentNode, scopeId) { ...@@ -5064,9 +5064,10 @@ function parseNodes(nodes, parentNode, scopeId) {
} }
}); });
} }
processClickEvent(node, elem, triggerItemClick);
const children = node.children; const children = node.children;
if (Array.isArray(children) && children.length) { if (Array.isArray(children) && children.length) {
parseNodes(node.children, elem); parseNodes(node.children, elem, scopeId, triggerItemClick);
} }
parentNode.appendChild(elem); parentNode.appendChild(elem);
} else { } else {
...@@ -5077,6 +5078,15 @@ function parseNodes(nodes, parentNode, scopeId) { ...@@ -5077,6 +5078,15 @@ function parseNodes(nodes, parentNode, scopeId) {
}); });
return parentNode; return parentNode;
} }
function processClickEvent(node, elem, triggerItemClick) {
if (["a", "img"].includes(node.name) && triggerItemClick) {
elem.setAttribute("onClick", "return false;");
elem.addEventListener("click", (e2) => {
triggerItemClick(e2, { node });
e2.stopPropagation();
}, true);
}
}
const props$f = { const props$f = {
nodes: { nodes: {
type: [Array, String], type: [Array, String],
...@@ -5091,14 +5101,24 @@ var index$p = /* @__PURE__ */ defineBuiltInComponent({ ...@@ -5091,14 +5101,24 @@ var index$p = /* @__PURE__ */ defineBuiltInComponent({
MODE: 3 MODE: 3
}, },
props: props$f, props: props$f,
setup(props2) { emits: ["click", "touchstart", "touchmove", "touchcancel", "touchend", "longpress"],
setup(props2, {
emit: emit2,
attrs
}) {
const vm = vue.getCurrentInstance(); const vm = vue.getCurrentInstance();
const rootRef = vue.ref(null); const rootRef = vue.ref(null);
const trigger = useCustomEvent(rootRef, emit2);
const hasItemClick = !!attrs.onItemclick;
function triggerItemClick(e2, detail = {}) {
trigger("itemclick", e2, detail);
}
function _renderNodes(nodes) { function _renderNodes(nodes) {
var _a;
if (typeof nodes === "string") { if (typeof nodes === "string") {
nodes = parseHtml(nodes); nodes = parseHtml(nodes);
} }
const nodeList = parseNodes(nodes, document.createDocumentFragment(), (vm == null ? void 0 : vm.root.type).__scopeId || ""); const nodeList = parseNodes(nodes, document.createDocumentFragment(), ((_a = vm == null ? void 0 : vm.root) == null ? void 0 : _a.type).__scopeId || "", hasItemClick && triggerItemClick);
rootRef.value.firstElementChild.innerHTML = ""; rootRef.value.firstElementChild.innerHTML = "";
rootRef.value.firstElementChild.appendChild(nodeList); rootRef.value.firstElementChild.appendChild(nodeList);
} }
......
...@@ -11494,7 +11494,7 @@ function normlizeValue(tagName, name, value) { ...@@ -11494,7 +11494,7 @@ function normlizeValue(tagName, name, value) {
return getRealPath(value); return getRealPath(value);
return value; return value;
} }
function parseNodes(nodes, parentNode, scopeId) { function parseNodes(nodes, parentNode, scopeId, triggerItemClick) {
nodes.forEach(function(node) { nodes.forEach(function(node) {
if (!isPlainObject(node)) { if (!isPlainObject(node)) {
return; return;
...@@ -11530,9 +11530,10 @@ function parseNodes(nodes, parentNode, scopeId) { ...@@ -11530,9 +11530,10 @@ function parseNodes(nodes, parentNode, scopeId) {
} }
}); });
} }
processClickEvent(node, elem, triggerItemClick);
const children = node.children; const children = node.children;
if (Array.isArray(children) && children.length) { if (Array.isArray(children) && children.length) {
parseNodes(node.children, elem); parseNodes(node.children, elem, scopeId, triggerItemClick);
} }
parentNode.appendChild(elem); parentNode.appendChild(elem);
} else { } else {
...@@ -11543,6 +11544,15 @@ function parseNodes(nodes, parentNode, scopeId) { ...@@ -11543,6 +11544,15 @@ function parseNodes(nodes, parentNode, scopeId) {
}); });
return parentNode; return parentNode;
} }
function processClickEvent(node, elem, triggerItemClick) {
if (["a", "img"].includes(node.name) && triggerItemClick) {
elem.setAttribute("onClick", "return false;");
elem.addEventListener("click", (e2) => {
triggerItemClick(e2, { node });
e2.stopPropagation();
}, true);
}
}
const props$m = { const props$m = {
nodes: { nodes: {
type: [Array, String], type: [Array, String],
...@@ -11557,14 +11567,24 @@ var index$m = /* @__PURE__ */ defineBuiltInComponent({ ...@@ -11557,14 +11567,24 @@ var index$m = /* @__PURE__ */ defineBuiltInComponent({
MODE: 3 MODE: 3
}, },
props: props$m, props: props$m,
setup(props2) { emits: ["click", "touchstart", "touchmove", "touchcancel", "touchend", "longpress"],
setup(props2, {
emit: emit2,
attrs: attrs2
}) {
const vm = getCurrentInstance(); const vm = getCurrentInstance();
const rootRef = ref(null); const rootRef = ref(null);
const trigger = useCustomEvent(rootRef, emit2);
const hasItemClick = !!attrs2.onItemclick;
function triggerItemClick(e2, detail = {}) {
trigger("itemclick", e2, detail);
}
function _renderNodes(nodes) { function _renderNodes(nodes) {
var _a;
if (typeof nodes === "string") { if (typeof nodes === "string") {
nodes = parseHtml(nodes); nodes = parseHtml(nodes);
} }
const nodeList = parseNodes(nodes, document.createDocumentFragment(), (vm == null ? void 0 : vm.root.type).__scopeId || ""); const nodeList = parseNodes(nodes, document.createDocumentFragment(), ((_a = vm == null ? void 0 : vm.root) == null ? void 0 : _a.type).__scopeId || "", hasItemClick && triggerItemClick);
rootRef.value.firstElementChild.innerHTML = ""; rootRef.value.firstElementChild.innerHTML = "";
rootRef.value.firstElementChild.appendChild(nodeList); rootRef.value.firstElementChild.appendChild(nodeList);
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册