面向金融场景的 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)
还没有任何评论哟~
