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 class="box">
    <em-button @click="openActions">Action Sheet</em-button>
  </div>
</em-app>

SCSS

@import url("//unpkg.com/[email protected]/dist/element-mobile.css");
.box {
  text-align: center;
  padding: 20px 0 50px;
}

Babel + JSX

const ActionSheet = ElementMobile.ActionSheet;
const actions = new ActionSheet({
  items: [
    [
      {
        text: '保存',
        close: true,
        type: 'primary'
      },
      {
        text: '删除',
        type: 'danger',
        onClick() {
          alert('即将删除')
          doClose()
        }
      }
    ],
    [
      {
        text: '取消',
        close: true
      }
    ]
  ]
});

new Vue({
  methods: {
    openActions() {
      actions.create()
    }
  }
}).$mount('#app')