Vue项目引入移动端组件库--Mand Mobile

你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特
《人生果实》经典语录

Mand Mobile

Mand Mobile是面向金融场景设计的移动端组件库基于Vue.js实现。目前已实际应用于滴滴四大金融业务板块的10余款产品中。

安装

npm || yarn

npm install mand-mobile --save
// 或者
yarn add mand-mobile

全量引入

import Vue from 'vue'
import mandMobile from 'mand-mobile'
import 'mand-mobile/lib/mand-mobile.css'

Vue.use(mandMobile)

全量引入后,在项目中用Mand Mobile任意组件,不需要另外引入什么
比如用DatePicker日期选择器组件

<template>
  <div class="md-example-child md-example-child-date-picker md-example-child-date-picker-0">
    <md-date-picker
      ref="datePicker"
      today-text="今天"
      :min-date="minDate"
      :max-date="maxDate"
      :default-date="currentDate"
      is-view
      @initialed="onDatePickerInitialed"
    ></md-date-picker>
  </div>
</template>

<script>
// import {DatePicker} from 'mand-mobile'

export default {
  name: 'date-picker-demo',
  /*
  components: {
    [DatePicker.name]: DatePicker,
  },
  */
  data() {
    return {
      minDate: new Date('2013/9/9'),
      maxDate: new Date('2020/9/9'),
      currentDate: new Date(),
    }
  },
  methods: {
    onDatePickerInitialed() {
      console.log(`[Mand Mobile] DatePicker getFormatDate: ${this.$refs.datePicker.getFormatDate('yyyy/MM/dd')}`)
    },
  },
}
</script>

按需加载(推荐)

官文文档:
Mand Mobile

丰富的组件

在这里插入图片描述

每个组件的使用方法可以上官文文档:
Mand Mobile
有详细的使用案例和API介绍


谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强


推荐阅读
MongoDB中的多表关联查询、聚合管道($lookup、$unwind)
mongodb、mongoose相关
前端linux基础,这一篇就够了

Logo

前往低代码交流专区

更多推荐