Vue版本的ant-design移動組件庫來啦

我的比較喜歡ant-design的風格和設計理念,但限於公司前端框架主要是Vue,因此一直沒用起來。在今年初,私人開發的ant-design-vue被官方承認,vue的桌面端終於可使用ant-design,然而在找了一圈以後發現移動端沒有任何ant-design-mobile的vue移植版本,因此打算本身動手開發。javascript

這幾個月一直在開發公司移動管理系統,因此在開發的過程當中持續的移植了antd-mobile的許多組件,目前已經移植了80%的組件,覆蓋了絕大部分經常使用的組件。css

整體來講,大部分組件的移植難度不是很大,剩餘的組件沒有移植主要緣由是項目中並未用到,因此沒有動力,若是有人須要其餘組件,能夠在在文章或github上留言,我會盡快響應。html

Github項目地址前端

與antd-mobile的組件對比vue

antd-mobile 共有 47個組件,本項目截至如今移植了37java

組件名稱 antd-mobile antd-mobile-vue 說明
Accordion
ActionSheet
ActivityIndicator
Badge
Button
Calendar
Card
Carousel
Checkbox
DatePicker
DatePickerView
Drawer
Flex
Grid
Icon
ImagePicker
InputItem
List
ListView
Menu
Modal
NavBar
NoticeBar
Pagination
Picker
PickerView
Popover
Progress
Radio
PullToRefresh
Result
SearchBar
SegmentedControl
Slider
Range
Stepper
Steps
SwipeAction
Switch
TabBar
Tabs
Tag
TextareaItem
Toast
WhiteSpace
WingBlank
LocaleProvider

安裝

npm i antd-mobile-vue -S
複製代碼

使用

完整引入

import AntdMobile from 'antd-mobile-vue'
Vue.use(AntdMobile)
複製代碼

按需引入

非CDN方式引入目前只支持TypeScriptgit

按需加載須要藉助babel-plugin-import, 這樣就能夠只引入須要的組件,以減少項目體積github

npm i babel-plugin-import -D
複製代碼

將babel.config.js修改成:shell

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'import',
      {
        libraryName: 'antd-mobile-vue',
        libraryDirectory: 'es',
        style: true
      },
      'antd-mobile-vue'
    ]
  ]
};
複製代碼

引入組件npm

import { Alert } from "antd-mobile-vue";
@Component({
  components: {
    Alert
  }
})
複製代碼

cdn引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<link rel="stylesheet" href="https://public-file.aegis-info.com/antd-mobile-vue/0.3.0/antdm.css.gz">
<script src="https://public-file.aegis-info.com/antd-mobile-vue/0.3.0/antdm.umd.min.js.gz"></script>
複製代碼

Github項目地址

相關文章
相關標籤/搜索