easy-component-ui 2.0.4 → 2.1.0

package/components/ea-aside/index.js

@@ -1 +1,54 @@
-import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-aside_wrap {\n  height: 100%;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n.ea-aside_wrap ::slotted(ea-main) {\n  overflow: auto;\n}\n";export class EaAside extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML='\n            <aside class="ea-aside_wrap" part="container">\n                <slot></slot>\n            </aside>\n        ',this.#e=e.querySelector(".ea-aside_wrap"),this.build(e,stylesheet)}get width(){return this.getAttrNumber("width")||200}set width(e){this.setAttribute("width",e),this.#e.style.width=`${e}px`}connectedCallback(){this.width=this.width}}customElements.get("ea-aside")||customElements.define("ea-aside",EaAside);
+import Base from '../Base.js';
+import '../ea-icon/index.js'
+
+const stylesheet = `
+.ea-aside_wrap {
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.ea-aside_wrap ::slotted(ea-main) {
+  overflow: auto;
+}
+`;
+
+export class EaAside extends Base {
+    #wrap;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <aside class="ea-aside_wrap" part="container">
+                <slot></slot>
+            </aside>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-aside_wrap');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- width 侧边栏宽度 -------
+    // #region
+    get width() {
+        return this.getAttrNumber('width') || 200;
+    }
+
+    set width(value) {
+        this.setAttribute('width', value);
+
+        this.#wrap.style.width = `${value}px`;
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        this.width = this.width;
+    }
+}
+
+if (!customElements.get('ea-aside')) {
+    customElements.define('ea-aside', EaAside);
+}

package/components/ea-aside/index.scss

@@ -0,0 +1,12 @@
+.ea-aside_wrap {
+  height: 100%;
+
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+
+  ::slotted(ea-main) {
+    overflow: auto;
+  }
+}

package/components/ea-avatar/index.css

@@ -0,0 +1,66 @@
+@import "../ea-icon/css/fontello.css";
+@import "../ea-icon/css/animation.css";
+@font-face {
+  font-size: 1rem;
+  font-size: 16px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  src: url("../ea-icon/font/fontello.eot") format("embedded-opentype"), url("../ea-icon/font/fontello.ttf") format("truetype"), url("../ea-icon/font/fontello.woff") format("woff"), url("../ea-icon/font/fontello.woff2") format("woff2"), url("../ea-icon/font/fontello.svg") format("svg");
+}
+.ea-avatar_wrap .ea-avatar {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  color: #ffffff;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--fill img {
+  object-fit: fill;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--contain img {
+  object-fit: contain;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--cover img {
+  object-fit: cover;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--none img {
+  object-fit: none;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--scale-down img {
+  object-fit: scale-down;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--normal {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--large {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--medium {
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--small {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+}
+.ea-avatar_wrap .ea-avatar .ea-avatar--text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--circle {
+  border-radius: 50%;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--square {
+  border-radius: 5px;
+}
+.ea-avatar_wrap .ea-avatar .ea-avatar--img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/components/ea-avatar/index.js

@@ -1 +1,156 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{errorAvatar}from"./src/assets/errorAvatar.js";import{iconAvatar,textAvatar}from"./src/assets/iconAndTextAvatar.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaAvatar extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-avatar_wrap" part=\'container\'>\n                <span class="ea-avatar" part="avatar">\n                    <slot></slot>\n                </span>\n            </div>\n        ',this.#t=t.querySelector(".ea-avatar"),this.build(t,stylesheet)}get size(){const t=this.getAttrNumber("size"),s=this.getAttribute("size");return 0!==t&&t?this.getAttrNumber("size"):["large","medium","small"].includes(s)?s:"normal"}set size(t){this.setAttribute("size",t),"number"==typeof t?(this.#t.style.width=`${t}px`,this.#t.style.height=`${t}px`,this.#t.style.lineHeight=`${t}px`):"string"==typeof t&&this.#t.classList.add(`ea-avatar--${t}`)}get shape(){const t=this.getAttribute("shape");return["circle","square"].includes(t)?t:"circle"}set shape(t){this.setAttribute("shape",t),this.#t.classList.add(`ea-avatar--${this.shape}`)}get src(){return this.getAttribute("src")}set src(t){if(!t)return;this.setAttribute("src",t);const s=new Image;s.src=t,s.onload=()=>{this.#t.innerHTML=`<img class="ea-avatar--img" src="${t}" alt="头像">`},s.onerror=t=>{this.#t.innerHTML=errorAvatar,this.dispatchEvent(new CustomEvent("error",{detail:{error:t}}))}}get icon(){return this.getAttribute("icon")||""}set icon(t){this.setAttribute("icon",t),this.#t.innerHTML=iconAvatar(t)}get fit(){return this.getAttribute("fit")||"cover"}set fit(t){this.setAttribute("fit",t),this.#t.classList.add(`ea-avatar-fill--${t}`)}connectedCallback(){this.size=this.size,this.shape=this.shape,this.src=this.src,this.src&&(this.fit=this.fit),!this.src&&this.icon&&(this.icon=this.icon),""===this.innerHTML||this.icon||this.src||(this.#t.innerHTML=textAvatar(this.innerHTML))}}customElements.get("ea-avatar")||customElements.define("ea-avatar",EaAvatar);
+import Base from '../Base.js';
+
+import "../ea-icon/index.js"
+
+import { errorAvatar } from './src/assets/errorAvatar.js';
+import { iconAvatar, textAvatar } from './src/assets/iconAndTextAvatar.js';
+
+import { stylesheet } from "./src/style/stylesheet.js"
+
+
+export class EaAvatar extends Base {
+    #avatar;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        shadowRoot.innerHTML = `
+            <div class="ea-avatar_wrap" part='container'>
+                <span class="ea-avatar" part="avatar">
+                    <slot></slot>
+                </span>
+            </div>
+        `;
+
+        this.#avatar = shadowRoot.querySelector('.ea-avatar');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- size 图片大小 -------
+    // #region
+    get size() {
+        const sizeNumber = this.getAttrNumber('size');
+        const sizeString = this.getAttribute('size');
+
+        if (sizeNumber === 0 || !sizeNumber) {
+            return ['large', 'medium', 'small'].includes(sizeString) ? sizeString : 'normal';
+        }
+
+        return this.getAttrNumber('size');
+    }
+
+    set size(value) {
+        this.setAttribute('size', value);
+
+        if (typeof value === "number") {
+            this.#avatar.style.width = `${value}px`;
+            this.#avatar.style.height = `${value}px`;
+            this.#avatar.style.lineHeight = `${value}px`;
+        } else if (typeof value === "string") {
+            this.#avatar.classList.add(`ea-avatar--${value}`);
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- shape 图片形状 -------
+    // #region
+    get shape() {
+        const shape = this.getAttribute('shape');
+
+        return ['circle', 'square'].includes(shape) ? shape : 'circle';
+    }
+
+    set shape(value) {
+        this.setAttribute('shape', value);
+        this.#avatar.classList.add(`ea-avatar--${this.shape}`);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- src 图片链接 -------
+    // #region
+    get src() {
+        return this.getAttribute('src');
+    }
+
+    set src(value) {
+        if (!value) return;
+
+        this.setAttribute('src', value);
+
+        const image = new Image();
+        image.src = value;
+
+        image.onload = () => {
+            this.#avatar.innerHTML = `<img class="ea-avatar--img" src="${value}" alt="头像">`;
+        };
+
+        image.onerror = (e) => {
+            this.#avatar.innerHTML = errorAvatar;
+
+            this.dispatchEvent(new CustomEvent('error', {
+                detail: {
+                    error: e,
+                },
+            }));
+        };
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- icon 图标 -------
+    // #region
+    get icon() {
+        return this.getAttribute('icon') || '';
+    }
+
+    set icon(value) {
+        this.setAttribute('icon', value);
+
+        this.#avatar.innerHTML = iconAvatar(value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- fit 图片容器适应 -------
+    // #region
+    get fit() {
+        return this.getAttribute('fit') || 'cover';
+    }
+
+    set fit(value) {
+        this.setAttribute('fit', value);
+
+        this.#avatar.classList.add(`ea-avatar-fill--${value}`);
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        this.size = this.size;
+
+        this.shape = this.shape;
+
+        this.src = this.src;
+
+        if (this.src) {
+            this.fit = this.fit;
+        }
+
+        if (!this.src && this.icon) {
+            this.icon = this.icon;
+        }
+
+        if (this.innerHTML !== "" && !this.icon && !this.src) {
+            this.#avatar.innerHTML = textAvatar(this.innerHTML);
+        }
+    }
+}
+
+if (!customElements.get('ea-avatar')) {
+    customElements.define('ea-avatar', EaAvatar);
+}

package/components/ea-avatar/index.scss

@@ -0,0 +1,59 @@
+@import "../ea-ui-base-style.scss";
+@import "../ea-icon/index.scss";
+
+@mixin ea-avatar-size($size-name, $size) {
+  &.ea-avatar--#{$size-name} {
+    width: $size;
+    height: $size;
+    line-height: $size;
+  }
+}
+
+$fit-type: fill contain cover none scale-down;
+@mixin ea-object-fit($type) {
+  &.ea-avatar-fill--#{$type} {
+    img {
+      object-fit: $type;
+    }
+  }
+}
+
+.ea-avatar_wrap {
+  .ea-avatar {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    color: #ffffff;
+
+    @each $type in $fit-type {
+      @include ea-object-fit($type);
+    }
+
+    @include ea-avatar-size("normal", 50px);
+    @include ea-avatar-size("large", 40px);
+    @include ea-avatar-size("medium", 36px);
+    @include ea-avatar-size("small", 28px);
+
+    .ea-avatar--text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    &.ea-avatar--circle {
+      border-radius: 50%;
+    }
+
+    &.ea-avatar--square {
+      border-radius: 5px;
+    }
+
+    .ea-avatar--img {
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+    }
+  }
+}

package/components/ea-avatar/src/assets/defaultAvatar.js

@@ -1 +1,12 @@
-export const defaultAvatar='\n    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n        <defs>\n            <clipPath id="a">\n                <path d="M0 40h90v45H0z" />\n            </clipPath>\n        </defs>\n        <path fill="#c0c4cc" d="M0 0h100v100H0z" />\n        <circle cx="50" cy="35" r="20" fill="#fff" />\n        <circle cx="50" cy="97" r="40" fill="#fff" clip-path="url(#a)" />\n    </svg>\n';
+export const defaultAvatar = `
+    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+            <clipPath id="a">
+                <path d="M0 40h90v45H0z" />
+            </clipPath>
+        </defs>
+        <path fill="#c0c4cc" d="M0 0h100v100H0z" />
+        <circle cx="50" cy="35" r="20" fill="#fff" />
+        <circle cx="50" cy="97" r="40" fill="#fff" clip-path="url(#a)" />
+    </svg>
+`;

package/components/ea-avatar/src/assets/errorAvatar.js

@@ -1 +1,9 @@
-export const errorAvatar='\n    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n        <path fill="#c0c4cc" d="M0 0h100v100H0z" />\n        <path fill="#fff" d="M15 20h70v60H15z" />\n        <circle r="8" cx="32" cy="35" fill="#c0c4cc" />\n        <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />\n        <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />\n    </svg>\n';
+export const errorAvatar = `
+    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#c0c4cc" d="M0 0h100v100H0z" />
+        <path fill="#fff" d="M15 20h70v60H15z" />
+        <circle r="8" cx="32" cy="35" fill="#c0c4cc" />
+        <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />
+        <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />
+    </svg>
+`;

package/components/ea-avatar/src/assets/iconAndTextAvatar.js

@@ -1 +1,18 @@
-const background='\n<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n    <path fill="#c0c4cc" d="M0 0h100v100H0z" />\n</svg>\n';export const iconAvatar=a=>`\n        ${background}\n        <ea-icon class="fa ea-avatar--text" icon="${a}"></ea-icon>\n    `;export const textAvatar=a=>`\n        ${background}\n        <span class="ea-avatar--text">${a}</span>\n    `;
+const background = `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#c0c4cc" d="M0 0h100v100H0z" />
+</svg>
+`;
+export const iconAvatar = (icon) => {
+    return `
+        ${background}
+        <ea-icon class="fa ea-avatar--text" icon="${icon}"></ea-icon>
+    `;
+}
+
+export const textAvatar = (text) => {
+    return `
+        ${background}
+        <span class="ea-avatar--text">${text}</span>
+    `;
+}

package/components/ea-avatar/src/style/stylesheet.js

@@ -1 +1,61 @@
-export const stylesheet="\n.ea-avatar_wrap .ea-avatar {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n  color: #ffffff;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--fill img {\n  object-fit: fill;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--contain img {\n  object-fit: contain;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--cover img {\n  object-fit: cover;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--none img {\n  object-fit: none;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar-fill--scale-down img {\n  object-fit: scale-down;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--normal {\n  width: 50px;\n  height: 50px;\n  line-height: 50px;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--large {\n  width: 40px;\n  height: 40px;\n  line-height: 40px;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--medium {\n  width: 36px;\n  height: 36px;\n  line-height: 36px;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--small {\n  width: 28px;\n  height: 28px;\n  line-height: 28px;\n}\n.ea-avatar_wrap .ea-avatar .ea-avatar--text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--circle {\n  border-radius: 50%;\n}\n.ea-avatar_wrap .ea-avatar.ea-avatar--square {\n  border-radius: 5px;\n}\n.ea-avatar_wrap .ea-avatar .ea-avatar--img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n";
+
+export const stylesheet = `
+.ea-avatar_wrap .ea-avatar {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  color: #ffffff;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--fill img {
+  object-fit: fill;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--contain img {
+  object-fit: contain;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--cover img {
+  object-fit: cover;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--none img {
+  object-fit: none;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar-fill--scale-down img {
+  object-fit: scale-down;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--normal {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--large {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--medium {
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--small {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+}
+.ea-avatar_wrap .ea-avatar .ea-avatar--text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--circle {
+  border-radius: 50%;
+}
+.ea-avatar_wrap .ea-avatar.ea-avatar--square {
+  border-radius: 5px;
+}
+.ea-avatar_wrap .ea-avatar .ea-avatar--img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+`;

package/components/ea-backtop/index.css

@@ -0,0 +1,27 @@
+@import "../ea-icon/css/fontello.css";
+@import "../ea-icon/css/animation.css";
+@font-face {
+  font-size: 1rem;
+  font-size: 16px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  src: url("../ea-icon/font/fontello.eot") format("embedded-opentype"), url("../ea-icon/font/fontello.ttf") format("truetype"), url("../ea-icon/font/fontello.woff") format("woff"), url("../ea-icon/font/fontello.woff2") format("woff2"), url("../ea-icon/font/fontello.svg") format("svg");
+}
+.ea-backtop_wrap {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  right: 40px;
+  bottom: 40px;
+  cursor: pointer;
+  background-color: #fff;
+  border-radius: 50%;
+  color: #409eff;
+  font-size: 14px;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
+  opacity: 1;
+  z-index: 5;
+  transition: opacity 0.3s ease-in-out;
+}

package/components/ea-backtop/index.js

@@ -1 +1,167 @@
-import{timeout}from"../../utils/timeout.js";import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaBacktop extends Base{#t;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class=\"ea-backtop_wrap\" part='container' style='display: none'>\n                <slot></slot>\n            </div>\n        ",this.#t=t.querySelector(".ea-backtop_wrap"),this.build(t,stylesheet)}get target(){return this.getAttribute("target")||""}set target(t){this.setAttribute("target",t)}get right(){return this.getAttribute("right")||"40px"}set right(t){this.setAttribute("right",t),this.#t.style.right=t}get bottom(){return this.getAttribute("bottom")||"40px"}set bottom(t){this.setAttribute("bottom",t),this.#t.style.bottom=t}get icon(){return this.getAttribute("icon")||"icon-angle-up"}set icon(t){this.setAttribute("icon",t),this.#t.innerHTML=`\n            <ea-icon icon="${t}" part='icon'></ea-icon>\n        `}get visibilityHeight(){return this.getAttribute("visibility-height")||200}set visibilityHeight(t){this.setAttribute("visibility-height",t)}#e(t){let e=null,i=null;return"null"===t||""===t||null==t||"undefined"===t?(e=document,i=document.documentElement):(e=document.querySelector(t),i=document.querySelector(t)),{dom:e,scrollDom:i}}#i(t){t.scrollTop>this.visibilityHeight?(this.#t.style.display="flex",this.#t.ontransitionend=null,timeout((()=>{this.#t.style.opacity=1}),10)):(this.#t.style.opacity=0,this.#t.ontransitionend=()=>{this.#t.style.display="none"})}#s(){const{dom:t,scrollDom:e}=this.#e(this.target);this.#i(e),t.addEventListener("scroll",(()=>{this.#i(e)})),this.#t.addEventListener("click",(function(){let t=10,i=setInterval((()=>{t+=5,e.scrollTop-=t,e.scrollTop<=0&&(e.scrollTop=0,clearInterval(i),i=null,this.dispatchEvent(new CustomEvent("reachedTop",{})))}),12);this.dispatchEvent(new CustomEvent("backtop",{}))}))}connectedCallback(){this.target=this.target,this.right=this.right,this.bottom=this.bottom,this.visibilityHeight=this.visibilityHeight,this.icon=this.icon,this.#s()}}customElements.get("ea-backtop")||customElements.define("ea-backtop",EaBacktop);
+import { timeout } from '../../utils/timeout.js';
+import Base from '../Base.js';
+import "../ea-icon/index.js"
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaBacktop extends Base {
+    #wrap;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-backtop_wrap" part='container' style='display: none'>
+                <slot></slot>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-backtop_wrap');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- target 触发滚动的对象 -------
+    // #region
+    get target() {
+        return this.getAttribute('target') || '';
+    }
+
+    set target(value) {
+        this.setAttribute('target', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- right 滚动按钮距离右边的距离 -------
+    // #region
+    get right() {
+        return this.getAttribute('right') || '40px';
+    }
+
+    set right(value) {
+        this.setAttribute('right', value);
+
+        this.#wrap.style.right = value;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- bottom 滚动按钮距离下边的距离 -------
+    // #region
+    get bottom() {
+        return this.getAttribute('bottom') || '40px';
+    }
+
+    set bottom(value) {
+        this.setAttribute('bottom', value);
+
+        this.#wrap.style.bottom = value;
+    }
+    // #endregion
+    // ------- end ------- 
+
+    // ------- icon 图标类名 -------
+    // #region
+    get icon() {
+        return this.getAttribute('icon') || "icon-angle-up";
+    }
+
+    set icon(value) {
+        this.setAttribute('icon', value);
+
+        this.#wrap.innerHTML = `
+            <ea-icon icon="${value}" part='icon'></ea-icon>
+        `;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- visibility-height 滚动按钮显示和隐藏的触发条件 -------
+    // #region
+    get visibilityHeight() {
+        return this.getAttribute('visibility-height') || 200;
+    }
+
+    set visibilityHeight(value) {
+        this.setAttribute('visibility-height', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    #handleScrollEvent(targetName) {
+        let dom = null;
+        let scrollDom = null;
+
+        if (targetName === "null" || targetName === '' || targetName === null || targetName === undefined || targetName === 'undefined') {
+            dom = document;
+            scrollDom = document.documentElement;
+        } else {
+            dom = document.querySelector(targetName);
+            scrollDom = document.querySelector(targetName);
+        }
+
+        return { dom, scrollDom };
+    }
+
+    #handleBackTopBtnShow(scrollDom) {
+        if (scrollDom.scrollTop > this.visibilityHeight) {
+            this.#wrap.style.display = 'flex';
+            this.#wrap.ontransitionend = null;
+
+            timeout(() => {
+                this.#wrap.style.opacity = 1;
+            }, 10);
+        } else {
+            this.#wrap.style.opacity = 0;
+
+            this.#wrap.ontransitionend = () => {
+                this.#wrap.style.display = 'none';
+            };
+        }
+    }
+
+    #initScrollBtn() {
+        const { dom, scrollDom } = this.#handleScrollEvent(this.target);
+
+        this.#handleBackTopBtnShow(scrollDom);
+
+        dom.addEventListener('scroll', () => {
+            this.#handleBackTopBtnShow(scrollDom);
+        });
+
+        this.#wrap.addEventListener('click', function () {
+            let step = 10;
+
+            let timer = setInterval(() => {
+                step += 5;
+                scrollDom.scrollTop -= step;
+
+                if (scrollDom.scrollTop <= 0) {
+                    scrollDom.scrollTop = 0;
+                    clearInterval(timer);
+                    timer = null;
+
+                    this.dispatchEvent(new CustomEvent('reachedTop', {}));
+                }
+            }, 12);
+
+            this.dispatchEvent(new CustomEvent('backtop', {}));
+        });
+    }
+
+    connectedCallback() {
+        this.target = this.target;
+        this.right = this.right;
+        this.bottom = this.bottom;
+        this.visibilityHeight = this.visibilityHeight;
+        this.icon = this.icon;
+        
+        this.#initScrollBtn();
+    }
+}
+
+if (!customElements.get('ea-backtop')) {
+    customElements.define('ea-backtop', EaBacktop);
+}