<div id="app">
    <button @click="toggleModal">{{ buttonText }}</button>
    <transition name="modal-toggle">
        <div class="modal" v-show="modalIsOpen">
            <input type="text" v-for="(field, key) in fields" v-focus="key === 0" :placeholder="field" />
        </div>
    </transition>
</div>


<div class="skip">
  <a href="https://codepen.io/collection/DRKGbz/" target="_blank">Vue案例全集</a>
</div>
@import url(https://fonts.googleapis.com/css?family=Montserrat);

$colour:hsla(350,100%,25%,1);
$grey:desaturate($colour,90%);

body {
  background:lighten($grey,30%);
    background-image:
    linear-gradient(40deg,transparentize($grey,0.95),transparentize($colour,0.95)),

    linear-gradient(135deg,
        lighten($grey,18%) 0%,
        lighten($grey,18%) 10%,
        lighten($grey,25%) 11%,
        lighten($grey,25%) 40%,
        lighten($grey,35%) 41%,
        lighten($grey,35%) 50%,
        lighten($grey,18%) 51%,
        lighten($grey,18%) 60%,
        lighten($grey,25%) 61%,
        lighten($grey,25%) 90%,
        lighten($grey,35%) 91%)
    ;
    background-size:7px 7px, 4px 4px;
    font-family: montserrat;
}

html,body {
  width: 100vw;
  height: 100vh;
}
.modal {
  background: white;
  display: flex;
  flex-direction: column;
  padding: 40px 40px 20px 40px;
  width: 300px;
  margin: 0 auto;
  transform-origin: top center;
}

.modal-toggle-enter-active,
.modal-toggle-leave-active {
  transform: scale(1);
  transition: transform 0.3s;
}

.modal-toggle-enter,
.modal-toggle-leave-to {
  transform: scale(0);
}

input {
  display: block;
  background: #F2F2F2;
  border: none;
  padding: 8px;
  margin-bottom: 20px;
  outline: none;
  border: 3px solid transparent;
  
  &:focus {
    border-color: #03a9f4;
    box-shadow: 1px 1px 4px rgba(#03a9f4, .15);
  }
}

button {
  border: none;
  background: #123456;
  color: #FFFFFF;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  margin: 10px auto 0 auto;
  display: block;
  outline: none;
  min-width: 60px;
}


.skip{
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 10px 30px;
  background: rgba(0,0,0,.5);
  
  a {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
  }
}
View Compiled
    // 首先需要注册一个新指令,它会自动添加v-前缀
    Vue.directive('focus', {
        componentUpdated: function (el, binding, vnode) {
            // 当binding.value 绑定的值为true,文本框获取焦点
            if (binding.value) {
                el.focus()
            }
        }
    })
    
        let app = new Vue({
        el: '#app',
        data () {
            return {
                fields: [
                    '姓名',
                    '邮箱',
                    '地址',
                    '电话'
                ],
                modalIsOpen: false
            }
        },
        methods: {
            toggleModal: function () {
                this.modalIsOpen = !this.modalIsOpen
            }
        },
        computed: {
            buttonText: function () {
                return this.modalIsOpen ? '关闭' : '打开'
            }
        }
    })
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js