vue常用的element ui教程汇总（基于vueelement-ui）
vue常用的element ui教程汇总（基于vueelement-ui）支持地图坐标选择器<template> <div class="avue-wrap"> <avue-input-tree multiple v-model="form1" placeholder="请选择" type="tree" :dic="dic" /> <avue-input-number v-model="form2"></avue-input-number> <avue-select v-model="form1" placeholder="请选择" type="tree" :dic="dic"></avue
今天给大家分享一款超神级的Vue桌面端组件库框架Avue.js。
avue 基于 Vue2.0 ElementUI 封装的UI组件库，star高达1.5K 。组件库主要针对table表格及form表单场景，简化繁琐操作，衍生更多高复用、易维护的展示组件。
功能特性
让数据驱动视图，减去繁琐的操作，更贴近企业级的前端开发组件库。
- 灵活易用，基于Vue Element-UI开发
- 高效兼容，兼容主流浏览器
- 丰富组件，包含大量常用组件库及丰富的插件库
安装
$ npm i @smallwei/avue -S
引入组件
import Vue from 'vue'
import Avue from '@smallwei/avue'
import '@smallwei/avue/lib/index.css'
Vue.use(Avue)
// 国际化 设置英文
Vue.use(Avue { locale:'en' })
// 如果使用字典需要赋值axios为全局
import axios from 'axios'
window.axios=axios
使用组件
<template>
<div class="avue-wrap">
<avue-input-tree multiple v-model="form1" placeholder="请选择" type="tree" :dic="dic" />
<avue-input-number v-model="form2"></avue-input-number>
<avue-select v-model="form1" placeholder="请选择" type="tree" :dic="dic"></avue-select>
<avue-switch v-model="form3" :dic="dic"></avue-switch>
<avue-date v-model="form4" format="yyyy年MM月dd日" value-format="yyyy-MM-dd" />
...
</div>
</template>
<script>
export default {
data () {
return {
form1: [0 1 2 3 4]
form2: 5
form3: 1
form4:'2020-01-01'
dic:[{
label:'选项1' value:0
} {
label:'选项2' value:1
}]
};
}
};
</script>
官网提供了丰富的表单、表格、数据展示组件及其它50多个周边生态组件。
支持地图坐标选择器
<!-- 导入需要的包 -->
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=7ab53b28352e55dc5754699add0ad862&plugin=AMap.PlaceSearch'></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<avue-form :option="option" v-model="form"></avue-form>
export default{
data() {
return {
form: {
map: [ 113.10235504165291 41.03624227495205 "内蒙古自治区乌兰察布市集宁区新体路街道顺达源广告传媒" ]
}
option: {
column: [
{
label: '坐标'
prop: 'map'
type: 'map'
}]
}
}
}
}
最后附上项目链接地址
# 文档地址
https://avuejs.com/
# 仓库地址
https://github.com/nmxiaowei/avue
好了，就介绍到这里。挺不错的一款Vue集成组件库，感兴趣的可以去看下哈~
