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

mand-mobile 详细介绍

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">
      ¥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>