vue-ui-nostyle v1.0.17

Install

npm i vue-ui-nostyle --save

Usage

example: https://github.com/lucyhao/vue-ui-nostyle/tree/master/example

import all components:

import ui from 'vue-ui-nostyle';

import specific component:

pagination

<template>
    
    <pagination
        :windowPageLen="5"
        :totalPage = "30"
        :currentPage = "1"
        v-on:getPageInfo = "changePage"
    />
   
    <pagination
        :windowPageLen="5"
        :totalPage= "20"
        :currentPage= "1"
        :firstButton= "true"
        :lastButton= "true"
        className= "my-pagination"
        v-on:getPageInfo= "changePage"
    >
        
        <div slot="pre-btn">
        <span>&lt;</span>
        </div>
        
        <div slot="next-btn">
        <span>&gt;</span>
        </div>
        
        <div slot="pre-first-btn">
        <span>&lt;&lt;</span>
        </div>
        
        <div slot="next-last-btn">
        <span>&gt;&gt;</span>
        </div>
        
    </pagination>
    
</template>

<script>
import { pagination } from 'vue-ui-nostyle';

export default {
    name: '**',
    components: {
        pagination,
    },
    methods: {
        changePage(currentPageIndex) {
            alert(`curPageIndex: ${currentPageIndex}`);
        },
    }
}
</script>

<style lang="scss" scoped>
.my-pagination /deep/ {
  /* your css*/
}
</style>

tab

<template>
    <div>
        <div>Basic Tab:</div>
        <tab :label="['title1','title2']">
            <tab-item index="0">item1</tab-item>
            <tab-item index="1">item2</tab-item>
        </tab>
        
        <div>Tab with your own css:</div>
        <tab className="my-tab"
            :label="{
            'key1': 'title1',
            'key2': 'title2',
            'key3': 'title3'
            }"
        >
            <tab-item index="key1">content1</tab-item>
            <tab-item index="key2">content2</tab-item>
            <tab-item index="key3">content3</tab-item>
        </tab>
            
        <div>Define your tab's action(see tab title2):</div>
        <tab className="my-tab"
            :label="{
            'key1': 'title1',
            'key2': 'title2',
            'key3': 'title3'
            }"
            v-on:tabClick= "tabClick1"
        >
            <tab-item index="key1">content1</tab-item>
            <tab-item index="key3">content3</tab-item>
        </tab>
    </div>
</template>

<script>

import { tab } from 'vue-ui-nostyle';

export default {
    name: '**',
    components: {
        tab,
    },
    methods: {
        tabClick1(key) {
            if (key === 'key2') {
                window.open(
                'https://vuejs.org/',
                '_blank',
                );
            }
        },
    }
}

</script>

<style lang="scss" scoped>
.my-tab /deep/ {
  /* your css*/
}
</style>

popup

<template>
    <div>
        <popup
            :show="showPopup"
            :buttons="modalButton"
            :confirmCallback="modalCallBack"
            v-on:close="showPopup = false"
            v-on:confirm="confirmPopupDialog"
            >
            <div slot="header" v-html="modalTitle"></div>
            <div slot="main" v-html="modalBody"></div>
            </popup>

        <popup
            class-name="my-popup"
            :show="showMyPopup"
            :buttons="modalButton"
            :confirmCallback="() => { return this.showMyPopup = false}"
            v-on:close="showMyPopup = false"
            v-on:confirm="showMyPopup = false"
        >
            <div slot="header" v-html="modalTitle"></div>
            <div slot="main" v-html="modalBody"></div>
        </popup>
    </div>
</template>

<script>

import { popup } from 'vue-ui-nostyle';

export default {
    name: '**',
    components: {
        popup,
    },
    data() {
        return {
            showMyPopup: false,
            showPopup: false,
            modalTitle: '',
            modalBody: '',
            modalButton: {},
            modalCallBack: () => { return this.showPopup = false},
        };
    },
    methods: {
        showPopupBtn() {
            this.modalTitle = 'title1';
            this.modalBody = 'body1';
            this.modalCallBack = this.confirmPopupDialog;
            this.modalButton = {
                hasConfirmBtn: true,
                confirmTxt: 'btn-confirm-text',
                hasCloseBtn: true,
                closeTxt: 'btn-close-text'
            };
            this.showPopup = true;
        },
        confirmPopupDialog() {
            let me = this;
            this.modalTitle = 'title2';
            this.modalBody = 'body2';
            this.modalButton = {
                hasConfirmBtn: true,
                confirmTxt: 'btn-confirm2-text',
                hasCloseBtn: false,
            };
            this.modalCallBack = () => {
                me.showPopup = false;
            };
        },
        showPopupBtn1() {
            this.modalTitle = 'title3';
            this.modalBody = 'body3';
            this.modalButton = {
                hasConfirmBtn: true,
                confirmTxt: 'btn-confirm3-text',
                hasCloseBtn: true,
                closeTxt: 'btn-close3-text'
            };
            this.showMyPopup = true;
        },
    }
}

</script>

<style lang="scss" scoped>
.my-popup /deep/ {
  /* your css*/
}
</style>

carousel

<template>
    <div>
        Basic Carousel: 
        <carousel height="150px">
          <carousel-item v-for="index in 4" :key="index">
            <div>{{ index }}</div>
          </carousel-item>
        </carousel>

        Carousel with your own css:
        <carousel 
          className="my-carousel"
          height="150px"
          :arrow="false"
        >
          <carousel-item v-for="index in 3" :key="index">
            <div>{{ index }}</div>
          </carousel-item>
        </carousel>

        Carousel with auto animation & without arrow btn:
        <carousel
          className="my-carousel"
          height="150px"
          :arrow="false"
          :interval="3000"
        >
          <carousel-item v-for="index in 3" :key="index">
          <div>{{ index }}</div>
          </carousel-item>
        </carousel>

    </div>
</template>
<script>
import { carousel, carouselItem } from 'vue-ui-nostyle';

export default {
    name: '**',
    components: {
        carousel,
        carouselItem,
    },
}
</script>

<style lang="scss" scoped>
.my-carousel /deep/ {
  /* your css*/
}
</style>

slider

<template>
    <div>
        Basic Slider:
        <Slider />

        Styled Slider: {{ sliderSize }}
        <Slider
          className= "my-slider"
          :max='200'
          :pos='100'
          :showBtn='false'
          v-on:changeSlider="getSliderPos"
        />
    </div>
</template>

<script>
import { slider } from 'vue-ui-nostyle';

export default {
    name: '**',
    components: {
        slider,
    },
    data() {
        return {
           sliderSize: 0,
        };
    },
    methods: {
        getSliderPos(value) {
            this.sliderSize = value;
        },
    }
}
</script>

<style lang="scss" scoped>
.my-slider /deep/ {
  /* your css*/
}
</style>

infinite

<template>
    <div>
        <div class="infinite-card" infinite-wrapper id="Infinite">
            <div>
                <p v-for="item in infiniteTestList" :key="item">
                    Line:<span v-text="item"></span>
                </p>
            </div>
            <div>
                <infinite v-on:load="loadMoreData">
                <div slot="loading">loading style</div>
                </infinite>
            </div>
        </div>
        infinite data with limit DOM:

        <div class="infinite-card-limit" infinite-region-wrapper>
            <div style="position:relative">
            <p v-for="item in waterfallDataRegion" 
                :key="item.index"
                :style="item.style"
            >
                Line: <span>{{item.text}}</span>
            </p>
            </div>
            
            <infinite 
                :itemHeight="30"
                itemType="region"
                v-on:load="loadMoreDataRegion" 
                v-on:region="loadRegionItem"
            >
            <div slot="loading">loading style</div>
            </infinite>
            
        </div>
    </div>
</template>

<script>
import { infinite } from 'vue-ui-nostyle';

export default {
    name: '**',
    components: {
        infinite,
    },
    data() {
        return {
            infiniteTestList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
            waterfallData: [0,1,2,3,4,5,6,7,8,9,10],
            waterfallDataRegion:[],
            start: 11,
        };
    },
    created() {
        for(let i = 0; i< 10; i++){
            this.waterfallDataRegion.push({
                'index': i, 
                'style':{'top':i*30+'px',left:'0px',position:'absolute'},
                'text': `a${i}`
            });
        }
    },
    methods: {
        loadMoreData(loadingComplete) {
            /*
                loading more data, sending a request or something.
                after that remember to execute loadingComplete()
            */
            const start = this.infiniteTestList.length + 1;
            for (let i = start; i < 10 + start; i += 1) {
                this.infiniteTestList.push(i);
            }
            /*
                most of the time, we do a request in our project.
                using setTimemout just for the example, can view the loading process.
            */
            setTimeout(() => {
                loadingComplete();
            }, 500);
        },
        loadRegionItem(start) {
      
            this.waterfallDataRegion = [];
            let _start = parseInt(start,10) - 1;
            let _end = 0;

            if(_start < 0){
                _start = 0;
            }
            _end = _start + 10;
            if(_end > this.waterfallData.length){
                _end = this.waterfallData.length;
            }
            
            for (let i = _start; i < _end; i += 1) {
                this.waterfallDataRegion.push({
                'index': i, 
                'style':{'top':i*30+'px',left:'0px',position:'absolute'},
                'text': `a${i}`
                });
            }
            
        },
        loadMoreDataRegion(loadingComplete) {
            for (let i = this.start; i < 10+this.start; i += 1) {
                this.waterfallData.push(i);
            }
            this.start = this.start+10;
            loadingComplete();
        },
    }
}
</script>

<style lang="scss" scoped>
.infinite-card {
  height: 200px;
  overflow: auto;
}
</style>