Skip to content

U
uni-app

qianlong66 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 17298658 编写于 作者: fxy060608's avatar fxy060608
浏览文件
操作

feat(app): add style

上级 2d4d0132
显示空白变更内容
内联 并排
Showing with 140 addition and 323 deletion
packages/uni-app-plus/dist/uni-app-service.es.js
浏览文件 @ 17298658
......@@ -9310,12 +9310,17 @@ var serviceContext = (function (vue) {
function pushRemoveEventAction(pageNode, nodeId, name) {
pageNode.push([ACTION_TYPE_REMOVE_EVENT, nodeId, pageNode.addDict(name)]);
}
function normalizeAttrValue(pageNode, name, value) {
return name === 'style' && isPlainObject(value)
? pageNode.normalizeDict(value)
: pageNode.addDict(value);
}
function pushSetAttributeAction(pageNode, nodeId, name, value) {
pageNode.push([
ACTION_TYPE_SET_ATTRIBUTE,
nodeId,
pageNode.addDict(name),
pageNode.addDict(value),
normalizeAttrValue(pageNode, name, value),
]);
}
function pushRemoveAttributeAction(pageNode, nodeId, name) {
......
packages/uni-app-plus/dist/uni-app-view.umd.js
浏览文件 @ 17298658
......@@ -211,6 +211,8 @@
prevent: 1 << 1,
self: 1 << 2
};
const ATTR_CLASS = "class";
const ATTR_STYLE = "style";
const ACTION_TYPE_PAGE_CREATE = 1;
const ACTION_TYPE_PAGE_CREATED = 2;
const ACTION_TYPE_CREATE = 3;
......@@ -5980,6 +5982,9 @@
if (hasOwn$1(nodeJson, "a")) {
this.setAttrs(nodeJson.a);
}
if (hasOwn$1(nodeJson, "s")) {
this.setAttr("style", nodeJson.s);
}
if (hasOwn$1(nodeJson, "e")) {
this.addEvents(nodeJson.e);
}
......@@ -6006,18 +6011,18 @@
patchEvent(this.$, name, -1);
}
setAttr(name, value) {
if (name === ".c") {
if (name === ATTR_CLASS) {
patchClass(this.$, value);
} else if (name === ".s") {
} else if (name === ATTR_STYLE) {
patchStyle(this.$, value);
} else {
this.setAttribute(name, value);
}
}
removeAttr(name) {
if (name === ".c") {
if (name === ATTR_CLASS) {
patchClass(this.$, "");
} else if (name === ".s") {
} else if (name === ATTR_STYLE) {
patchStyle(this.$, "");
} else {
this.removeAttribute(name);
......
packages/uni-app-plus/src/service/framework/dom/Page.ts
浏览文件 @ 17298658
......@@ -295,6 +295,16 @@ function pushRemoveEventAction(
pageNode.push([ACTION_TYPE_REMOVE_EVENT, nodeId, pageNode.addDict(name)])
}
function normalizeAttrValue(
pageNode: UniPageNode,
name: string,
value: unknown
) {
return name === 'style' && isPlainObject(value)
? pageNode.normalizeDict(value)
: pageNode.addDict(value as Value)
}
function pushSetAttributeAction(
pageNode: UniPageNode,
nodeId: number,
......@@ -305,7 +315,7 @@ function pushSetAttributeAction(
ACTION_TYPE_SET_ATTRIBUTE,
nodeId,
pageNode.addDict(name),
pageNode.addDict(value as Value),
normalizeAttrValue(pageNode, name, value),
])
}
......
packages/uni-app-plus/src/view/framework/dom/elements/UniElement.ts
浏览文件 @ 17298658
import { hasOwn } from '@vue/shared'
import { UniNodeJSON } from '@dcloudio/uni-shared'
import { ATTR_CLASS, ATTR_STYLE, UniNodeJSON } from '@dcloudio/uni-shared'
import { reactive, watch } from 'vue'
import { UniNode } from './UniNode'
import { patchClass } from '../modules/class'
......@@ -31,6 +31,9 @@ export class UniElement<T extends object> extends UniNode {
if (hasOwn(nodeJson, 'a')) {
this.setAttrs(nodeJson.a!)
}
if (hasOwn(nodeJson, 's')) {
this.setAttr('style', nodeJson.s)
}
if (hasOwn(nodeJson, 'e')) {
this.addEvents(nodeJson.e!)
}
......@@ -61,18 +64,18 @@ export class UniElement<T extends object> extends UniNode {
patchEvent(this.$, name, -1)
}
setAttr(name: string, value: unknown) {
if (name === '.c') {
if (name === ATTR_CLASS) {
patchClass(this.$, value as string)
} else if (name === '.s') {
} else if (name === ATTR_STYLE) {
patchStyle(this.$, value as string | Record<string, any>)
} else {
this.setAttribute(name, value as string)
}
}
removeAttr(name: string) {
if (name === '.c') {
if (name === ATTR_CLASS) {
patchClass(this.$, '')
} else if (name === '.s') {
} else if (name === ATTR_STYLE) {
patchStyle(this.$, '')
} else {
this.removeAttribute(name)
......
packages/uni-app-vue/dist/service.runtime.esm.js
浏览文件 @ 17298658
......@@ -269,104 +269,6 @@ export default function vueFactory(exports) {
return [hyphenate$1(name.slice(2)), options];
}
var UniCSSStyleDeclaration = /*#__PURE__*/function () {
function UniCSSStyleDeclaration() {
_classCallCheck(this, UniCSSStyleDeclaration);
this._cssText = null;
this._value = null;
}
_createClass(UniCSSStyleDeclaration, [{
key: "setProperty",
value: function setProperty(property, value) {
if (value === null || value === '') {
this.removeProperty(property);
} else {
if (!this._value) {
this._value = {};
}
this._value[property] = value;
}
}
}, {
key: "getPropertyValue",
value: function getPropertyValue(property) {
if (!this._value) {
return '';
}
return this._value[property] || '';
}
}, {
key: "removeProperty",
value: function removeProperty(property) {
if (!this._value) {
return '';
}
var value = this._value[property];
delete this._value[property];
return value;
}
}, {
key: "cssText",
get: function get() {
return this._cssText || '';
},
set: function set(cssText) {
this._cssText = cssText;
}
}, {
key: "toJSON",
value: function toJSON() {
var _cssText = this._cssText,
_value = this._value;
var hasCssText = _cssText !== null;
var hasValue = _value !== null;
if (hasCssText && hasValue) {
return [_cssText, _value];
}
if (hasCssText) {
return _cssText;
}
if (hasValue) {
return _value;
}
}
}]);
return UniCSSStyleDeclaration;
}();
var STYLE_PROPS = ['_value', '_cssText', 'cssText', 'getPropertyValue', 'setProperty', 'removeProperty', 'toJSON'];
function proxyStyle(uniCssStyle) {
return new Proxy(uniCssStyle, {
get(target, key, receiver) {
if (STYLE_PROPS.indexOf(key) === -1) {
return target.getPropertyValue(key);
}
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
if (STYLE_PROPS.indexOf(key) === -1) {
target.setProperty(key, value);
return true;
}
return Reflect.set(target, key, value, receiver);
}
});
}
var EventModifierFlags = {
stop: 1,
prevent: 1 << 1,
......@@ -568,6 +470,9 @@ export default function vueFactory(exports) {
return UniNode;
}(UniEventTarget);
var ATTR_CLASS = 'class';
var ATTR_STYLE = 'style';
var UniBaseNode = /*#__PURE__*/function (_UniNode) {
_inherits(UniBaseNode, _UniNode);
......@@ -580,18 +485,19 @@ export default function vueFactory(exports) {
_this3 = _super3.call(this, nodeType, nodeName, container);
_this3.attributes = Object.create(null);
_this3._html = null;
_this3.style = proxyStyle(new UniCSSStyleDeclaration());
_this3.style = null;
_this3._html = null; // this.style = proxyStyle(new UniCSSStyleDeclaration())
return _this3;
}
_createClass(UniBaseNode, [{
key: "className",
get: function get() {
return this.attributes['class'] || '';
return this.attributes[ATTR_CLASS] || '';
},
set: function set(val) {
this.setAttribute('class', val);
this.setAttribute(ATTR_CLASS, val);
}
}, {
key: "innerHTML",
......@@ -622,12 +528,20 @@ export default function vueFactory(exports) {
}, {
key: "getAttribute",
value: function getAttribute(qualifiedName) {
if (qualifiedName === ATTR_STYLE) {
return this.style;
}
return this.attributes[qualifiedName];
}
}, {
key: "removeAttribute",
value: function removeAttribute(qualifiedName) {
if (qualifiedName == ATTR_STYLE) {
this.style = null;
} else {
delete this.attributes[qualifiedName];
}
if (this.pageNode && !this.pageNode.isUnmounted) {
this.pageNode.onRemoveAttribute(this, qualifiedName);
......@@ -636,7 +550,11 @@ export default function vueFactory(exports) {
}, {
key: "setAttribute",
value: function setAttribute(qualifiedName, value) {
if (qualifiedName === ATTR_STYLE) {
this.style = value;
} else {
this.attributes[qualifiedName] = value;
}
if (this.pageNode && !this.pageNode.isUnmounted) {
this.pageNode.onSetAttribute(this, qualifiedName, value);
......@@ -650,8 +568,8 @@ export default function vueFactory(exports) {
normalize = _ref.normalize;
var attributes = this.attributes,
listeners = this.listeners,
style = this.style,
listeners = this.listeners,
_text = this._text;
var res = {};
......@@ -674,10 +592,8 @@ export default function vueFactory(exports) {
res.e = normalize ? normalize(e, false) : e;
}
var cssStyle = style.toJSON();
if (cssStyle) {
res.s = normalize ? normalize(cssStyle) : cssStyle;
if (style !== null) {
res.s = normalize ? normalize(style) : style;
}
if (!attr) {
......
packages/uni-shared/dist/uni-shared.cjs.js
浏览文件 @ 17298658
......@@ -424,84 +424,6 @@ function parseEventName(name) {
return [shared.hyphenate(name.slice(2)), options];
}
class UniCSSStyleDeclaration {
constructor() {
this._cssText = null;
this._value = null;
}
setProperty(property, value) {
if (value === null || value === '') {
this.removeProperty(property);
}
else {
if (!this._value) {
this._value = {};
}
this._value[property] = value;
}
}
getPropertyValue(property) {
if (!this._value) {
return '';
}
return this._value[property] || '';
}
removeProperty(property) {
if (!this._value) {
return '';
}
const value = this._value[property];
delete this._value[property];
return value;
}
get cssText() {
return this._cssText || '';
}
set cssText(cssText) {
this._cssText = cssText;
}
toJSON() {
const { _cssText, _value } = this;
const hasCssText = _cssText !== null;
const hasValue = _value !== null;
if (hasCssText && hasValue) {
return [_cssText, _value];
}
if (hasCssText) {
return _cssText;
}
if (hasValue) {
return _value;
}
}
}
const STYLE_PROPS = [
'_value',
'_cssText',
'cssText',
'getPropertyValue',
'setProperty',
'removeProperty',
'toJSON',
];
function proxyStyle(uniCssStyle) {
return new Proxy(uniCssStyle, {
get(target, key, receiver) {
if (STYLE_PROPS.indexOf(key) === -1) {
return target.getPropertyValue(key);
}
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
if (STYLE_PROPS.indexOf(key) === -1) {
target.setProperty(key, value);
return true;
}
return Reflect.set(target, key, value, receiver);
},
});
}
const EventModifierFlags = {
stop: 1,
prevent: 1 << 1,
......@@ -644,18 +566,21 @@ class UniNode extends UniEventTarget {
: oldChild;
}
}
const ATTR_CLASS = 'class';
const ATTR_STYLE = 'style';
class UniBaseNode extends UniNode {
constructor(nodeType, nodeName, container) {
super(nodeType, nodeName, container);
this.attributes = Object.create(null);
this.style = null;
this._html = null;
this.style = proxyStyle(new UniCSSStyleDeclaration());
// this.style = proxyStyle(new UniCSSStyleDeclaration())
}
get className() {
return (this.attributes['class'] || '');
return (this.attributes[ATTR_CLASS] || '');
}
set className(val) {
this.setAttribute('class', val);
this.setAttribute(ATTR_CLASS, val);
}
get innerHTML() {
return '';
......@@ -676,22 +601,35 @@ class UniBaseNode extends UniNode {
}
}
getAttribute(qualifiedName) {
if (qualifiedName === ATTR_STYLE) {
return this.style;
}
return this.attributes[qualifiedName];
}
removeAttribute(qualifiedName) {
if (qualifiedName == ATTR_STYLE) {
this.style = null;
}
else {
delete this.attributes[qualifiedName];
}
if (this.pageNode && !this.pageNode.isUnmounted) {
this.pageNode.onRemoveAttribute(this, qualifiedName);
}
}
setAttribute(qualifiedName, value) {
if (qualifiedName === ATTR_STYLE) {
this.style = value;
}
else {
this.attributes[qualifiedName] = value;
}
if (this.pageNode && !this.pageNode.isUnmounted) {
this.pageNode.onSetAttribute(this, qualifiedName, value);
}
}
toJSON({ attr, normalize, } = {}) {
const { attributes, listeners, style, _text } = this;
const { attributes, style, listeners, _text } = this;
const res = {};
if (Object.keys(attributes).length) {
res.a = normalize ? normalize(attributes) : attributes;
......@@ -708,9 +646,8 @@ class UniBaseNode extends UniNode {
});
res.e = normalize ? normalize(e, false) : e;
}
const cssStyle = style.toJSON();
if (cssStyle) {
res.s = normalize ? normalize(cssStyle) : cssStyle;
if (style !== null) {
res.s = normalize ? normalize(style) : style;
}
if (!attr) {
res.i = this.nodeId;
......@@ -910,6 +847,8 @@ exports.ACTION_TYPE_REMOVE_ATTRIBUTE = ACTION_TYPE_REMOVE_ATTRIBUTE;
exports.ACTION_TYPE_REMOVE_EVENT = ACTION_TYPE_REMOVE_EVENT;
exports.ACTION_TYPE_SET_ATTRIBUTE = ACTION_TYPE_SET_ATTRIBUTE;
exports.ACTION_TYPE_SET_TEXT = ACTION_TYPE_SET_TEXT;
exports.ATTR_CLASS = ATTR_CLASS;
exports.ATTR_STYLE = ATTR_STYLE;
exports.BACKGROUND_COLOR = BACKGROUND_COLOR;
exports.BUILT_IN_TAGS = BUILT_IN_TAGS;
exports.COMPONENT_NAME_PREFIX = COMPONENT_NAME_PREFIX;
......
packages/uni-shared/dist/uni-shared.d.ts
浏览文件 @ 17298658
......@@ -36,6 +36,10 @@ number
export declare function addFont(family: string, source: string, desc?: FontFaceDescriptors): Promise<void>;
export declare const ATTR_CLASS = "class";
export declare const ATTR_STYLE = "style";
export declare const BACKGROUND_COLOR = "#f7f7f7";
export declare const BUILT_IN_TAGS: string[];
......@@ -325,7 +329,7 @@ export declare const UNI_SSR_TITLE = "title";
export declare class UniBaseNode extends UniNode {
attributes: Record<string, unknown>;
style: UniCSSStyleDeclaration;
style: null | string | Record<string, string | string[]>;
protected _html: string | null;
constructor(nodeType: UniNodeType, nodeName: string, container: UniElement | IUniPageNode);
get className(): string;
......@@ -355,18 +359,6 @@ export declare class UniCommentNode extends UniNode {
};
}
declare class UniCSSStyleDeclaration {
[name: string]: string | unknown;
private _cssText;
private _value;
setProperty(property: string, value: string | null): void;
getPropertyValue(property: string): string | string[];
removeProperty(property: string): string;
get cssText(): string;
set cssText(cssText: string);
toJSON(): UniCSSStyleDeclarationJSON | undefined;
}
declare type UniCSSStyleDeclarationJSON = string | null | Record<string, string | string[]> | [string, Record<string, string | string[]>];
export declare class UniElement extends UniBaseNode {
......
packages/uni-shared/dist/uni-shared.es.js
浏览文件 @ 17298658
......@@ -420,84 +420,6 @@ function parseEventName(name) {
return [hyphenate(name.slice(2)), options];
}
class UniCSSStyleDeclaration {
constructor() {
this._cssText = null;
this._value = null;
}
setProperty(property, value) {
if (value === null || value === '') {
this.removeProperty(property);
}
else {
if (!this._value) {
this._value = {};
}
this._value[property] = value;
}
}
getPropertyValue(property) {
if (!this._value) {
return '';
}
return this._value[property] || '';
}
removeProperty(property) {
if (!this._value) {
return '';
}
const value = this._value[property];
delete this._value[property];
return value;
}
get cssText() {
return this._cssText || '';
}
set cssText(cssText) {
this._cssText = cssText;
}
toJSON() {
const { _cssText, _value } = this;
const hasCssText = _cssText !== null;
const hasValue = _value !== null;
if (hasCssText && hasValue) {
return [_cssText, _value];
}
if (hasCssText) {
return _cssText;
}
if (hasValue) {
return _value;
}
}
}
const STYLE_PROPS = [
'_value',
'_cssText',
'cssText',
'getPropertyValue',
'setProperty',
'removeProperty',
'toJSON',
];
function proxyStyle(uniCssStyle) {
return new Proxy(uniCssStyle, {
get(target, key, receiver) {
if (STYLE_PROPS.indexOf(key) === -1) {
return target.getPropertyValue(key);
}
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
if (STYLE_PROPS.indexOf(key) === -1) {
target.setProperty(key, value);
return true;
}
return Reflect.set(target, key, value, receiver);
},
});
}
const EventModifierFlags = {
stop: 1,
prevent: 1 << 1,
......@@ -640,18 +562,21 @@ class UniNode extends UniEventTarget {
: oldChild;
}
}
const ATTR_CLASS = 'class';
const ATTR_STYLE = 'style';
class UniBaseNode extends UniNode {
constructor(nodeType, nodeName, container) {
super(nodeType, nodeName, container);
this.attributes = Object.create(null);
this.style = null;
this._html = null;
this.style = proxyStyle(new UniCSSStyleDeclaration());
// this.style = proxyStyle(new UniCSSStyleDeclaration())
}
get className() {
return (this.attributes['class'] || '');
return (this.attributes[ATTR_CLASS] || '');
}
set className(val) {
this.setAttribute('class', val);
this.setAttribute(ATTR_CLASS, val);
}
get innerHTML() {
return '';
......@@ -672,22 +597,35 @@ class UniBaseNode extends UniNode {
}
}
getAttribute(qualifiedName) {
if (qualifiedName === ATTR_STYLE) {
return this.style;
}
return this.attributes[qualifiedName];
}
removeAttribute(qualifiedName) {
if (qualifiedName == ATTR_STYLE) {
this.style = null;
}
else {
delete this.attributes[qualifiedName];
}
if (this.pageNode && !this.pageNode.isUnmounted) {
this.pageNode.onRemoveAttribute(this, qualifiedName);
}
}
setAttribute(qualifiedName, value) {
if (qualifiedName === ATTR_STYLE) {
this.style = value;
}
else {
this.attributes[qualifiedName] = value;
}
if (this.pageNode && !this.pageNode.isUnmounted) {
this.pageNode.onSetAttribute(this, qualifiedName, value);
}
}
toJSON({ attr, normalize, } = {}) {
const { attributes, listeners, style, _text } = this;
const { attributes, style, listeners, _text } = this;
const res = {};
if (Object.keys(attributes).length) {
res.a = normalize ? normalize(attributes) : attributes;
......@@ -704,9 +642,8 @@ class UniBaseNode extends UniNode {
});
res.e = normalize ? normalize(e, false) : e;
}
const cssStyle = style.toJSON();
if (cssStyle) {
res.s = normalize ? normalize(cssStyle) : cssStyle;
if (style !== null) {
res.s = normalize ? normalize(style) : style;
}
if (!attr) {
res.i = this.nodeId;
......@@ -895,4 +832,4 @@ function getEnvLocale() {
return (lang && lang.replace(/[.:].*/, '')) || 'en';
}
export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, BACKGROUND_COLOR, BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, EventModifierFlags, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, ON_REACH_BOTTOM_DISTANCE, PLUS_RE, PRIMARY_COLOR, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, addFont, cache, cacheStringFunction, callOptions, createRpx2Unit, debounce, decode, decodedQuery, defaultRpx2Unit, formatDateTime, formatLog, getCustomDataset, getEnvLocale, getLen, initCustomDataset, invokeArrayFns, isBuiltInComponent, isCustomElement, isNativeTag, isServiceCustomElement, isServiceNativeTag, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, sanitise, scrollTo, stringifyQuery, updateElementStyle };
export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CLASS, ATTR_STYLE, BACKGROUND_COLOR, BUILT_IN_TAGS, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, EventModifierFlags, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, ON_REACH_BOTTOM_DISTANCE, PLUS_RE, PRIMARY_COLOR, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, addFont, cache, cacheStringFunction, callOptions, createRpx2Unit, debounce, decode, decodedQuery, defaultRpx2Unit, formatDateTime, formatLog, getCustomDataset, getEnvLocale, getLen, initCustomDataset, invokeArrayFns, isBuiltInComponent, isCustomElement, isNativeTag, isServiceCustomElement, isServiceNativeTag, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, sanitise, scrollTo, stringifyQuery, updateElementStyle };
packages/uni-shared/src/vdom/Node.ts
浏览文件 @ 17298658
......@@ -3,11 +3,7 @@ import { extend } from '@vue/shared'
import { UniElement } from './Element'
import { DOMException } from './DOMException'
import { normalizeEventType, UniEventListener, UniEventTarget } from './Event'
import {
proxyStyle,
UniCSSStyleDeclaration,
UniCSSStyleDeclarationJSON,
} from './Style'
import { UniCSSStyleDeclarationJSON } from './Style'
import { encodeModifier } from './encode'
export const NODE_TYPE_PAGE = 0
......@@ -256,9 +252,11 @@ export interface UniNodeJSON {
t?: string
}
export const ATTR_CLASS = 'class'
export const ATTR_STYLE = 'style'
export class UniBaseNode extends UniNode {
attributes: Record<string, unknown> = Object.create(null)
style: UniCSSStyleDeclaration
style: null | string | Record<string, string | string[]> = null
protected _html: string | null = null
......@@ -268,15 +266,15 @@ export class UniBaseNode extends UniNode {
container: UniElement | IUniPageNode
) {
super(nodeType, nodeName, container)
this.style = proxyStyle(new UniCSSStyleDeclaration())
// this.style = proxyStyle(new UniCSSStyleDeclaration())
}
get className() {
return (this.attributes['class'] || '') as string
return (this.attributes[ATTR_CLASS] || '') as string
}
set className(val: string) {
this.setAttribute('class', val)
this.setAttribute(ATTR_CLASS, val)
}
get innerHTML() {
......@@ -314,18 +312,29 @@ export class UniBaseNode extends UniNode {
}
getAttribute(qualifiedName: string) {
if (qualifiedName === ATTR_STYLE) {
return this.style
}
return this.attributes[qualifiedName]
}
removeAttribute(qualifiedName: string): void {
if (qualifiedName == ATTR_STYLE) {
this.style = null
} else {
delete this.attributes[qualifiedName]
}
if (this.pageNode && !this.pageNode.isUnmounted) {
this.pageNode.onRemoveAttribute(this, qualifiedName)
}
}
setAttribute(qualifiedName: string, value: unknown): void {
if (qualifiedName === ATTR_STYLE) {
this.style = value as string | Record<string, string | string[]>
} else {
this.attributes[qualifiedName] = value
}
if (this.pageNode && !this.pageNode.isUnmounted) {
this.pageNode.onSetAttribute(this, qualifiedName, value)
}
......@@ -339,7 +348,7 @@ export class UniBaseNode extends UniNode {
children?: boolean
normalize?: (val: any, includeValue?: boolean) => any | number
} = {}) {
const { attributes, listeners, style, _text } = this
const { attributes, style, listeners, _text } = this
const res: Partial<UniNodeJSON> = {}
if (Object.keys(attributes).length) {
res.a = normalize ? normalize(attributes) : attributes
......@@ -356,9 +365,8 @@ export class UniBaseNode extends UniNode {
})
res.e = normalize ? normalize(e, false) : e
}
const cssStyle = style.toJSON()
if (cssStyle) {
res.s = normalize ? normalize(cssStyle) : cssStyle
if (style !== null) {
res.s = normalize ? normalize(style) : style
}
if (!attr) {
res.i = this.nodeId
......
packages/uni-shared/src/vdom/index.ts
浏览文件 @ 17298658
......@@ -7,6 +7,8 @@ export {
normalizeEventType,
} from './Event'
export {
ATTR_CLASS,
ATTR_STYLE,
NODE_TYPE_PAGE,
NODE_TYPE_ELEMENT,
NODE_TYPE_TEXT,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或