(四)01 -模态框组件——codepen.io使用方法 & 组件的新建、引入、注册、使用 & v-model双向控制显示和隐藏

模态框组件——codepen.io使用方法 & 组件的新建、引入、注册、使用 & v-model双向控制显示和隐藏

模态框组件-codepen.io测试

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，打开网页，查看网页嵌入效果。如上图普通组件显示