快捷導(dǎo)航

vue?iview封裝模態(tài)框的方法

更新時間：2022年07月05日 17:24:27 作者：周家大小姐.

這篇文章主要為大家詳細(xì)介紹了vue?iview封裝模態(tài)框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue iview封裝模態(tài)框的具體代碼，供大家參考，具體內(nèi)容如下

子組件

<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">確認(rèn)</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: {
? ? // 模態(tài)輸入框搜索
? ? handleSearch() {
? ? ? console.log(`modalSubmit11111111`);
? ? },
? ? // 點擊模態(tài)框單選框觸發(fā)事件
? ? changeSerachVal(e) {
? ? ? if (e == 1) {
? ? ? ? this.searDtail = "1111";
? ? ? } else if (e == 2) {
? ? ? ? this.searDtail = "22222222222";
? ? ? }
? ? },
? ? // 模態(tài)框確定事件
? ? modalSubmit() {
? ? ? this.isShowModal = false;
? ? },
? ? // 模態(tài)框取消事件
?
? ? modalCancel() {
? ? ? this.isShowModal = false;
? ? },
? ? // 模態(tài)框關(guān)閉觸發(fā)事件
? ? modalStatusChange(e) {
? ? ? if (e === false) {
? ? ? ? this.isShowModal = false;
? ? ? }
? ? }
? }
};
</script>
<style scoped>
</style>

一定要加 @on-visible-change="getFaultModalStatusChange" 這個事件，不然點擊按鈕的時候會報錯

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: