el-dialog弹窗和组件的使用

记录使用el-dialog实现信息页面的 新增、修改 、查看 操作

1.介绍el-dialog弹窗以及组件的使用

   <el-button
     type="primary"
     size="mini"
     @click="handleAdd('新增')">新增</el-button>
     //el-dialog弹窗里 要实现 新增、修改 、查看三个操作   所以弹窗需要根据点击显示对应操作的标题

    <i class="el-icon-edit" @click="handleEdit( scope.row.pid,'编辑')"></i>
    <i class="el-icon-document" @click="handleEdit( scope.row.pid,'详情')"></i>
    <el-dialog
    :title="operationType"  //设置弹窗显示的名字
    v-model="dialogVisible" //设置绑定 控制打开关闭
    :destroy-on-close="true" //弹窗右侧是否显示  X 
    :visible.sync="dialogVisible"
    width="73%" //设置弹窗宽度
    top="5%"	//设置弹窗距离页面顶部位置
    :before-close="handleClose"  //点击  X  关闭弹窗方法
    >
      //自定义的组件页面  
      <good v-if="dialogVisible" :operation-type="operationType" :operation-code="operationCode"  //添加 v-if="dialogVisible" 可以解决组件传参不刷新问题
      @hideDialog="
      hideDialog() 
      getUsers()" //组件页面 新增完之后 点击 提交按钮  触发hideDialog 关闭弹窗并刷新列表
       />
  </el-dialog>

使用组件之前需要先声明再注册   
<script>

  import good from './addDs.vue'  // 声明 组件
  export default {
    components: {  // 注册 组件
     good 
    },
    data() {
      return {
        dialogVisible:false, //弹窗状态设置关闭
        operationType:'',  //标题
        operationCode:'', //传参的code
      }
     }


 methods:{
		 // 编辑or详情
      handleEdit( pid,tt) {
        this.operationType = tt;
        this.operationCode = pid.toString();
        //点击按钮弹窗打开
        this.dialogVisible =true
      },
      // 新增
      handleAdd(tt){
	      //tt接受参数
        this.operationType = tt;
          //点击按钮弹窗打开
        this.dialogVisible =true
      },
      // 子组件提交传值 关闭弹窗
      hideDialog() {
        this.dialogVisible = false;
      },
      //addDs.vue页面 子组件向父传值this.$emit   关闭弹窗传参
     // this.$emit('hideDialog',this.operationType);

 }

2. el-dialog嵌套el-dialog会出现第二个不高亮显示问题解决方法:

给第二个el-dialog标签 添加 append-to-body
在前端网页开发中,"el-popover" 或 "element-ui" 的弹窗组件通常用于显示附加信息或者提供轻量级的操作界面。如果你想通过弹窗打开一个新的页面,可以这样做: 1. 首先,确保你已经安装了 Element UI,并且引入了相关的弹窗组件库。 ```html <script src="https://unpkg.com/element-ui@2.15.9/dist/index.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.9/dist/theme-chalk/index.css"> ``` 2.JavaScript中,创建一个点击事件监听器,当用户触发某个按钮或链接时,弹出一个新窗口(`window.open()`): ```javascript import { ElPopover } from 'element-ui'; const app = new Vue({ el: '#app', data() { return { showPopover: false, }; }, methods: { openNewPage() { this.showPopover = true; // 显示弹窗 const newWindow = window.open('http://www.example.com', '_blank'); // 打开新的页面 }, }, components: { ElPopover, }, }); // 某个元素上绑定点击事件,触发openNewPage方法 <button @click="openNewPage">点击打开新页面</button> <!-- 弹窗模板 --> <template> <el-popover v-model="showPopover"> <div slot="reference">点击这里</div> <!-- 弹窗内容 --> <p>这是新页面的描述</p> <a @click="$parent.openNewPage(); $parent.showPopover = false;">关闭并返回原页</a> </el-popover> </template> ``` 在这个例子中,当你点击“点击这里”按钮时,会弹出一个包含新页面链接的弹窗,点击链接会在新窗口中打开指定的URL。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值