模态框组件——codepen.io使用方法 & 组件的新建、引入、注册、使用 & v-model双向控制显示和隐藏
codepen.io使用方法:
第一步:打开官网 https://codepen.io/,用途:构建、测试和发现前端代码的最佳场所。
第二步:输入关键词进行搜索,如:vue modal
第三步:列表中选择一个样例进行演示
第四步:可以查看上方的3个模块:html、css、js
第五步:可以把codepen中的代码链接到Markdown文本中
- 样例右下角有:
- share按钮,分享到其他网站
- embed按钮,嵌入方式有4中
- WordPress Shortcode-简码 、Prefill Embed-预填充嵌入 、iframe、HTML (recommended)-html推荐
第六步:复制选择嵌入方式的下方代码,粘贴到Markdown文本中所需的位置
普通组件
See the Pen Vue.js模式组件(弹出一个窗口) by chen ( @chentianwei411) on CodePen.示例:
新建组件index.vue
<template>
<!--
v-model等价于
v-bind:value="searchText"
v-on:input="searchText = $event"
-->
//从codepen样例中复制过来的html代码
<transition name='modal'>
<div class='modal-mask' v-show="value || show">
<div class='modal-wrapper'>
<div class='modal-container'>
<div class='modal-header'>
<slot name='header'>
default header
</slot>
</div>
<div class='modal-body'>
<slot name='body'>
default body
</slot>
</div>
<div class='modal-footer'>
<slot name='footer'>
default footer
<button class='modal-default-button' @click="handleClose">
ok
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
// 组件的本质就是模块
export default {
props: ['value'],
data () {
return {
show: false
}
},
methods: {
handleClose () {
// 如果是组件调用
this.$emit('input', false)
// 如果是方法调用
this.show = false
// 如果是方法调用的话,删除生成的dom
document.body.removeChild(this.$el)
}
}
}
</script>
<style>
//从codepen样例中复制过来的css代码
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
display: table;
transition: opacity 1s;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: lightblue;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all 1s ease;
}
.modal-header h3 {
margin-top:0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
padding-bottom: 10px;
border-bottom: 1px solid black;
}
.modal-footer {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
</style>
第二步:在App.vue入口文件中进行引入
import MyModal from './components/modal/index.vue'
//components中注册
MyModal
//div里使用
<h1>7. 模态框组件</h1>
<input type="button" value="modal" @click="showModal=true">
<!--
$event 只能在视图中使用
$event 是事件参数
v-model 等价于
v-bind:value="searchText"
v-on:input="searchText = $event"
-->
<my-modal v-model="showModal" @test="test"></my-modal>
<input type="button" value="js方法调用" @click="$modal">
注:
v-model的使用:控制显示和隐藏,因为是双向数据绑定的
Dialog 弹出框-组件调用 中——v-model="show"
第三步:通过localhost:8080,打开网页,查看网页嵌入效果。如上图普通组件显示