Vue项目引入移动端组件库--Mand Mobile
Vue项目引入移动端组件库--Mand MobileMand Mobile安装全量引入按需加载(推荐)Mand MobileMand Mobile是面向金融场景设计的移动端组件库,基于Vue.js实现。目前已实际应用于滴滴四大金融业务板块的10余款产品中。安装npm || yarnnpm install mand-mobile --save// 或者yarn add mand-mob...
·
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基础,这一篇就够了
更多推荐
已为社区贡献22条内容
所有评论(0)