jq原生封装组件

1、组件代码：

写组件的时间注意用Vue.extend，使用基础Vue构造器，创建一个"子类"。参数是一个包含组件选项的对象。,而不是new Vue,
data选项是特例，需要注意，在Vue.extend()中它必须是函数。

    var customCard = Vue.extend({

        template: "#card",
})

<div style="display: none;" id="card">
    <div class="card_container">
        <div class="card_box" v-if="type === 'text'">
            <div class="card_top_bg">
                <img src="../../src/assets/newImage/icon_1.png" style=" width:20px"></img>
                <span>{{ headerTitle }}</span>
            </div>
            <div class="card_caseStudy " v-html="data" >
            </div>
        </div>

        <div class="card_box" v-else-if="type === 'unit'">
            <div class="card_top_bg">
                <img src="../../src/assets/newImage/icon_1.png" style=" width:20px"></img>
                <span>{{ headerTitle }}</span>
            </div>
            <div class="card_unit">
                <div v-for="(item, index) in data" :key="index" >{{ item }}</div>
            </div>
        </div>
</div>
</div>

<script>
    var customCard = Vue.extend({
        template: "#card",
        props: {
            type: {
                type: String,
                default: ''
            },
            data: {
                type: [Object, Array, String],
                default: () => { [] }
            },
            tablecolumn: {
                type: [Object, Array, String],
                default: () => { [] }
            },
            headerTitle: {
                type: String,
                default: ''
            },
            rightText: { type: String, default: '' }
        },
        data() {
            return {
                myChart: null,
                echartsId: '',
                echartHeight: '',
            };
        },
        mounted() {
            if (this.type === 'swiper') {
                var mySwiper = new Swiper('.swiper-container', {
                    direction: 'vertical',
                    loop: true,
                    autoplay: 3000,
                    slidesPerView: 3,
                    paginationClickable: true,
                    spaceBetween: 3,
                    onTransitionEnd: function (swiper) {
                        var index = $('.swiper-slide-active').attr('data-swiper-slide-index');
                        $('.contentSwiper .img img').attr('src', `../../src/assets/newImage/TW/${Number(index) + 1}.jpg`)
                    }
                })
            } else if (this.type == 'echarts') {
                this.initEcharts()
                // this.pgEcharts()
            } /* else if (this.type === 'timeline') {
                $('#processId').on('click', function () {
                    $("#ganttHtml").css('display', 'block')
                })
            } */ 
        },
        unmounted() {
            this.myChart && this.myChart.dispose() && window.removeEventListener('resize', this.myChart.resize)
        },
        methods: {
            btnClick(e) {
                this.$emit('btnclick', e)
            },
            //初始加载echarts
            initEcharts() {
                try {
                    console.log('-------------------------------', this.$el.style.height);
                    let elHeight = this.$el.style.height
                    this.echartHeight = Number(elHeight.slice(0, elHeight.length - 2)) - 36 + 'px'
                } catch (error) {
                    console.error(error);
                    return false;
                }
                this.echartsId = 'e' + Math.round(Math.random() * 100000 + Math.random() * 100)
                this.$nextTick(this.pgEcharts)
            },
            pgEcharts() {
                var chartDom = document.getElementById(this.echartsId);
                this.myChart = echarts.init(chartDom);
                let option = this.data
                option && this.myChart.setOption(option);
                // 自适应
                window.addEventListener('resize', this.myChart.resize)
            },
        },
    });

    Vue.component('customCard', customCard)
</script>



<style lang="less">
    .card_container {
        width: 100%;
        height: calc(100% / 3.05) !important;
        box-sizing: border-box;
    }

    .card_container div {
        box-sizing: border-box;
    }

    .card_container .card_box {
        background: url(../../src/assets/newImage/bg.png) no-repeat;
        background-size: 100% 100%;
        height: 100%;
        width: 100%;
        position: relative;
    }

    .card_container .card_box .card_top_bg {
        background: url(../../src/assets/newImage/bg_biaoti.png) no-repeat;
        background-size: 100% 100%;
        height: 36px;
        display: flex;
        align-items: center;
        margin: 0 !important;
    }

    .card_container .card_box .card_top_bg span:first-of-type {
        flex-grow: 1;
    }

    .card_container .card_box .card_caseStudy {
        padding: 5px;
        overflow-y: auto;
        text-indent: 2em;
        line-height: 1.5;
        padding-left: 10px;
        height: calc(100% - 48px);
    }

    .card_container .card_box .card_unit {
        height: calc(100% - 45px);
        overflow-y: auto;
        padding: 0 15px;
    }


    .card_container .card_box .card_unit div {
        width: 100%;
        background: url("../../src/assets/img/bgs.png") no-repeat;
        background-size: 100% 100%;
        padding: 5px 20px;
        margin: 4px 0;
    }

    .card_content {
        height: calc(100% - 45px);
        overflow-y: auto;
        padding: 0 15px;
    }

    .card_content .content-title {
        font-weight: 600;
    }
    .card_container .card_box .card_content div {
        width: 100%;
        background-size: 100% 100%;
        padding: 2px 0px;
    }

    .card_container .card_box .contentSwiper {
        height: calc(100% - 45px);
    }

    .card_container .card_box .imgs {
        padding: 10px 20px;
        display: flex;
    }

    .card_container .card_box .imgs .img {
        width: 70%;
    }

    .card_container .card_box .imgs .img img {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .card_container .card_box .imgs .swiper-container {
        width: 25%;
        overflow: hidden;
    }

    .card_container .card_box .imgs .swiper-container .swiper-slide {
        width: 100%;
    }

    .card_container .card_box .imgs .swiper-container .swiper-slide img {
        width: 100%;
        height: 100%;
    }

    .card_container .card_box .fightList {
        font-size: 12px;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }

    .card_container .card_box .fight .fightList .time {
        text-align: center;
        background: url(../../src/assets/img/bgBlue.png) no-repeat;
        background-size: 100% 100%;
        width: 50px;
        height: 20px;
        line-height: 20px;
    }

    .card_container .card_box .fight .fightList .nr {
        padding-left: 5px;
        border-left: 2px solid blue;
        width: 216px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card_container .card_box .process {
        position: absolute;
        top: 10px;
        right: 20px;
        color: darkorange;
        cursor: pointer;
    }

    .card_container .card_box.card_echarts {
        display: flex;
        flex-direction: column;
    }

    .card_container .card_box.card_echarts #pgContent {
        flex-grow: 1 !important;
    }

    .card_container .card_box .card_video {
        height: calc(100% - 36px);
    }

    .card_container .card_box .card_video video {
        height: 100%;
        width: 100%;
    }

    .item .el-button--text {
        width: 208px;
        overflow: hidden;
        /* 隐藏超出部分 */
        text-overflow: ellipsis;
    }
</style>

2、父组件引子组件
传值的方法和vue类似

    <custom-card type="text" header-title="科目目的" :data="basicIntroduction" style="height: 250px;"></custom-card>
        <custom-card type="content" header-title="科目内容" :data="content" style="height: 250px;"></custom-card>
<script>
    var echartT1 = new Vue({
        el: "#echart_T1",
        data() {
            return {
                basicIntroduction: 'T岛战场环境分析是本次综合演练的一个重要科目，旨在通过对T岛的战场环境进行分析，加深学员对战场环境的理解，巩固所学知识，紧跟军事需求，灵活运用各种方法手段完成分析报告和专题图。科目预期达到以下目的：熟悉战略战场环境分析的主要内容和方法；掌握战略地理空间情报的收集、整理和处理方法；掌握基本的战略战场环境分析方法；能够形成战略地理环境分析报告；掌握战略战场环境分析专题图设计与制作方法等。<br/>基本要求：报告内容条理清晰，语言简练，文字流畅，图文并茂。分析结果有理有据，可用性强。',
                content: [{ title: '主要内容：', content: '搜集、整理多源战略战场环境地图、情报和资料，利用地图与地理信息系统进行分析，完成对T岛战场环境的综合研判，并给出相应建议。' },
                { title: '计划时长:', content: '5小时' },
                { title: '作业方式:', content: '采用图上作业和相关地理信息系统分析，撰写分析报告。' },]
            };
        },
        mounted() { 

        },
        methods: {

 }
         
    });
</script>

3、引入组件和当前的文件
 

    $(document).ready(function () {

        $("#customCard").load('./src/echarts/components/card.html')
​​​​​​​    })

    <!-- 子组件 -->
    <div id="customCard" style="display: none;"></div>

最后 感谢阅读 如果有不足之处 请指出