feat: update util
tanjinzhou
parent
905bfd586f
commit
723bd2832f
|
|
@ -24,8 +24,10 @@ export default {
|
|||
__emit() {
|
||||
// 直接调用listeners，底层组件不需要vueTool记录events
|
||||
const args = [].slice.call(arguments, 0);
|
||||
const eventName = args[0];
|
||||
const event = this.$listeners[eventName];
|
||||
let eventName = args[0];
|
||||
// TODO: 后续统一改成onXxxx，不在运行时转，提升性能
|
||||
eventName = `on${eventName[0].toUpperCase()}${eventName.substring(1)}`;
|
||||
const event = this.$attrs[eventName];
|
||||
if (args.length && event) {
|
||||
if (Array.isArray(event)) {
|
||||
for (let i = 0, l = event.length; i < l; i++) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import PropTypes from './vue-types';
|
||||
import { cloneElement } from './vnode';
|
||||
import { Teleport } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'Portal',
|
||||
|
|
@ -8,6 +8,10 @@ export default {
|
|||
children: PropTypes.any.isRequired,
|
||||
didUpdate: PropTypes.func,
|
||||
},
|
||||
data() {
|
||||
this._container = null;
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
this.createContainer();
|
||||
},
|
||||
|
|
@ -37,14 +41,7 @@ export default {
|
|||
|
||||
render() {
|
||||
if (this._container) {
|
||||
return cloneElement(this.$props.children, {
|
||||
directives: [
|
||||
{
|
||||
name: 'ant-portal',
|
||||
value: this._container,
|
||||
},
|
||||
],
|
||||
});
|
||||
return <Teleport to={this._container}>{this.$props.children}</Teleport>;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
const createRef = fn => {
|
||||
return {
|
||||
onVnodeBeforeMounted: vnode => {
|
||||
fn(vnode.component || vnode.el, vnode.key);
|
||||
},
|
||||
onVnodeUpdated: vnode => {
|
||||
fn(vnode.component || vnode.el, vnode.key);
|
||||
},
|
||||
onVnodeDestroyed: vnode => {
|
||||
fn(vnode.component || vnode.el, vnode.key);
|
||||
},
|
||||
};
|
||||
};
|
||||
export default createRef;
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import isPlainObject from 'lodash/isPlainObject';
|
||||
import classNames from 'classnames';
|
||||
import { isVNode } from 'vue';
|
||||
// function getType(fn) {
|
||||
// const match = fn && fn.toString().match(/^\s*function (\w+)/);
|
||||
// return match ? match[1] : '';
|
||||
|
|
@ -10,17 +11,19 @@ export const isOn = key => onRE.test(key);
|
|||
|
||||
const splitAttrs = attrs => {
|
||||
const allAttrs = Object.keys(attrs);
|
||||
const eventAttrs = [];
|
||||
const extraAttrs = [];
|
||||
const eventAttrs = {};
|
||||
const onEvents = {};
|
||||
const extraAttrs = {};
|
||||
for (let i = 0, l = allAttrs.length; i < l; i++) {
|
||||
const key = allAttrs[i];
|
||||
if (isOn(key)) {
|
||||
eventAttrs.push({ [key[2].toLowerCase() + key.slice(3)]: attrs[key] });
|
||||
eventAttrs[key[2].toLowerCase() + key.slice(3)] = attrs[key];
|
||||
onEvents[key] = attrs[key];
|
||||
} else {
|
||||
extraAttrs.push({ [key]: attrs[key] });
|
||||
extraAttrs[key] = attrs[key];
|
||||
}
|
||||
}
|
||||
return { events: eventAttrs, extraAttrs };
|
||||
return { onEvents, events: eventAttrs, extraAttrs };
|
||||
};
|
||||
const camelizeRE = /-(\w)/g;
|
||||
const camelize = str => {
|
||||
|
|
@ -93,7 +96,7 @@ const getSlotOptions = ele => {
|
|||
return componentOptions ? componentOptions.Ctor.options || {} : {};
|
||||
};
|
||||
const getOptionProps = instance => {
|
||||
return (instance.$ && instance.$.vnode && instance.$.vnode.props) || instance.props || {};
|
||||
return (instance.$ && instance.$.vnode ? instance.$.vnode.props : instance.props) || {};
|
||||
};
|
||||
const getComponent = (instance, prop, options = instance, execute = true) => {
|
||||
const temp = instance[prop];
|
||||
|
|
@ -182,14 +185,9 @@ const getKey = ele => {
|
|||
};
|
||||
|
||||
export function getEvents(child) {
|
||||
let events = {};
|
||||
for (let key in child) {
|
||||
if (/^on/.test(key)) {
|
||||
key = key.toLowerCase();
|
||||
events[key] = child[key];
|
||||
}
|
||||
}
|
||||
return events;
|
||||
const { $attrs } = child;
|
||||
return splitAttrs($attrs).events;
|
||||
|
||||
// let events = {};
|
||||
// if (child.componentOptions && child.componentOptions.listeners) {
|
||||
// events = child.componentOptions.listeners;
|
||||
|
|
@ -217,19 +215,9 @@ export function getListeners(context) {
|
|||
return (context.$vnode ? context.$vnode.componentOptions.listeners : context.$listeners) || {};
|
||||
}
|
||||
export function getClass(ele) {
|
||||
let data = {};
|
||||
if (ele.data) {
|
||||
data = ele.data;
|
||||
} else if (ele.$vnode && ele.$vnode.data) {
|
||||
data = ele.$vnode.data;
|
||||
}
|
||||
const tempCls = data.class || {};
|
||||
const staticClass = data.staticClass;
|
||||
const props = (isVNode(ele) ? ele.props : ele.$attrs) || {};
|
||||
let tempCls = props.class || {};
|
||||
let cls = {};
|
||||
staticClass &&
|
||||
staticClass.split(' ').forEach(c => {
|
||||
cls[c.trim()] = true;
|
||||
});
|
||||
if (typeof tempCls === 'string') {
|
||||
tempCls.split(' ').forEach(c => {
|
||||
cls[c.trim()] = true;
|
||||
|
|
@ -246,13 +234,8 @@ export function getClass(ele) {
|
|||
return cls;
|
||||
}
|
||||
export function getStyle(ele, camel) {
|
||||
let data = {};
|
||||
if (ele.data) {
|
||||
data = ele.data;
|
||||
} else if (ele.$vnode && ele.$vnode.data) {
|
||||
data = ele.$vnode.data;
|
||||
}
|
||||
let style = data.style || data.staticStyle;
|
||||
const props = (isVNode(ele) ? ele.props : ele.$attrs) || {};
|
||||
let style = props.style || {};
|
||||
if (typeof style === 'string') {
|
||||
style = parseStyleText(style, camel);
|
||||
} else if (camel && style) {
|
||||
|
|
@ -307,13 +290,7 @@ export function mergeProps() {
|
|||
}
|
||||
|
||||
function isValidElement(element) {
|
||||
return (
|
||||
element &&
|
||||
typeof element === 'object' &&
|
||||
'componentOptions' in element &&
|
||||
'context' in element &&
|
||||
element.tag !== undefined
|
||||
); // remove text node
|
||||
return element && element.__v_isVNode && typeof element.type !== 'symbol'; // remove text node
|
||||
}
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -1,59 +1,7 @@
|
|||
import { filterEmpty, parseStyleText } from './props-util';
|
||||
import classNames from 'classnames';
|
||||
import { filterEmpty } from './props-util';
|
||||
import { cloneVNode } from 'vue';
|
||||
|
||||
export function cloneVNode(vnode, deep) {
|
||||
const componentOptions = vnode.componentOptions;
|
||||
const data = vnode.data;
|
||||
|
||||
let listeners = {};
|
||||
if (componentOptions && componentOptions.listeners) {
|
||||
listeners = { ...componentOptions.listeners };
|
||||
}
|
||||
|
||||
let on = {};
|
||||
if (data && data.on) {
|
||||
on = { ...data.on };
|
||||
}
|
||||
|
||||
const cloned = new vnode.constructor(
|
||||
vnode.tag,
|
||||
data ? { ...data, on } : data,
|
||||
vnode.children,
|
||||
vnode.text,
|
||||
vnode.elm,
|
||||
vnode.context,
|
||||
componentOptions ? { ...componentOptions, listeners } : componentOptions,
|
||||
vnode.asyncFactory,
|
||||
);
|
||||
cloned.ns = vnode.ns;
|
||||
cloned.isStatic = vnode.isStatic;
|
||||
cloned.key = vnode.key;
|
||||
cloned.isComment = vnode.isComment;
|
||||
cloned.fnContext = vnode.fnContext;
|
||||
cloned.fnOptions = vnode.fnOptions;
|
||||
cloned.fnScopeId = vnode.fnScopeId;
|
||||
cloned.isCloned = true;
|
||||
if (deep) {
|
||||
if (vnode.children) {
|
||||
cloned.children = cloneVNodes(vnode.children, true);
|
||||
}
|
||||
if (componentOptions && componentOptions.children) {
|
||||
componentOptions.children = cloneVNodes(componentOptions.children, true);
|
||||
}
|
||||
}
|
||||
return cloned;
|
||||
}
|
||||
|
||||
export function cloneVNodes(vnodes, deep) {
|
||||
const len = vnodes.length;
|
||||
const res = new Array(len);
|
||||
for (let i = 0; i < len; i++) {
|
||||
res[i] = cloneVNode(vnodes[i], deep);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
export function cloneElement(n, nodeProps = {}, deep) {
|
||||
export function cloneElement(n, nodeProps = {}, override = true) {
|
||||
let ele = n;
|
||||
if (Array.isArray(n)) {
|
||||
ele = filterEmpty(n)[0];
|
||||
|
|
@ -61,87 +9,9 @@ export function cloneElement(n, nodeProps = {}, deep) {
|
|||
if (!ele) {
|
||||
return null;
|
||||
}
|
||||
const node = cloneVNode(ele, deep);
|
||||
// // 函数式组件不支持clone https://github.com/vueComponent/ant-design-vue/pull/1947
|
||||
// warning(
|
||||
// !(node.fnOptions && node.fnOptions.functional),
|
||||
// `can not use cloneElement for functional component (${node.fnOptions && node.fnOptions.name})`,
|
||||
// );
|
||||
const { props = {}, key, on = {}, nativeOn = {}, children, directives = [] } = nodeProps;
|
||||
const data = node.data || {};
|
||||
let cls = {};
|
||||
let style = {};
|
||||
const {
|
||||
attrs = {},
|
||||
ref,
|
||||
domProps = {},
|
||||
style: tempStyle = {},
|
||||
class: tempCls = {},
|
||||
scopedSlots = {},
|
||||
} = nodeProps;
|
||||
const node = cloneVNode(ele, nodeProps);
|
||||
|
||||
if (typeof data.style === 'string') {
|
||||
style = parseStyleText(data.style);
|
||||
} else {
|
||||
style = { ...data.style, ...style };
|
||||
}
|
||||
if (typeof tempStyle === 'string') {
|
||||
style = { ...style, ...parseStyleText(style) };
|
||||
} else {
|
||||
style = { ...style, ...tempStyle };
|
||||
}
|
||||
|
||||
if (typeof data.class === 'string' && data.class.trim() !== '') {
|
||||
data.class.split(' ').forEach(c => {
|
||||
cls[c.trim()] = true;
|
||||
});
|
||||
} else if (Array.isArray(data.class)) {
|
||||
classNames(data.class)
|
||||
.split(' ')
|
||||
.forEach(c => {
|
||||
cls[c.trim()] = true;
|
||||
});
|
||||
} else {
|
||||
cls = { ...data.class, ...cls };
|
||||
}
|
||||
if (typeof tempCls === 'string' && tempCls.trim() !== '') {
|
||||
tempCls.split(' ').forEach(c => {
|
||||
cls[c.trim()] = true;
|
||||
});
|
||||
} else {
|
||||
cls = { ...cls, ...tempCls };
|
||||
}
|
||||
node.data = Object.assign({}, data, {
|
||||
style,
|
||||
attrs: { ...data.attrs, ...attrs },
|
||||
class: cls,
|
||||
domProps: { ...data.domProps, ...domProps },
|
||||
scopedSlots: { ...data.scopedSlots, ...scopedSlots },
|
||||
directives: [...(data.directives || []), ...directives],
|
||||
});
|
||||
|
||||
if (node.componentOptions) {
|
||||
node.componentOptions.propsData = node.componentOptions.propsData || {};
|
||||
node.componentOptions.listeners = node.componentOptions.listeners || {};
|
||||
node.componentOptions.propsData = { ...node.componentOptions.propsData, ...props };
|
||||
node.componentOptions.listeners = { ...node.componentOptions.listeners, ...on };
|
||||
if (children) {
|
||||
node.componentOptions.children = children;
|
||||
}
|
||||
} else {
|
||||
if (children) {
|
||||
node.children = children;
|
||||
}
|
||||
node.data.on = { ...(node.data.on || {}), ...on };
|
||||
}
|
||||
node.data.on = { ...(node.data.on || {}), ...nativeOn };
|
||||
|
||||
if (key !== undefined) {
|
||||
node.key = key;
|
||||
node.data.key = key;
|
||||
}
|
||||
if (typeof ref === 'string') {
|
||||
node.data.ref = ref;
|
||||
}
|
||||
// cloneVNode内部是合并属性，这里改成覆盖属性
|
||||
node.props = override ? { ...node.props, ...nodeProps } : node.props;
|
||||
return node;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,7 +84,9 @@ export const withDefault = function(type) {
|
|||
|
||||
// isFunction(def) 关注 https://github.com/vuejs/vue-next/pull/1291 合并发版本后可删除
|
||||
this.default =
|
||||
isArray(def) || isPlainObject(def) || isFunction(def)
|
||||
isArray(def) ||
|
||||
isPlainObject(def) ||
|
||||
(isFunction(def) && type._vueTypes_name === 'function')
|
||||
? function() {
|
||||
return def;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue