github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/themes/wind/static/libs/vue-1.0.24/examples/modal/index.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3    <head>
     4      <meta charset="utf-8">
     5      <title>Vue.js Modal Example</title>
     6      <script src="../../dist/vue.js"></script>
     7      <link rel="stylesheet" href="modal.css">
     8    </head>
     9    <body>
    10      <!-- template for the modal component -->
    11      <script type="x/template" id="modal-template">
    12        <div class="modal-mask" v-show="show" transition="modal">
    13          <div class="modal-wrapper">
    14            <div class="modal-container">
    15  
    16              <div class="modal-header">
    17                <slot name="header">
    18                  default header
    19                </slot>
    20              </div>
    21              
    22              <div class="modal-body">
    23                <slot name="body">
    24                  default body
    25                </slot>
    26              </div>
    27  
    28              <div class="modal-footer">
    29                <slot name="footer">
    30                  default footer
    31                  <button class="modal-default-button"
    32                    @click="show = false">
    33                    OK
    34                  </button>
    35                </slot>
    36              </div>
    37            </div>
    38          </div>
    39        </div>
    40      </script>
    41  
    42      <script>
    43        // register modal component
    44        Vue.component('modal', {
    45          template: '#modal-template',
    46          props: {
    47            show: {
    48              type: Boolean,
    49              required: true,
    50              twoWay: true    
    51            }
    52          }
    53        })
    54      </script>
    55  
    56      <!-- app -->
    57      <div id="app">
    58        <button id="show-modal" @click="showModal = true">Show Modal</button>
    59        <!-- use the modal component, pass in the prop -->
    60        <modal :show.sync="showModal">
    61          <!--
    62            you can use custom content here to overwrite
    63            default content
    64          -->
    65          <h3 slot="header">custom header</h3>
    66        </modal>
    67      </div>
    68  
    69      <script>
    70        // start app
    71        new Vue({
    72          el: '#app',
    73          data: {
    74            showModal: false
    75          }
    76        })
    77      </script>
    78    </body>
    79  </html>