feat(评论组件): 添加自定义CSS样式支持
新增_customStyleElement属性和_applyCustomCss方法,用于根据配置动态加载自定义CSS样式
This commit is contained in:
@@ -43,6 +43,7 @@ export class CWDComments {
|
|||||||
this.commentForm = null;
|
this.commentForm = null;
|
||||||
this.commentList = null;
|
this.commentList = null;
|
||||||
this.formContainer = null;
|
this.formContainer = null;
|
||||||
|
this.customStyleElement = null;
|
||||||
this.store = null;
|
this.store = null;
|
||||||
this.unsubscribe = null;
|
this.unsubscribe = null;
|
||||||
this.likeState = {
|
this.likeState = {
|
||||||
@@ -126,6 +127,7 @@ export class CWDComments {
|
|||||||
if (this.config.theme) {
|
if (this.config.theme) {
|
||||||
this.mountPoint.setAttribute('data-theme', this.config.theme);
|
this.mountPoint.setAttribute('data-theme', this.config.theme);
|
||||||
}
|
}
|
||||||
|
this._applyCustomCss();
|
||||||
}
|
}
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
@@ -549,6 +551,37 @@ export class CWDComments {
|
|||||||
|
|
||||||
this.store.loadComments();
|
this.store.loadComments();
|
||||||
}
|
}
|
||||||
|
this._applyCustomCss();
|
||||||
|
}
|
||||||
|
|
||||||
|
_applyCustomCss() {
|
||||||
|
if (!this.shadowRoot) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const rawUrl =
|
||||||
|
this.config && typeof this.config.customCssUrl === 'string'
|
||||||
|
? this.config.customCssUrl
|
||||||
|
: '';
|
||||||
|
const url = rawUrl.trim();
|
||||||
|
if (!url) {
|
||||||
|
if (this.customStyleElement && this.customStyleElement.parentNode) {
|
||||||
|
this.customStyleElement.parentNode.removeChild(this.customStyleElement);
|
||||||
|
}
|
||||||
|
this.customStyleElement = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.customStyleElement) {
|
||||||
|
const link = document.createElement('link');
|
||||||
|
link.rel = 'stylesheet';
|
||||||
|
link.href = url;
|
||||||
|
this.shadowRoot.appendChild(link);
|
||||||
|
this.customStyleElement = link;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.customStyleElement.href = url;
|
||||||
|
if (this.customStyleElement.parentNode !== this.shadowRoot) {
|
||||||
|
this.shadowRoot.appendChild(this.customStyleElement);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_initLikeButton(header) {
|
_initLikeButton(header) {
|
||||||
|
|||||||
Reference in New Issue
Block a user