基于Vue、Bootstrap的一套MVVM组件,简单、易用、功能强大
JavaScript HTML CSS
Latest commit 1d8b295 Sep 23, 2016 @bravf committed on GitHub Update README.md
Permalink
Failed to load latest commit information.
dist update May 6, 2015
lib 合成all in one的方式引用 Jan 26, 2015
src update May 6, 2015
README.md Update README.md Sep 23, 2016
gulpfile.js 合成all in one的方式引用 Jan 26, 2015

README.md

请关注eleme团队出品的element组件,很好很强大。

VueUI (停止更新!!!)

依赖bootstrap,jquery,vue.js,使用之前引用:

<link href="dist/vueUI.css" rel="stylesheet">
<script src="dist/vueUI.js"></script>

datepicker组件 (Demo)

html:
<div id="datepickerTest">
    <vue-datepicker vue-model="sDate" vue-id="myDP">
    </vue-datepicker>
</div>

js:
new Vue({
    el : '#datepickerTest',
    data : {
        sDate : '2015-02-14'
    }
})

pager组件 (Demo)

html:
<div id="pagerTest">
    <vue-pager v-with="config:pagerConf" vue-id="firstPager">
    </vue-pager>
</div>

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)

html:
<vue-select v-with="config:selectConf" vue-model="step1.selectValue" vue-id="mySelect">
    <option value="1">江苏省南通市1</option>
    <option value="2">江苏省南通市2</option>
    <option value="3">江苏省南通市3</option>
    <option value="4">江苏省南通市4</option>
    <option value="5">江苏省南通市5</option>
</vue-select>

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)

html:
<vue-table v-with="config:tableConf" vue-id="myTable"></vue-table>

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)

//内置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
<vue-modal v-with="config:conf" vue-id="logModal">
    <h4>日志列表</h4>
    <vue-table v-with="config:tableConf"></vue-table>
</vue-modal>
<button class="btn btn-default" v-on="click:vModal">modal</button>

//js
new Vue({
    el : '#pagerTest',
    data : {
        conf : {
            width : 600
        },
        tableConf : {
            columns : ['id', 'name', 'math']
        }
    },
    methods : {
        vModal : function (){
            VueUI.getComponent('logModal').toggle = true
        }
    }
}

tab(选项卡)

//html
<vue-tab v-with="config:conf" vue-id="myTab">
    <ul class="nav nav-tabs">
        <li>
            <a href="javascript:;">tab1</a>
        </li>
        <li>
            <a href="javascript:;">tab2</a>
        </li>
        <li>
            <a href="javascript:;">tab3</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane">
            <vue-table></vue-table>
        </div>
        <div class="tab-pane">content2</div>
        <div class="tab-pane">content3</div>
    </div>
</vue-tab>

//js
new Vue({
    el : '#tabTest',
    data : {
        conf : {
            active : 1 //初始索引
        }
    }
})