首页 问答 文章
登陆
登陆 注册新账号
注册
已有账号登陆
WebComponent
2019-04-22 17:59:14.0

customElements.define定义html标签组件

单独在文件下面创建一个WorkCard.js 文件

const template = document.createElement('template');
template.innerHTML = `
<style>
    :host {
      display: inline-block;
      width: 255px;
    }
    .wrapper {
      padding: 40px 20px;
      border-radius: 12px;
      background-color: #fff;
      box-shadow: 0 0 8px #ccc;
    }
    .avatar {
      text-align: center;
    }
    .avatar img {
      display: inline-block;
      width: 160px;
      height: 160px;
      border: none;
      border-radius: 50%;
      object-fit: cover;
      background-color: #f8f8f8;
    }
    .list {
      padding-left: 0;
      margin-top: 40px;
      margin-bottom: 0;
      list-style-type: none;
    }
    .item {
      display: flex;
      margin-top: 10px;
      margin-bottom: 10;
    }
    .item span {
      display: inline-block;
    }
    .label {
      flex: 0 0 auto;
      color: #39c;
    }
    .value {
      flex: 1;
      border-bottom: 1px dashed #ccc;
      color: #666;
      font-weight: 700;
    }
  </style>
  <div class="wrapper">
    <slot></slot>
    <div class="avatar">
      <img id="avatar" src="" alt="avatar">
    </div>
    <ul class="list">
      <li class="item">
        <span class="label">姓名:</span>
        <span id="name" class="value"></span>
      </li>
      <li class="item">
        <span class="label">部门:</span>
        <span id="department" class="value"></span>
      </li>
      <li class="item">
        <span class="label">职位:</span>
        <span id="position" class="value"></span>
      </li>
    </ul>
  </div>
`;
customElements.define('work-card', class extends HTMLElement {
    // 订阅属性
    static get observedAttributes() {
        return [ 'avatar', 'name', 'department', 'position' ]
    }
    // 初始化
    constructor() {
        super()
        console.log('constructed!');
        // 获取属性数据
        this.avatar = this.getAttribute('avatar')
        this.name = this.getAttribute('name')
        this.department = this.getAttribute('department')
        this.position = this.getAttribute('position')
        // 获取模板
        // const $template = document.currentScript.ownerDocument.querySelector('template')
        // const content = $template.content
        // 创建影子节点
        const shadowRoot = this.attachShadow({mode: 'open'})
        shadowRoot.appendChild(template.content.cloneNode(true))

        // 获取数据节点
        this.$avatar = shadowRoot.querySelector('#avatar')
        this.$name = shadowRoot.querySelector('#name')
        this.$department = shadowRoot.querySelector('#department')
        this.$position = shadowRoot.querySelector('#position')

        this.$name.addEventListener('click', ()=> {
            console.log(this.name)
            alert(this.name)
        })
    }
    // 组件插入DOM
    connectedCallback() {
        console.log('connected!');
        this.render()
    }

    disconnectedCallback() {
        console.log('disconnected!');
    }
    // 属性变化
    attributeChangedCallback(name, oldVal, newVal) {
        console.log(`Attribute: ${name} changed!`);
        this[name] = newVal
        this.render()
    }

    adoptedCallback() {
        console.log('adopted!');
    }
    // 渲染
    render() {
        this.$avatar.setAttribute('src', this.avatar)
        this.$name.textContent = this.name
        this.$department.textContent = this.department
        this.$position.textContent = this.position
    }
})

然后在需要用的地方引入

<script type="module">
    import * as hw from './webcomponents/WorkCard.js'
</script>

使用

<work-card id="workCard" avatar="qr.jpg" name="方珍" department="技术部" position="JAVA开发工程师">
    <div class="number">No.001</div>
</work-card>
热门文章
1
input="file" 浏览时只显示指定文件类型 xls、xlsx、csv
2
input 上传第二次不能选择同一文件
3
有时候操作系统的时间与pg的时间不一致
4
java stream 转二维结构为树状结构
5
java Object和Map转化
6
让Node.js项目实现热部署,修改文件避免重启
7
golang  mysql操作
8
BigDecimal的用法详解(保留两位小数,四舍五入,数字格式化)
9
linux 自动运行脚本
10
java label
最新文章
1
postgresql数据库
2
Mac 启动加载文件位置(可设置环境变量)
3
什么是ORM?
4
微信小程序自定义组件设置回调方法
5
java stream 转二维结构为树状结构
6
正则表达式
7
golang  mysql操作
8
利用Opencv实现简单的图片切割(JAVA)
9
PostgreSQL JSON 数据库
10
linux 自动运行脚本
热门标签
mac
java
jvm
微信小程序
小程序
自定义组件
回调
回调方法
golang
postgresql