这是一个移动端的vue3的组件库，支持按需引入，使用TypeScript编写，支持类型提示。 目前有Popup弹层组件、Collapse折叠面板组件、CountTo数字动画组件、PageContainer组件、Header组件、List组件、Toast组件、v-copy指令等，后续还会有更多组件加入。 会不定期更新和维护，建议使用最新版。

安装

npm install vue-lib-lei

使用

全局引入

import { createApp } from 'vue';
import App from './App.vue';
import VueLibLei from 'vue-lib-lei';
import 'vue-lib-lei/dist/style.css';


const app = createApp(App);
app.use(VueLibLei);
app.mount('#app');

// 在其他需要用到的组件中可以随意使用组件，无需再导入了
<CountTo :startVal="0" :endVal="100"></CountTo>
<Popup :showPop="true">
    <template #content>
        <div>
            这是内容；这是内容
        </div>
    </template>
</Popup>
<Collapse :showDetail="true">
    <div>
        这是内容；这是内容；这是内容；这是内容
    </div>
</Collapse>

按需引入

import { Popup } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

const app = createApp(App);
app.component(Popup.name, Popup);
app.mount('#app');

// 在其他需要用到的组件中可以随意使用，无需再导入了，使用同上

直接组件中使用如下：

Collapse折叠面板组件

import { Collapse } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

const isShow = ref(false);

<template>
    <div>
        <button @click="isShow =!isShow">点击展开/收起</button>
        <Collapse :showDetail="isShow">
            <div>
                这是内容；这是内容；这是内容；这是内容
            </div>
        </Collapse>
    </div>
</template>

Collapse组件的属性：

| 属性名 | 类型 | 说明 | 默认值 | |------------|----------|--------------|----------| | showDetail | boolean | 是否展示详细内容 | false |

Collapse组件的插槽：

| 插槽名 | 说明 | |---------|------| | default | 正文内容 |

Popup弹层组件

import { Popup } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

const isShow = ref(false);

<template>
    <div>
        <button @click="isShow = true">点击弹出</button>
        <Popup :showPop="isShow">
            <template #content>
                <div>
                    这是内容；这是内容
                </div>
            </template>
        </Popup>
    </div>
</template>

Popup组件的属性：

| 属性名 | 类型 | 说明 | 默认值 | |--------------|----------|---------------------------------------|-----------------| | showPop | boolean | 是否展示弹层 | false | | bgColor | string | 背景色 | rgba(0,0,0,0.8) | | clickClose | boolean | 是否点击遮罩外关闭弹层 | false | | showClose | boolean | 是否显示关闭按钮 | false | | animPos | string | 遮罩从哪个位置出现，可选值：top、left、right、bottom | bottom | | isAutoClose | boolean | 是否自动关闭遮罩 | false | | duration | number | 自动关闭时间，单位为ms，仅在isAutoClose为true时有效 | 2500 |

Popup组件的插槽：

| 插槽名 | 说明 | |---------|------| | content | 弹层内容 |

CountTo数字动画组件

import { CountTo } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

<template>
    <div>
        <CountTo :startVal="0" :endVal="100"></CountTo>
    </div>
</template>

CountTo组件的属性：

| 属性名 | 类型 | 说明 | 默认值 | |-------------|----------|-----------------------------------------------|-------| | startVal | number | 开始值 | 0 | | endVal | number | 结束值 | 0 | | duration | number | 动画时长，单位为ms | 3000 | | decimals | number | 展示的小数位数，如果传了decimals，则以该值为准，否则会取endVal的小数位数 | 0 | | autoplay | boolean | 是否自动执行 | true | | isFormat | boolean | 是否进行千分位格式化操作 | true | | onEnd | function | 动画结束回调函数 | |

PageContainer组件（1.0.3版本新增）

（常与Header组件搭配使用，isToRem和tabBarHeight属性需保持一致）

import { PageContainer } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

<template>
    <div>
        <PageContainer>
            这是组件的内容。。。
        </PageContainer>
    </div>
</template>

PageContainer组件的属性：

| 属性名 | 类型 | 说明 | 默认值 | |--------------|---------|---------------------------------|------| | needPadding | boolean | 正文内容是否需要向上的padding，false时内容会顶上去 | true | | tabBarHeight | number | 顶部状态栏高度（一般通过客户端获取） | 22 | | isToRem | boolean | 是否需要将px转换为rem | true |

PageContainer组件的插槽：

| 插槽名 | 说明 | |---------|------| | default | 正文内容 |

Header组件（1.0.3版本新增）

(常与PageContainer组件搭配使用，isToRem和tabBarHeight属性需保持一致)

import { Header } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

<template>
    <div>
        // 常用
        <Header @handleBack="() => {}" :title="'首页'"></Header>
        
        // 自定义
        <Header @handleBack="() => {}" :title="'首页'" @rightClick="() => {}">
            <template #custom>返回</template>  // 自定义返回按钮样式,需要设置属性isCustom为true
            <template #mg-title></template>  // 自定义标题内容
            <template #mg-right>明细</template>
        </Header>
    </div>
</template>

Header组件的属性：

| 属性名 | 类型 | 说明 | 默认值 | |----------------|----------|-----------------------|------------------------------------| | title | string | 页面标题 | | | bgColor | string | header背景色 | transparent | | backColor | string | black | 返回按钮颜色，可选值'black'、'white'，可自定义按钮样式 | | isshowBack | boolean | 是否显示返回按钮 | true | | width | string | header宽度 | 100% | | needShowHeader | boolean | 页面滚动时是否需要展示header | true | | showTitle | boolean | 是否显示标题 | true | | titleColor | string | 标题颜色 | #4a4a4a | | isCustom | boolean | 是否需要自定义左侧返回按钮部分 | false | | rightColor | string | 右侧按钮颜色 | #4a4a4a | | tabBarHeight | number | 顶部状态栏高度（一般通过客户端获取） | 22 | | isToRem | boolean | 是否需要将px转换为rem | true |

Header组件的事件：

| 事件名 | 说明 | 参数 | |------------|------------------|------| | handleBack | 点击返回按钮时触发 | | | rightClick | 点击右侧按钮时触发 | |

Header组件的插槽：

| 插槽名 | 说明 | |----------|-----------| | custom | 自定义返回按钮样式 | | mg-title | 自定义标题内容 | | mg-right | 自定义右侧按钮内容 |

PageContainer和Header组件使用示例

<template>
    <div>
        <PageContainer>
            <Header @handleBack="() => {}" :title="'首页'" @rightClick="() => {}">
                <template #custom>返回</template>
                <template #mg-title></template>
                <template #mg-right>明细</template> // 有右侧按钮时，需要设置rightClick事件
            </Header>
            <div>
                这是组件的内容。。。
            </div>
        </PageContainer>
    </div>
</template>

List组件（1.0.4版本新增）

import { VirtualList } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

<virtual-list
    :height="500"
    :items="items"
    :item-height="50"
    :loadMore="loadMore"
    :hasNext="hasNext"
>
    <template v-slot:default="{ item }">
      <div class="item">{{ item.name }}</div>
    </template>
    // 可自定义无数据时显示的文案
    <template v-slot:noText>暂无数据</template>
    // 可自定义无更多数据时显示的内容
    <template v-slot:noMore>没有更多数据了~</template>
    // 可自定义无数据时显示的图片
    <template v-slot:noImg>
        <img src="https://via.placeholder.com/150" alt="暂无图片">
    </template>
</virtual-list>

const hasNext = ref(true);  // 是否还有下一页数据
const loadMore = () => {
    // 加载下一页数据
}
const items = ref(Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Item ${i}` })));

VirtualList组件的属性：

| 属性名 | 类型 | 说明 | 默认值 | 是否必填 | |------------|----------|-----------|-----------|------| | height | number | 容器高度 | 页面可视区域的高度 | 否 | | items | array | 列表数据 | [] | 是 | | itemHeight | number | 列表项高度 | 50 | 是 | | loadMore | function | 加载更多数据的方法 | | 是 | | hasNext | boolean | 是否还有下一页数据 | true | 是 | | buffer | number | 提前加载的项数 | 10 | 否 |

VirtualList组件的插槽：

| 插槽名 | 说明 | 版本 | |----------|---------------|------------| | default | 列表项内容 | 1.0.4版本 | | noText | 无数据时显示的文案 | 1.0.6版本新增 | | noMore | 无更多数据时显示的内容 | 1.0.6版本新增 | | noImg | 无数据时显示的图片 | 1.0.6版本新增 |

v-copy指令 (1.0.7版本新增)

// 使用示例
// 入口文件引入
import { VCopy } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";
app.directive('copy', VCopy)

// 页面中使用
// 复制文本到剪切板, 如果不传onSuccess和onError，则显示默认的toast
// 参数：text: 复制的文本，onSuccess: 成功回调(可选)，onError: 失败回调（可选）
<button 
    v-copy="{
        text: 'hello world',
        onSuccess: () => {},
        onError: () => {}
    }"
>
复制</button>

v-copy指令的参数：

| 属性名 | 类型 | 说明 | 默认值 | 是否必填 | |------------|----------|-----------|-----------|------| | text | string | 复制的文本 | | 是 | | onSuccess | function | 成功回调 | | 否 | | onError | function | 失败回调 | | 否 |

Toast组件 (1.0.7版本新增)

// 使用示例
// 参数：message: toast内容，duration: toast显示时长（单位：毫秒）
// 1、按需引入
import { Toast } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

Toast({
    message: "hello world",
})

// 2、全局引入
import { Toast } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

app.config.gloablProperties.$toast = Toast;

// 或者
import MyPlugin from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

app.use(MyPlugin);

// 页面中使用
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
instance?.appContext.config.globalProperties.$toast({
    message: "hello world",
    duration: 3000
})

Toast组件的参数： | 属性名 | 类型 | 说明 | 默认值 | 是否必填 | |------------|----------|-----------|-----------|------| | message | string | toast内容 | | 是 | | duration | number | toast显示时长（单位：毫秒） | 1800 | 否 | | onClose | function | toast消失的回调 | | 否 |

Loading组件 (1.0.7版本新增)

// 使用示例
// 1、按需引入
// 参数：message: loading内容，duration: loading显示时长（单位：毫秒）
import { Loading } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

// 显示loading
Loading.show()

// 自定义loading颜色
Loading.show({
    color: '#0094ff',
    textColor: '#0094ff'
})

// 隐藏loading
Loading.hide()

// 2、全局引入
import MyPlugin from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

app.use(MyPlugin);

// 或者
import { Loading } from 'vue-lib-lei';
import "vue-lib-lei/dist/style.css";

app.config.gloablProperties.$loading = Loading;

// 页面中使用
import { getCurrentInstance } from 'vue';
const loading = getCurrentInstance()?.appContext.config.globalProperties.$loading;

loading.show();
loading.hide();

Loading方法的参数（以对象的形式传递）： | 属性名 | 类型 | 说明 | 默认值 | 是否必填 | |------------|----------|-----------|-----------|------| | text | string | loading内容 | 加载中... | 否 | | color | string | loading颜色 | #0094ff | 否 | | textColor | string | loading文字颜色 | #0094ff | 否 | bgColor | string | loading背景颜色 | transparent | 否