使用 web components 创建显示工业标准的组件

企业微信截图_17237076727339.png

<technical-standard 
standard='{"type":"同轴度","typeIcon":"⊙","icon":"#","theoretical":"23","standard":"A-G"}'></technical-standard>

<script src="technicalStandard.js"></script>

<script>
        // 异步修改组件值
        setTimeout(function(){
            let obj = {
                type: '',
                theoretical: '221',
                code: 'G',
                grade:'2',
                up:'+0.63',
                down:'-0.23'
            }
            
            // 显示异步数据的方式
            document.querySelector('#ts1').setAttribute('standard',JSON.stringify(obj))

    
        },2000)
    </script>

// 原生H5组件,负责根据传入的standard参数显示技术要求标准
// type:公差类型 
// typeIcon:  同轴度 和位置度 符号
// icon: 公差符号
// theoretical: 理论值
// code: 公差代号
// grade: 公差等级
// value: 公差带
// up: 上篇差
// down: 下篇差
// standard: 基准
// 使用方式 : 
// <script src="technicalStandard.js"></script>
// <technical-standard standard='{"theoretical":"19","code":"h","grade":"3","value":"±6"}'>
class technicalStandard extends HTMLElement {
    constructor() {
        super()
        let template = document.createElement('template')
        this.shadow = this.attachShadow({
            mode: 'closed'
        })
        template.innerHTML = `<div><div/>`
        const style = document.createElement('style')
        style.textContent = `
                .b3{
                    display: inline-block;padding: 0 3px;border: 1px solid #333333;line-height: 26px;
                }
                `
        this.shadow.append(template.content.cloneNode(true))
        this.shadow.appendChild(style)
    }
    // 添加需要监听的属性
    static get observedAttributes() {
        return ['standard']
    }


    //更新回调
    attributeChangedCallback(name, o, n) {

        if (name == 'standard') {
            let data = JSON.parse(n)
            let html = ''

            // 公差类型为空白 ，直径公差，半径公差 :（符号icon） 理论值theoretical + 公差代号code + 公差等级grade （上偏差up，下偏差down）
            if (!data?.type || ['直径公差', '半径公差'].includes(data.type)) {
                html = (data.icon || '') + data.theoretical + data?.code + data?.grade
                if (!data.value) { // 如果有偏差值就使用偏差值
                    html += `(<math>
                                        <mrow>
                                            <mfenced open="[" close="]">
                                                <mtable>
                                                    <mtr>
                                                        <mtd>
                                                            <mi style="font-size:10px;">${data.up}</mi>
                                                        </mtd>
                                                    </mtr>
                                                    <mtr>
                                                        <mtd>
                                                            <mi style="font-size:10px;">${data.down}</mi>
                                                        </mtd>
                                                    </mtr>
                                                </mtable>
                                            </mfenced>
                                        </mrow>
                                    </math>)`
                } else { // 没有就显示上下偏差
                    html += data.value
                } 
            } else if (data.type == '粗糙度') { 
                html = `Ra${data.theoretical}`
            }
            // 剩下的公差类型都是使用边框包围的类型，公差符号icon + 理论值theoretical + 基准standard  3个框
            // 差别是：同轴度和位置度 第一个框为专用符号，公差符号放在第二个框和理论值一起，平面度没有基准
            else if (['同轴度', '位置度'].includes(data.type)) {
                html =`<span class="b3">${data.typeIcon}</span><span class="b3">${data.icon+data.theoretical}</span><span class="b3">${data.standard}</span>`
             
            }
            //平面度没有基准
            else if (data.type == "平面度") {
                html = `<span class="b3">${data.icon}</span><span class="b3">${data.theoretical}</span>`
 
            } else {
                html =`<span class="b3">${data.icon}</span><span class="b3">${data.theoretical}</span><span class="b3">${data.standard}</span>`
                 
            }
            
            this.shadow.querySelector('div').innerHTML = html
        }
    }
}

window.customElements.define('technical-standard', technicalStandard)