Advertisement

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

阅读量:

mand-mobile 详细介绍

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

体验地址

安装

复制代码
    npm install mand-mobile --save

导入

建议使用这两个插件之一(强烈推荐第一个)

复制代码
    importButton'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"></md-agree><md-action-bar :actions="actionBarData"></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>

全部评论 (0)

还没有任何评论哟~