Web components的使用

概述Web components的使用

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家，也给大家做个参考。

<!-- 定义组件 --><template>    <!-- 组件模板 -->    <style>        :host {            display: block;            wIDth: 120px;            height: 120px;            Font: 24px monospace;        }        .circle-sector {            wIDth: 100%;            height: 100%;            Box-sizing: border-Box;            border-radius: 50%;            background-color: #39B4CC;            padding: 10px;            will-change: background-image;        }        :host(.big) .circle-sector {            padding: 15px;        }        .circle-sector .inner {            background: #E6F4F7;            wIDth: 100%;            height: 100%;            Box-sizing: border-Box;            border-radius: 50%;            text-align: center; }        .circle-sector .inner::before {            content: "";            height: 100%;            visibility: hIDden;            display: inline-block;            vertical-align: mIDdle;        }    </style>    <div >        <div ></div>    </div></template><script>    // 在本文件被导入后自动执行    (function(thisDoc) {        "use strict"; // 启用严格模式        // 所有实例元素对象的公共prototype        var XProgress = Object.create(HTMLElement.prototype,{            value: {// 公有属性                get: function() { return this._value; },set: function(process) {                    this._value = process;                    if (!this._circleSector || !this._innerText) return;                    if (process < .5) {                        this._circleSector.style.backgroundImage =                                "linear-gradIEnt(" + (90 + 360 * process) + "deg,transparent 50%,#A2ECFB 50%)," +                                "linear-gradIEnt(90deg,#A2ECFB 50%,transparent 50%)"                    } else {                        this._circleSector.style.backgroundImage =                                "linear-gradIEnt(" + (90 + 360 * (process - .5)) + "deg,#39B4CC 50%),transparent 50%)"                    }                    this._innerText.textContent = (process * 100).toFixed(1) + "%";                    this.setAttribute("value",process);                    this.dispatchEvent(new CustomEvent("changed",{ detail: { value: process } }));                }            }        });        // 公有方法        XProgress.animate = function(process,forTime) {            var startTime,startProcess = this.value;            var _this = this;            this.cancelAnimate();            var fn = function (time) {                startTime = startTime || time;                var p = (time - startTime) / forTime * (process - startProcess) + startProcess;                if ((process > startProcess && p >= process) || (process < startProcess && p <= process)) {                    p = process;                    _this._animateHandle = undefined;                } else {                    _this._animateHandle = requestAnimationFrame(fn);                }                _this.value = p;                _this.dispatchEvent(new CustomEvent(_this._animateHandle ? "animating" : "animated",{ detail: { value: process } }));            };            this._animateHandle = requestAnimationFrame(fn);        };        XProgress.cancelAnimate = function() {            if (this._animateHandle !== undefined) {                cancelAnimationFrame(this._animateHandle);                this._animateHandle = undefined;            }        };        // 组件被创建时执行，相当于构造函数        XProgress.createdCallback = function() {            // 创建Shadow root，自定义模板放入其中            var sr = this.createShadowRoot();            var template = thisDoc.querySelector("template");            var node = document.importNode(template.content,true);            this._circleSector = node.querySelector(".circle-sector");            this._innerText = this._circleSector.querySelector(".inner");            var initValue = this._value || Number(this.getAttribute("value"));            if (!isNaN(initValue)) {                this.value = initValue;            }            sr.appendChild(node);        };        // 注册组件        document.registerElement("x-progress",{ prototype: XProgress });    })(document.currentScript.ownerdocument); // ownerdocument指向被导入的文档对象（本文件）</script>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的Web components的使用全部内容，希望文章能够帮你解决Web components的使用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。