vue-manager：一个以Vue2.0为框架，结合 iView 和 ECharts 的后台组件

vue-manager：一个以Vue2.0为框架，结合 iView 和 ECharts 的后台组件

安装

install node / npm(cnpm)git clone "https://github.com/luosijie/vue-manager"cnpm installnpm run devvisit localhost:8080

依赖

Vue2.0iViewECharts

全局样式

你可以通过修改less文件 theme/index.less 来自定义全局样式

组件使用

组件列表

例子

vm-progress

属性

props: { title: { type: String, default: 'Progress' }, data: { type: Array, default: function () { return [ { name: 'JesseLuo', tags: ['hansome', 'cool'], value: 100 } ] } } }

应用

...export default { data: function () { return dataProgress: [ { name: 'Jesse Luo', tags: ['很帅', '逗比'], value: 90 }, { name: 'Angla Cool', tags: ['美丽', '感性', '文艺'], value: 30 }, { name: 'lele Wang', tags: ['气质', '厉害'], value: 80 }, { name: 'Jesse Ca', tags: ['才女', '努力', '博学'], value: 20 }, { name: 'Jesse Lee', tags: ['很帅', '牛逼'], value: 100 } ], }}

vm-timeline

属性

props: { title: { type: String, default: '时间轴' }, data: { type: Array, default: function () { return [ { date: '2017年6月26日', time: '11:58 am', content: '完成VmManager时间轴组件' } ] } } }

应用

...export default { data: function () { return { dataTimeline: [ { date: '2017年7月15日', time: '8:35 am', content: 'Lorem ipsum dolor sit amet consiquest dio' }, { date: '2017年7月15日', time: '8:35 am', content: 'Lorem ipsum dolor sit amet consiquest dio' }, { date: '2017年7月15日', time: '8:35 am', content: 'Lorem ipsum dolor sit amet consiquest dio' }, { date: '2017年7月15日', time: '8:35 am', content: 'Lorem ipsum dolor sit amet consiquest dio' }, { date: '2017年7月15日', time: '8:35 am', content: 'Lorem ipsum dolor sit amet consiquest dio' } ] } }}

vm-chart-bar-line

属性

props: { // 图表区域高度 title: { type: String, default: '柱形图' }, height: { type: Number, default: 400 }, // 图表形状颜色, ecahrt依次选择颜色渲染 color: { type: Array, default: function () { return chartTheme.color } }, // 背景颜色 bgColor: { type: String, default: '#fff' }, // 横坐标数据 xAxisData: { type: Array, required: true, default: function () { return ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] } }, // 纵坐标数据 series: { type: Array, required: true, default: function () { return [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } } }

应用

...export default { data: function () { return { dataBar2: { xAxisData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], series: [ { name: '销量', type: 'bar', data: [50, 200, 360, 100, 100, 200] }, { name: '增长量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }, } }}

vm-table

属性

props: { title: { type: String, default: 'Basic Table' }, type: String, columns: Array, data: Array }

事件 编辑模式下可用

应用

...export default { methods: { add: function (data) { //... }, edit: function (data) { //... }, deletefn: function (data) { //... } }, data: function () { return { dataColumns: [ { title: '编号', key: 'id' }, { title: '姓名', key: 'name' }, { title: '年龄', key: 'age' }, { title: '地址', key: 'address' } ], dataTable: [ { id: '65416s843154', name: '王小明', age: 18, address: '北京市朝阳区芍药居' }, { id: '6541684q6534', name: '张小刚', age: 25, address: '北京市海淀区西二旗' }, ... { id: '65419843f154', name: '周小伟', age: 26, address: '深圳市南山区深南大道' } ] } }}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。