我要投稿

elementui选择卡片-Web Components如何在Element UI类中实现Card卡片

bendan520 elementui

2023-08-23 0 6,148 百度已收录

进不了网站？换个网络试试！

大多数人都不太理解这篇《WebComponents如何在ElementUI中实现卡片》一文的知识点，所以小编为大家总结了以下内容。内容详细，步骤清晰，具有一定的参考价值。希望大家看完这篇文章后，有所收获。接下来我们看一下《WebComponents如何在ElementUI类中实现Card卡》这篇文章。

WebComponents核心组成1.CustomElements

自定义HTML标签elementui选择卡片，称为自定义元素（customelement）。根据规范，自定义元素的名称必须包含连字符 -，用于区别于原生 HTML 元素。因此，不能写。


  
    
  
  
    
    
      
    
  


  class ComCard extends HTMLElement {
    constructor() {
      super()
      var tplEle = document.getElementById('custom-card')
      this.append(tplEle)
    }
  }
  window.customElements.define('com-card', ComCard)

这会注册一个自定义元素标签以进行浏览器感知渲染。

2. 影子 DOM

ShadowDOM 是 DOM 的封装。标记结构、样式和行为可以隐藏并与页面上的其他代码隔离elementui选择卡片，以确保不同部分不会混合在一起，使代码更加干净整洁。

使用自定义元素的 this.attachShadow() 方法来启用 ShadowDOM。

class ComCard extends HTMLElement {
  constructor() {
    super()
    var shadow = this.attachShadow({mode: 'closed'})  // open
    var tplEle = document.getElementById('custom-card')
    shadow.appendChild(tplEle)
  }
}
window.customElements.define('com-card', ComCard);

参数{mode:'close'}表示ShadowDOM处于关闭状态，不允许外部访问。

3. 模板和插槽

由于组件的样式要和代码一起封装，所以只对自定义元素生效，不影响外部全局样式。因此，可以在其上编写样式，以便可以多次重用它作为自定义元素结构的基础。

  
    .com-card {
    }
  
  
  


  class ComCard extends HTMLElement {
    constructor() {
      super();
      var shadow = this.attachShadow({mode: 'closed'})  // open
      var tplEle = document.getElementById('custom-card-template')
      var content = tplEle.content.cloneNode(true)
      shadow.appendChild(content)
    }
  }
  window.customElements.define('com-card', ComCard);

完整代码



  
  Web Component
  
    * {
        box-sizing: border-box;
    }
    body {
        font-size: 14px;
    }
    .box {
        padding: 5px 0 30px;
    }
    .box .caption {
        display: none;
    }
    .box h2 {
        text-align: center;
    }
    .box li {
        color: #666;
        font-size: 14px;
        line-height: 1.8;
        margin-top: 15px;
    }
    .img {
        display: block;
        width: 80%;
        margin: 0 !important;
    }
    .card-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-title {
        color: #333;
        font-size: 16px;
    }
    .card-head-btn {
        color: #409eff;
        cursor: pointer;
        text-decoration: none !important;
    }
    .card-head-btn:hover {
        text-decoration: none;
    }
  



  Web Component
  
    
      卡片名称
      操作按钮
    
    
  
  

  

  
    
      卡片名称
      操作按钮
    
    
    
      君不见黄河之水天上来，奔流到海不复回。
      君不见高堂明镜悲白发，朝如青丝暮成雪。
      天生我材必有用，千金散尽还复来。
    
  


  
    .com-card {
        min-width: 200px;
        min-height: 100px;
        border-radius: 4px;
        border: 1px solid #ebeef5;
        background-color: #fff;
        overflow: hidden;
        color: #303133;
        transition: .3s;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .com-card-head {
        padding: 10px 20px;
        border-bottom: 1px solid #ebeef5;
        box-sizing: border-box;
    }
    .com-card-body {
        padding: 20px;
    }
    .link-wrap {
        text-align: left;
        padding-top: 20px;
    }
    .link {
        display: inline-block;
        height: 42px;
        line-height: 43px;
        padding: 0 30px;
        text-align: center;
        cursor: pointer;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        -webkit-appearance: none;
        box-sizing: border-box;
        outline: none;
        transition: .1s;
        font-weight: 500;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        font-size: 14px;
        border-radius: 4px;
        text-decoration: none !important;
    }
  
  
    
      
    
    
      
      
        
      
    
  


  class ComCard extends HTMLElement {
    constructor() {
      super();
      var shadow = this.attachShadow({mode: 'closed'})  // open
      var tplEle = document.getElementById('custom-card-template')
      var content = tplEle.content.cloneNode(true)
      var attrList = Array.from(this.attributes);
      var props = attrList.reduce((prev, item)=>{
        prev[item.name] = item.value
        return prev
      }, {})
      if (props['data-show-head']!=='1') {
        var head = content.querySelector('.com-card-head')
        head.remove()
      }
      var urlEle = content.querySelector('.link')
      if (props['data-url'] && props['data-title']) {
        urlEle.href = props['data-url']
        urlEle.title = props['data-title']
        urlEle.innerText = props['data-title']
      } else {
        urlEle.remove()
      }
      shadow.appendChild(content)
    }
    connectedCallback(){
      //在这里发送数据请求（Ajax）
      console.log('connectedCallback')
    }
    //被从文档DOM中删除时调用
    disconnectedCallback(){
      console.log('disconnectedCallback')
    }
    //被移动到新的文档时调用
    adoptedCallback(){
      console.log('adoptedCallback')
    }
    //当增加、删除、修改自身的属性时被调用
    attributeChangedCallback(){
      console.log('attributeChangedCallback')
    }
  }
  window.customElements.define('com-card', ComCard);
  function hello() {
    alert('Hello，Web Component')
  }