基于Vue、Bootstrap的一套MVVM组件,简单、易用、功能强大
Clone or download
Latest commit 8eaf0e2 Oct 30, 2018
Permalink
Type Name Latest commit message Commit time
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 Oct 30, 2018
gulpfile.js 合成all in one的方式引用 Jan 26, 2015

README.md

请关注(Rainbow)组件。

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 //初始索引
        }
    }
})