ijijin-view(Vue)

其他组件

其他高频率使用的组件，本UI库采用了以下两个组件（下拉刷新、上拉弹窗）。

下拉刷新

1.调用方式

按需引用PullRefresh组件

    import PullRefresh from 'ijijin-view/vue/PullRefresh'

如

<template>
    <pull-refresh v-model="pullRefreshLoading" @refresh="onRefresh">
        此块区域可下拉刷新
    </pull-refresh>
</template>
<script>
    import PullRefresh from 'ijijin-view/vue/PullRefresh'

    export default {
        data () {
            return {
                pullRefreshLoading: false
            }
        },

        components: {
            PullRefresh
        },

        methods: {
            onRefresh () {
                setTimeout(() => {
                    alert('test success');
                    this.pullRefreshLoading = false;
                }, 1000);
            }
        }
    }
</script>

2.API

参数 类型 默认值 说明
disabled Boolean false 是否禁止下拉刷新（可选）
pullingText String '下拉刷新' 下拉时文案展示（可选）
loadingText String '加载中...' 加载时文案展示（可选）
loosingText String '释放刷新' 可释放时文案展示（可选）
logoImg String/Boolean '//s.thsi.cn/ijijin/image/fundloading.png' 图标地址（可选）
value Boolean '' 绑定属性（可选）

上拉弹窗

1.调用方式

按需引用PullWindow组件

    import PullWindow from 'ijijin-view/vue/PullWindow'

如

    <template>
        <div>
            <v-button @click="pullwindowshow = true">点击显示弹窗</v-button>
            <pull-window v-model="pullwindowshow" title="默认弹窗" :close="closeWin" titleright="遇到问题?" :closeright="winClick">
                <div style="min-height: 4rem;">弹窗内容1</div>
            </pull-window>
        </div>
    </template>
    <script>
        import PullWindow from 'ijijin-view/vue/PullWindow'

        export default {
            data () {
                return {
                    pullwindowshow: false
                }
            },

            components: {
                PullWindow
            },
            
            methods: {
                closeWin () {
                    this.pullwindowshow = false
                },
                winClick () {
                    this.$toast.show('you click right link.');
                }
            }
        }
    </script>

2.API

参数 类型 默认值 说明
title String '' 弹窗标题（可选）
close Function function () {} 点击关闭时回调函数（可选）
clickRight Function function () {} 点击右侧文案回调（可选）
titleRight String '' 右侧文案（可选）
value Boolean 绑定数据（必填）

具体样例见右示例

← 二次开发 →