• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

制作一个简单的modal模态框

146 0

制作一个简单的modal组件,主要效果就是,点击按钮能够弹出这个模态框,然后模态框有两个按钮,点击取消能够关闭,确认就alert弹出提示信息,并且他的宽度由父组件控制,内容也由父组件渲染,然后按钮的事件也是父组件的。

效果图

首先我们创建一个组件,由于html代码过多,所以采用在html文件中创建,然后js获取。

先引入一个css文件:

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css">
<script id="templatTpl" type="x-template">
    <div :style="{width:optionWidth}">
      <div class="modal-content">
        <div class="modal-header">
          <slot name="title"></slot> 
        </div>
        <div class="modal-body">
          <slot name="body"></slot>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-primary" @click="callback">确认</button>
        </div>
      </div>
    </div>
</script> 

可以看到给script设置一个id用于获取,type="x-template"表示这是一个组件。

div的style绑定了一个对象,这个对象设置了一个width的属性,表示这个div的宽度,然后optionWidth方法来返回具体的值。

剩下就是两个slot标签,用于获取到父组件渲染时需要插入的html元素。

两个button按钮,都添加了click事件。

这里我们要明确一下,在子组件中绑定的参数和方法都是在子组件的作用域下的,你不可能在这个部分拿到父组件的值。

然后就是父组件

<div id="app">
    <button type="button" @click="open">打开登录窗口</button>
    <my-template v-show="show" :close="close" :callback="open" :width="width">
        <h2 slot="title">{{title}}</h2>
        <p slot="body">内容部分</p>
    </my-template>
</div>

父组件有一个button按钮用于弹出登录窗口,后面跟着一个子组件,这个子组件就是上面创建的那个,我们给这个子组件元素绑定几个值,v-show绑定父组件的show,用于显示和隐藏,:close表示的子组件的props中的close,他接受父组件的方法close,:callback也是一样,:width绑定父组件的width值。

h2和p分别对应子组件中的slot元素,这是,html部分书写完毕。

Vue.component('my-template',{
    template : '#templatTpl',
    props: {
        close : {
            type : Function,
            required : true
        },
        callback : {
            type : Function,
            required : true
        },
        width : {
            type : Number,
            default : 200
        }
    },
    computed : {
        optionWidth(){
            if(this.width > 0 && this.width <= 800) {
                return this.width + 'px'
            }
            return 800+'px'
        }
    }
});

var app = new Vue({
    el : '#app',
    data : {
        show : true,
        title : '登录'
    },
    methods : {
        close(){
            this.show = false;
        },
        open(){
            this.show = true;
        }
    },
    computed : {
        width(){
            return 500;
        }
    }
});

通过props获取父组件的值,将optionWidth放在computed中,因为它需要返回值并且自己运行,如果丢在methods中,等于赋值了一个方法,但没有运行。

如果需要动画效果,可以在子组件外面用一个transiton元素包裹,然后设置好动画name即可。

0
  • 本文分类:vue 基础
  • 本文标签:vuemodal模态框
  • 流行热度:已超过 146 人围观了本文
  • 最后更新:2020年02月8日 - 20时40分37秒
  • 发布日期:2019年11月17日 - 16时25分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码