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