diff --git a/README.md b/README.md index c3924d5..a5503af 100644 --- a/README.md +++ b/README.md @@ -1,205 +1,205 @@ -请关注MeiliFE团队出品的Aurora组件,很好很强大。 -====================== -VueUI (停止更新!!!) -====================== -依赖bootstrap,jquery,vue.js,使用之前引用: -``` - - -``` - -## datepicker组件 ([Demo][1]) -``` -html: -
- - -
- -js: -new Vue({ - el : '#datepickerTest', - data : { - sDate : '2015-02-14' - } -}) -``` - -## pager组件 ([Demo][2]) -``` -html: -
- - -
- -js: -var pagerConf = { - totalPage : 0, - currPage : 1, - prevShow : 3, - nextShow : 3, - onChange : function (num){ - console.log(num) - } -} - -new Vue({ - el : '#pagerTest', - data : { - pagerConf : pagerConf - } -}) -``` - -## select组件 ([Demo][3]) -``` -html: - - - - - - - - -js: -var selectConf = { - data : [], - width : 130, - onChange : function (value){ - //console.log(value) - } -} -new Vue({ - el : '#selectTest', - data : { - selectConf : selectConf, - step1 : { - selectValue : 3 - } - } -}) -//selectConf.data = [{value:'',text:''},...] -//VueUI.getComponent('mySelect') -``` -##table组件 ([Demo][4]) -``` -html: - - -js: -var tableConf = { - //isShowHead : false, - //isShowFoot : false, - isCheckable : true, - columns : [ - {'field':'name', 'isSortable':true}, - 'math', - 'chinese', - {'field':'english', 'text':'英语', 'textAlign':'left','isSortable':true}, - 'operate' - ], - onPagerChange : function (num){ - getData(num) - }, - onSortChange : function (field, dir){ - console.log(field) - console.log(dir) - } -} -new Vue({ - el : '#tableTest', - data : { - tableConf : tableConf - } -}) -``` -##modal(模态框 [Demo][5]) -``` -//内置alert,confirm行为和浏览器自带方法一致 -VueUI.alert('hello,world!') -VueUI.alert({ - title : '', //可选,如果为空则被document.title取代 - content : 'hello,world', - okCallback : function (){} //可选,当点击确认按钮后发生的操作 -}) - -VueUI.confirm({ - title : '', //可选,如果为空则被document.title取代 - content : 'hello,world', - okCallback : function (){}, //可选,当点击确认按钮后发生的操作 - cancelCallback : function (){} //可选,当点击取消按钮后发生的操作 -}) -``` - -``` -//自定义模态框 - -//html - -

日志列表

- -
- - -//js -new Vue({ - el : '#pagerTest', - data : { - conf : { - width : 600 - }, - tableConf : { - columns : ['id', 'name', 'math'] - } - }, - methods : { - vModal : function (){ - VueUI.getComponent('logModal').toggle = true - } - } -} -``` - -##tab(选项卡) -``` -//html - - -
-
- -
-
content2
-
content3
-
-
- -//js -new Vue({ - el : '#tabTest', - data : { - conf : { - active : 1 //初始索引 - } - } -}) -``` - - - [1]: http://sandbox.runjs.cn/show/yamvreus - [2]: http://sandbox.runjs.cn/show/4abmqavu - [3]: http://sandbox.runjs.cn/show/z0dcccbo - [4]: http://sandbox.runjs.cn/show/31opvmzw - [5]: http://sandbox.runjs.cn/show/22u2abu6 +请关注MeiliFE团队出品的Aurora组件,很好很强大。 +====================== +VueUI (停止更新!!!) +====================== +依赖bootstrap,jquery,vue.js,使用之前引用: +``` + + +``` + +## datepicker组件 ([Demo][1]) +``` +html: +
+ + +
+ +js: +new Vue({ + el : '#datepickerTest', + data : { + sDate : '2015-02-14' + } +}) +``` + +## pager组件 ([Demo][2]) +``` +html: +
+ + +
+ +js: +var pagerConf = { + totalPage : 0, + currPage : 1, + prevShow : 3, + nextShow : 3, + onChange : function (num){ + console.log(num) + } +} + +new Vue({ + el : '#pagerTest', + data : { + pagerConf : pagerConf + } +}) +``` + +## select组件 ([Demo][3]) +``` +html: + + + + + + + + +js: +var selectConf = { + data : [], + width : 130, + onChange : function (value){ + //console.log(value) + } +} +new Vue({ + el : '#selectTest', + data : { + selectConf : selectConf, + step1 : { + selectValue : 3 + } + } +}) +//selectConf.data = [{value:'',text:''},...] +//VueUI.getComponent('mySelect') +``` +## table组件 ([Demo][4]) +``` +html: + + +js: +var tableConf = { + //isShowHead : false, + //isShowFoot : false, + isCheckable : true, + columns : [ + {'field':'name', 'isSortable':true}, + 'math', + 'chinese', + {'field':'english', 'text':'英语', 'textAlign':'left','isSortable':true}, + 'operate' + ], + onPagerChange : function (num){ + getData(num) + }, + onSortChange : function (field, dir){ + console.log(field) + console.log(dir) + } +} +new Vue({ + el : '#tableTest', + data : { + tableConf : tableConf + } +}) +``` +## modal(模态框 [Demo][5]) +``` +//内置alert,confirm行为和浏览器自带方法一致 +VueUI.alert('hello,world!') +VueUI.alert({ + title : '', //可选,如果为空则被document.title取代 + content : 'hello,world', + okCallback : function (){} //可选,当点击确认按钮后发生的操作 +}) + +VueUI.confirm({ + title : '', //可选,如果为空则被document.title取代 + content : 'hello,world', + okCallback : function (){}, //可选,当点击确认按钮后发生的操作 + cancelCallback : function (){} //可选,当点击取消按钮后发生的操作 +}) +``` + +``` +//自定义模态框 + +//html + +

日志列表

+ +
+ + +//js +new Vue({ + el : '#pagerTest', + data : { + conf : { + width : 600 + }, + tableConf : { + columns : ['id', 'name', 'math'] + } + }, + methods : { + vModal : function (){ + VueUI.getComponent('logModal').toggle = true + } + } +} +``` + +## tab(选项卡) +``` +//html + + +
+
+ +
+
content2
+
content3
+
+
+ +//js +new Vue({ + el : '#tabTest', + data : { + conf : { + active : 1 //初始索引 + } + } +}) +``` + + + [1]: http://sandbox.runjs.cn/show/yamvreus + [2]: http://sandbox.runjs.cn/show/4abmqavu + [3]: http://sandbox.runjs.cn/show/z0dcccbo + [4]: http://sandbox.runjs.cn/show/31opvmzw + [5]: http://sandbox.runjs.cn/show/22u2abu6