feat(评论组件): 添加自定义CSS样式支持
新增_customStyleElement属性和_applyCustomCss方法,用于根据配置动态加载自定义CSS样式
This commit is contained in:
@@ -43,6 +43,7 @@ export class CWDComments {
|
||||
this.commentForm = null;
|
||||
this.commentList = null;
|
||||
this.formContainer = null;
|
||||
this.customStyleElement = null;
|
||||
this.store = null;
|
||||
this.unsubscribe = null;
|
||||
this.likeState = {
|
||||
@@ -126,6 +127,7 @@ export class CWDComments {
|
||||
if (this.config.theme) {
|
||||
this.mountPoint.setAttribute('data-theme', this.config.theme);
|
||||
}
|
||||
this._applyCustomCss();
|
||||
}
|
||||
|
||||
(async () => {
|
||||
@@ -549,6 +551,37 @@ export class CWDComments {
|
||||
|
||||
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) {
|
||||
|
||||
Reference in New Issue
Block a user