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

console.log(ElementMobile.ActionSheet)
new Vue({
  methods: {
    openActions() {
      const doClose = this.$actionsheet({
        items: [
          // vue-jsx 插件会自动注入 h 方法，因此可以省略
          (/* h, data */) => (
            <em-list>
              <em-list-item title="自动接单">
                <em-switch></em-switch>
              </em-list-item>
              <em-list-item title="打印机设置">
                <i class="em-icon-arrow-right"></i>
              </em-list-item>
            </em-list>
          ),
          [
            {
              text: '取消',
              close: true
            }
          ]
        ]
      });
    }
  }
}).$mount('#app')