对话框-封装组件的步骤

最新推荐文章于 2024-06-19 10:04:01 发布

viceen

最新推荐文章于 2024-06-19 10:04:01 发布

阅读量227

点赞数

分类专栏： vue项目-运维文章标签： vue 封装 vue.js

本文链接：https://blog.csdn.net/weixin_44867717/article/details/116014438

版权

vue项目-运维专栏收录该内容

111 篇文章 2 订阅

订阅专栏

对话框-封装组件的步骤

效果图

在这里插入图片描述

第一步：在同层级或components文件夹下新建组件文件deployment.vue

<template>
  <div class="container">
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "deployment",
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped lang="less">
</style>

第二步：在父组件进行注册、引入和调用

模块中，调用

 <Deployment ref="dialog2" />
     
<el-button
      @click="deploy()"
      type="primary"
      size="small"
      v-if="scope.row.code && scope.row.children"
      ><i class="el-icon-aim"></i>部署
</el-button>

引入

import Deployment from "./deployment";

 dialogVisible: false,   //默认值

注册和使用

 components: {
    Deployment,
  },
  methods: {
    deploy() {
      // console.log(this.$refs.dialog)
      this.$refs.dialog2.dialogVisible = !this.$refs.dialog2.dialogVisible;
    },
  },