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

电玩女神 2022-05-20 06:20 716阅读 0赞

mand-mobile 详细介绍

mand-mobile 是一个面向金融场景的 Vue.js 移动端 UI 组件库。

### 体验地址 ###

![161038_CQFI_2720166.png][]

### 安装 ###

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应用程序所需的组件。在[组件预览中][Link 1]查找更多细节。

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

[161038_CQFI_2720166.png]: https://static.oschina.net/uploads/space/2018/0419/161038_CQFI_2720166.png
[babel-plugin-import]: https://github.com/ant-design/babel-plugin-import
[ts-import-plugin]: https://github.com/Brooooooklyn/ts-import-plugin
[Link 1]: https://didi.github.io/mand-mobile/#/docs/preview