vue iview封装模态框的方法

本文实例为大家分享了vue iview封装模态框的具体代码,供大家参考,具体内容如下

子组件

<template>
  <Modal
    :value="isShowModal"
    :width="width"
    :title="title"
    @on-visible-change="getFaultModalStatusChange"
  >
    <slot name="content"></slot>
    <div slot="footer">
      <div>
        <Button type="success" :loading="loading" @click="submit">确认</Button>
        <Button class="cancelButton" @click="cancel">取消</Button>
      </div>
    </div>
  </Modal>
</template>
 
<script>
export default {
  name: "ModalBlock",
  props: {
    isShowModal: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    },
    width: {
      type: Number
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    cancel: function() {
      this.$emit("modalCancel");
    },
    submit() {
      this.$emit("modalSubmit");
    },
    getFaultModalStatusChange(e) {
      this.$emit("modalStatusChange", e);
    }
  }
};
</script>
 
<style scoped>
</style>

父组件引入

<template>
  <div>
    <Button type="primary" @click="isShowModal = true">Display dialog box</Button>
    <modal-block
      :isShowModal="isShowModal"
      title="搜索框"
      :width="640"
      @modalSubmit="modalSubmit"
      @modalCancel="modalCancel"
      @modalStatusChange="modalStatusChange"
    >
      <div slot="content">
        <Row>
          <Col span="12">
            <div>
              <Input
                v-model="SearchVal"
                icon="ios-search"
                placeholder="Enter something..."
                style="width: 200px"
                @on-click="handleSearch"
                autocomplete
              />
            </div>
            <div style="height:300px;overflow-y: scroll; margin-top:15px;">
              <RadioGroup v-model="listVal" vertical @on-change="changeSerachVal">
                <Radio :label="item.label" v-for="(item,i) in searchList" :key="i">
                  <span>{{item.value}}</span>
                  <Icon :type="item.icon" />
                </Radio>
              </RadioGroup>
            </div>
          </Col>
          <Col span="12">{{searDtail}}</Col>
        </Row>
      </div>
    </modal-block>
  </div>
</template>
<script>
import ModalBlock from "@/common/ModalItem/ModalSerach";
 
export default {
  name: "ImageUpload",
  components: { ModalBlock },
 
  data() {
    return {
      width: 640,
      SearchVal: "",
      listVal: "",
      searDtail: "",
      isShowModal: false,
 
      searchList: [
        {
          label: "1",
          icon: "logo-apple",
          value: "111111"
        },
        {
          label: "2",
          icon: "logo-apple",
          value: "111111"
        },
        {
          label: "3",
          icon: "logo-apple",
          value: "111111"
        },
        {
          label: "3",
          icon: "logo-apple",
          value: "111111"
        },
        {
          label: "4",
 
          icon: "logo-apple",
          value: "111111"
        },
        {
          label: "5",
 
          icon: "logo-apple",
          value: "111111"
        }
      ]
    };
  },
  methods: {
    // 模态输入框搜索
    handleSearch() {
      console.log(`modalSubmit11111111`);
    },
    // 点击模态框单选框触发事件
    changeSerachVal(e) {
      if (e == 1) {
        this.searDtail = "1111";
      } else if (e == 2) {
        this.searDtail = "22222222222";
      }
    },
    // 模态框确定事件
    modalSubmit() {
      this.isShowModal = false;
    },
    // 模态框取消事件
 
    modalCancel() {
      this.isShowModal = false;
    },
    // 模态框关闭触发事件
    modalStatusChange(e) {
      if (e === false) {
        this.isShowModal = false;
      }
    }
  }
};
</script>
<style scoped>
</style>

一定要加 @on-visible-change="getFaultModalStatusChange" 这个事件,不然点击按钮的时候会报错

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解如何用VUE写一个多用模态框组件模版

    对于新手们来说,如何写一个可以多用的组件,还是有点难度的,组件如何重用,如何传值这些在实际使用中,是多少会存在一些障碍的,所以今天特意写一个最常用的模态框组件提供给大家,希望能帮助到您! 懒癌患者直接复制粘贴即可 Modal.vue组件 <template> <!-- 过渡动画 --> <transition name="modal-fade"> <!-- 关闭模态框事件 和 控制模态框是否显示 --> <div class=&qu

  • 利用vue实现模态框组件

    基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 <template> <div class="modal" v-show="show" transition="fade"> <div class="modal-dialog"> <div cla

  • vue+element模态框中新增模态框和删除功能

    实现效果如下 结构 <el-table-column sortable label="操作"> <template slot-scope="scope"> <el-button type="primary" @click="getMembers(scope.row.id)">成员</el-button> <el-buttontype="primary"

  • 详解vue父子组件关于模态框状态的绑定方案

    日常开发中经常遇到的一个场景,父组件有很多操作,需要弹窗,例如: <template> <div class="page-xxx"> //点击打开新增弹窗 <button>新增</button> //点击打开编辑弹窗 <button>编辑</button> //点击打开详情弹窗 <button>详情</button> <Add :showAdd="false">

  • vue实现模态框的通用写法推荐

    在看了element组件的源码后发现,所有模态框其实实现方法都差不多,主要用到了vue在组件化上的双向绑定.代码: <!--查看槽点对话框--> <template lang="html"> <transition name="el-fade-in-linear"> <div draggable="true" @drag="mouseDrag" @dragend="mouse

  • vue移动端模态框(可传参)的实现

    1-封装模态框组件Mydialog (样式可以自己写) <template> <transition name="modal" tag="div"> <div class="modal" v-show="visible" transition="fade"> <div class="modal-dialog"> <div class=

  • Vue.js弹出模态框组件开发的示例代码

    前言 在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求.这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,现在只好自己写一个模态框组件了.目前只是一个仅满足当前项目需求的初始版本,因为这个项目比较简单,也就没有保留很多的扩展功能.这个组件还是有很多扩展空间的,可以增加更多的自定义内容和样式.这里只介绍如何去开发一个模态框组件,有需要进行更多扩展的,可以根据自己的需求自行开发

  • Vue.extend 登录注册模态框的实现

    模态框是我们 UI 控件中一个很重要的组件,使用场景有很多种,我们在 Vue 组件中创建模态框组件而用到的一个知识点是利用 Vue.extend 来创建. 文档中的解释是 在最近在做一个常用的类似下面的 登录/注册 业务场景时,利用 Vue.extend 来改善我们的代码,使我们代码逻辑更清晰化. 需求:点击登录或注册出现各自的模态框. 我们对于这种常见的登录注册业务,一般都是分为 Sigin.vue 和 Register.vue 两个组件,然后把两个组件写入 App.vue 组件中,或者是 l

  • vue.extend实现alert模态框弹窗组件

    本文通过Vue.extend创建组件构造器的方法写弹窗组件,供大家参考,具体内容如下 alert.js文件代码 import Vue from 'vue' // 创建组件构造器 const alertHonor = Vue.extend(require('./alert.vue')); var currentMsg = {callback:function(){ }} export default function(options){ var alertComponent = new alert

  • vue+element 模态框表格形式的可编辑表单实现

    要实现的效果如下,初始化的时候,不可编辑,点击编辑按钮,编辑按钮隐藏,取消编辑按钮显示;部分input输入框变为可编辑 <el-dialog title="营销单详情" width="920px" @close="isEdit = false" class="dialog dialogAdd" custom-class="custom-dialog" :visible.sync="dialo

随机推荐