mand-mobile 面向金融场景的 Vue.js 移动端组件库

mand-mobile 是一个面向金融场景的 Vue.js 移动端 UI 组件库。体验地址安装npm install mand-mobile --save导入使用 babel-plugin-import 或者 ts-import-plugin (Recommended)import { Button } from 'mand-mobile'手动导入import Button from 'mand-mobile/lib/button'全部导入import Vue from 'vue'
import mandMobile from 'mand-mobile'
import 'mand-mobile/lib/mand-mobile.css'

Vue.use(mandMobile)使用选择构建Web应用程序所需的组件。在组件预览中查找更多细节。<template>
  <div id="app">
    <md-field title="form" class="block">
      <md-input-item
        title="name"
        placeholder="Please input your name."
      ></md-input-item>
      <md-field-item
        title="sex"
        arrow="arrow-right"
        :value="sex"
        @click="isPickerShow = true"
        solid
      ></md-field-item>
      <md-picker
        v-model="isPickerShow"
        :data="pickerData"
        title="sex"
      ></md-picker>
    </md-field>
    <md-agree class="agree">
      Agree to the privacy policy.
    </md-agree>
    <md-action-bar :actions="actionBarData">
      &yen;128.00
    </md-action-bar>
  </div>
</template>

<script>
import {
  Agree,
  ActionBar,
  Field,
  FieldItem,
  InputItem,
  Picker
} from 'mand-mobile'

export default {
  name: 'app',

  components: {
    [Agree.name]: Agree,
    [ActionBar.name]: ActionBar,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [InputItem.name]: InputItem,
    [Picker.name]: Picker
  },

  data () {
    return {
      isPickerShow: false,
      actionBarData: [{
        text: 'confirm'
      }],
      pickerData: [
        [
          { text: 'male' },
          { text: 'female' }
        ]
      ]
    }
  }
}
</script>