vue-lib-lei

这是一个移动端的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	否

vue-lib-lei

安装

使用

全局引入

按需引入

直接组件中使用如下：

Collapse折叠面板组件

Popup弹层组件

CountTo数字动画组件

PageContainer组件（1.0.3版本新增）

Header组件（1.0.3版本新增）

PageContainer和Header组件使用示例

List组件（1.0.4版本新增）

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

Toast组件 (1.0.7版本新增)

Loading组件 (1.0.7版本新增)

/vue-lib-lei/

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

vue-lib-lei

安装

使用

全局引入

按需引入

直接组件中使用如下：

Collapse折叠面板组件

Popup弹层组件

CountTo数字动画组件

PageContainer组件（1.0.3版本新增）

Header组件（1.0.3版本新增）

PageContainer和Header组件使用示例

List组件（1.0.4版本新增）

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

Toast组件 (1.0.7版本新增)

Loading组件 (1.0.7版本新增)

/vue-lib-lei/

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads