木灵鱼儿

木灵鱼儿

阅读：1908

最后更新：2020/02/08/ 20:40:37

制作一个简单的modal模态框

制作一个简单的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即可。

文章分类 vue 基础
文章标签 vuemodal模态框
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 0获得阅读 1908

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1908

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目

目录树