Element Mobile Demo

by leopoldthecuber

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/dist/element-mobile.js"></script>
<em-app id="app">
  <div>
    <div class="demo-popup">
      <div class="demo-popup-button">
        <em-button @click="popupVisible1 = true">上部弹出 popup</em-button>
      </div>
      <div class="demo-popup-button">
        <em-button @click="popupVisible2 = true">中部弹出 popup</em-button>
      </div>
      <div class="demo-popup-button">
        <em-button @click="popupVisible3 = true">右侧弹出 popup</em-button>
      </div>
    </div>
    
    <em-popup :visible.sync="popupVisible1" position="top" class="popup-1" :modal="false">
      <p>更新成功</p>
    </em-popup>
    <em-popup :visible.sync="popupVisible2" class="popup-2">
      <em-card title="Title">
        <em-field label="Name"></em-field>
        <em-field label="Age" type="number" placeholder="Your age">
        </em-field>
        <i class="em-icon-close" @click="popupVisible2 = false"></i>
      </em-card>
    </em-popup>
    <em-popup :visible.sync="popupVisible3" position="right" class="popup-3" :modal="false">
      <em-button @click="popupVisible3 = false" type="primary">关闭 popup</em-button>
    </em-popup>
  </div>
</em-app>

SCSS

@import url("//unpkg.com/[email protected]/dist/element-mobile.css");
.demo-popup-button {
    text-align: center;
    margin: 20px;
  }
  
  .popup-1 {
    width: 100%;
    height: 50px;
    text-align: center;
    background-color: #f0f9ec;
    backface-visibility: hidden;
  }

  .popup-1 p {
    margin: 0;
    font-size: 14px;
    line-height: 50px;
    color: #67c23a;
  }

  .popup-2 {
    width: 80%;
  }

  .em-icon-close {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 10px;
    border: solid 2px white;
    border-radius: 50%;
  }

  .popup-3 {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .popup-3 .em-button {
    position: absolute;
    width: 90%;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
  }

Babel + JSX

new Vue({
    data() {
      return {
        popupVisible1: false,
        popupVisible2: false,
        popupVisible3: false
      };
    },

    watch: {
      popupVisible1(val) {
        if (val) {
          setTimeout(() => {
            this.popupVisible1 = false;
          }, 200000);
        }
      }
    }
  }).$mount('#app')