vue+elementUI 组件 弹窗

 需求：点击按钮，弹窗（这里的弹窗使用外部组件）

效果图：

页面中：

“查看详情”点击触发  examineBtn()  方法，

<template>
    <div>
        <div style="height: 73vh">
            <el-table :data="showData"
                      style="width: 100%"
                      :header-cell-style="headClass">
                <el-table-column type="index"
                                 label="编号"
                                 width="80"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="name"
                                 label="企业名称"
                                 width="180"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="duration"
                                 label="时长"
                                 width="80"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="address"
                                 label="广告位置"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="companyStatus"
                                 label="订单状态"
                                 width="100"
                                 header-align="center"
                                 align="center">
                    <template scope="scope">
                        <span v-if="scope.row.companyStatus == 1"
                              style="color: #1ec6df">开启</span>
                        <span v-else-if="scope.row.companyStatus == 0"
                              style="color: #df721e">关闭</span>
                    </template>
                </el-table-column>
                <el-table-column prop="openDate"
                                 label="开始时间"
                                 width="180"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="closeDate"
                                 label="结束时间"
                                 width="180"
                                 header-align="center"
                                 align="center"></el-table-column>
                <el-table-column prop="isSend"
                                 label="生效状态"
                                 width="130"
                                 header-align="center"
                                 align="center">
                    <template scope="scope">
                        <span v-if="scope.row.isSend == 1"
                              style="color: #1ec6df">已生效</span>
                        <span v-else-if="scope.row.isSend == 0"
                              style="color: #df721e">未生效</span>
                    </template>
                </el-table-column>
                <el-table-column prop="isSend"
                                 label="发票是否邮寄"
                                 width="140"
                                 header-align="center"
                                 align="center">
                    <template scope="scope">
                        <span v-if="scope.row.isSend == 1"
                              style="color: #1ec6df">已邮寄</span>
                        <span v-else-if="scope.row.isSend == 0"
                              style="color: #df721e">未邮寄</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right"
                                 label="操作"
                                 width="150">
                    <template>
                        <el-button @click="examineBtn"
                                   type="text"
                                   size="small"
                                   style="padding: 0">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination :page-size="pagesize"
                           :current-page="currentPage"
                           layout="prev, pager, next"
                           :total="companyData.length"
                           @current-change="handleCurrentChange"
                           @prev-click="upChange"
                           @next-click="nextChange"
                           style="text-align: center;">
            </el-pagination>
        </div>
        <recordsDetail ref="msgBtn"></recordsDetail>
    </div>
</template>

 

js引入组件：

<script>
import recordsDetail from "../../../components/recordsDetail/Index"; //导入组件
export default {
    name: "publidetail",
    components: {
        //挂载组件
        recordsDetail, //自定义的标签
    },
    //页面第一次加载 显示的数据
    created() {
        this.showData = this.companyData.slice(0, this.pagesize);
    },
    data() {
        return {
            showData: [],
            pagesize: 7, //一页的数据条数
            currentPage: 1, //当前页是从哪页开始
            //页面的所有数据
            companyData: [
                {
                    name: "企业名称111",
                    companyStatus: 1,
                    address: "陕西省西安市雁塔区高新三路银河国际D座112345",
                    openDate: "2016-05-04",
                    closeDate: "2016-05-04",
                    duration: 10,
                    isSend: "0",
                },
                {
                    name: "企业名称222",
                    companyStatus: 1,
                    address: "陕西省西安市雁塔区高新三路银河国际D座112345",
                    openDate: "2016-05-04",
                    closeDate: "2016-05-04",
                    duration: 10,
                    isSend: "0",
                },
                {
                    name: "企业名称333",
                    companyStatus: 1,
                    address: "陕西省西安市雁塔区高新三路银河国际D座112345",
                    openDate: "2016-05-04",
                    closeDate: "2016-05-04",
                    duration: 10,
                    isSend: "0",
                },
                {
                    name: "企业名称444",
                    companyStatus: 1,
                    address: "陕西省西安市雁塔区高新三路银河国际D座112345",
                    openDate: "2016-05-04",
                    closeDate: "2016-05-04",
                    duration: 10,
                    isSend: "0",
                },
            ],
        };
    },
    methods: {
        //点击查看详情
        examineBtn() {
            console.log("查看详情");
            this.$refs.msgBtn.init();
        }, 
    },
};
</script>

 

组件：

<template>
    <div class="wrapper">
        <div id="msgbox">
            <el-dialog :visible.sync="examineBtn"
                       width="1000px">
                <el-form label-width="130px"
                         class="item">
                    <div class="invoice">
                        <div class="title">订单信息</div>
                        <el-form-item label="企业名称：">xxxx</el-form-item>
                        <el-form-item label="时长：">www</el-form-item>
                        <el-form-item label="广告位置">eeee</el-form-item>
                        <el-form-item label="开始时间">rrrr</el-form-item>
                        <el-form-item label="结束时间">tttt</el-form-item>
                        <el-form-item label="生效状态：">1111</el-form-item>
                        <el-form-item label="订单状态：">1111</el-form-item>
                        <el-form-item label="发票是否邮寄：">1111</el-form-item>
                        <el-form-item label="是否开票：">1111</el-form-item>
                    </div>
                    <div class="invoice">
                        <div class="title">企业权限</div>
                        <el-form-item label="岗位发布数量：">yyyyy</el-form-item>
                        <el-form-item label="查看简历次数：">yyyyyyy</el-form-item>
                        <el-form-item label="岗位发布权限：">qqq</el-form-item>
                        <el-form-item label="查看人才权限：">qqqqq</el-form-item>
                        <el-form-item label="现场招聘次数：">qqq</el-form-item>
                        <el-form-item label="橱窗发布次数：">qqqqq</el-form-item>
                        <!-- <el-form-item label="现场招聘次数：">{{ form.province }}{{ form.city }}{{ form.prreceiveAddressvince }}</el-form-item> -->
                       
                    </div>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    components: {},
    data() {
        return {
            form: {},
            examineBtn: false,
        };
    },
    methods: {
        init() {
            console.log("这是详情组件");
            this.examineBtn = true;
        },
    },
};
</script>
<style lang="scss">

.item .title {
  color: #1ec6df;
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

.invoice {
  width: 450px;
  display: inline-block;
  vertical-align: top;
}
.item .el-form-item__label {
    color: #000 !important;
    font-weight: 700 !important;
}
</style>