1.2.2 • Published 4 months ago
fallen-zero-ui v1.2.2
Fallen Zero UI
安装
# npm
npm install fallen-zero-ui
# yarn
yarn add fallen-zero-ui
#pnpm (推荐使用)
pnpm add fallen-zero-ui
快速开始
全局使用
在
main.ts
中引入注册, 全局注册没有代码提示
// * main.ts
import { createApp } from 'vue';
import App from '@/App.vue';
// 引入组件
import FallenZeroUi from 'fallen-zero-ui';
// 引入样式
import 'fallen-zero-ui/dist/style.css';
const app = createApp(App);
app.use(FallenZeroUi);
app.mount('#app');
按需引入 (推荐使用)
建议全局样式全局引入
// main.ts
import 'fallen-zero-ui/dist/style.css';
在页面中使用
<script lang="ts" setup>
import { EChartsOption } from 'echarts';
import { FzCountTo, FzECharts, FzScroll } from 'fallen-zero-ui';
import 'fallen-zero-ui/dist/index.css';
const echartsOptions: EChartsOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
},
],
};
const list = ref<number[]>([]);
for (let i = 0; i < 40; i++) {
list.value.push(i);
}
</script>
<template>
<div>
<FzCountTo :end-val="100" />
<div class="w-300px h-200px">
<FzECharts :option="echartsOptions" />
</div>
</div>
<div class="box">
<FzScroll :list="list" :wait-time="2000">
<template #default="{ data }">
{{ data }}
</template>
</FzScroll>
</div>
</template>
<style lang="scss">
.box {
width: 500px;
height: 60%;
margin: 0 auto;
background: rgb(255 255 255 / 0.2);
}
</style>
组件说明
组件 | 说明 |
---|---|
FzCountTo | 数字滚动组件 |
FzECharts | 生成ECharts组件 |
FzScroll | 列表滚动组件 |
FzCountTo - 滚动数字组件
参数说明
参数名 | 类型 | 说明 | 默认值 |
---|---|---|---|
startVal | number | 开始值 | 0 |
endVal | number | 结束值 | 当前年份(new Date().getFullYear()) |
duration | number | 持续时间, 以毫秒为单位 | 3000 |
autoplay | boolean | 自动播放 | true |
decimals | number | 要显示的小数位数 | 0 |
decimal | string | 十进制分割 | . |
separator | string | 分隔符 | , |
prefix | string | 前缀 | '' |
suffix | string | 后缀 | '' |
useEasing | boolean | 使用缓和功能 | true |
easingFn | Function | 缓和回调 | - |
注意: 当 autoplay: true 时, 它将在 startVal 或 endVal 更改时自动启动
回调函数说明
函数名称 | 参数 | 说明 |
---|---|---|
@mounted-callback | - | 组件挂载时执行的回调函数 |
@callback | - | 数字滚动到结束值得时候执行的回调函数 |
事件说明
事件名称 | 参数 | 说明 |
---|---|---|
start | - | 重新开始滚动 |
pause | - | 暂停滚动 |
resume | - | 继续滚动 |
pasueResume | - | 暂停时继续滚动, 滚动时暂停滚动 |
reset | - | 重置滚动的数字, 重置后只能调用 start 方法重新滚动 |
案例
<script setup lang="ts">
import { FzCountTo } from 'fallen-zero-ui';
import { useCompRef } from '@fallen-zero/use';
// 组件实例
const countToRef = useCompRef(FzCountTo);
// 重新开始
const restart = () => {
console.log('restart', countToRef.value);
countToRef.value && countToRef.value.start();
};
// 暂停
const pause = () => {
console.log('pause', countToRef.value);
countToRef.value && countToRef.value.pause();
};
// 继续
const resume = () => {
console.log('resume', countToRef.value);
countToRef.value && countToRef.value.resume();
};
// 暂停或继续
const pasueResume = () => {
console.log('pasueResume', countToRef.value);
countToRef.value && countToRef.value.pauseResume();
};
// 重置数字
const reset = () => {
console.log('reset', countToRef.value);
countToRef.value && countToRef.value.reset();
};
// 挂载完成后回调
const mountedCallback = () => {
console.log('组件挂载时执行的回调函数');
};
// 数字滚动完成后回调
const callback = () => {
console.log('数字滚动到结束值得时候执行的回调函数');
};
</script>
<template>
<FzCountTo
ref="countToRef"
:end-val="100"
:duration="10000"
@mounted-callback="mountedCallback"
@callback="callback"
/>
<el-button @click="restart">重新开始</el-button>
<el-button @click="resume">继续</el-button>
<el-button @click="pause">暂停</el-button>
<el-button @click="pasueResume">继续或暂停</el-button>
<el-button @click="reset">重置</el-button>
</template>
定时滚动案例:
<script setup lang="ts">
import { FzCountTo } from 'fallen-zero-ui';
import { useCompRef } from '@fallen-zero/use';
const value = ref<number>(2023);
const countRef = useCompRef(FzCountTo);
let timer: NodeJS.Timeout | null = null;
const clearTimer = () => {
if (timer) {
clearTimeout(timer);
timer = null;
}
};
const callback = () => {
if (!props.speed) return;
clearTimer();
timer = setTimeout(() => {
countRef.value?.start();
}, 3000);
};
onBeforeUnmount(clearTimer);
</script>
<template>
<FzCountTo ref="countRef" :end-val="value" @callback="callback" />
</template>
FzECharts - Echarts 组件
参数说明
参数 | 类型 | 说明 |
---|---|---|
option | EchartsOption | undefined | echarts 配置, 必传, 可以为 undefined |
回调函数说明
函数名 | 参数类型 | 说明 |
---|---|---|
@reload | - | 给 echarts 配置 option 赋值的方法, 为了解决浏览器窗口变化时, 重新渲染 echarts 图时, 动态字体大小失效问题, 必传 |
@getEcharts | EChartsType | 给 echarts 图添加事件 |
在 html
中使用
必须以具有宽高的容器进行包裹
控制
外部容器
显隐时使用v-if
进行控制,v-show
会丢失容器宽高导致样式冲突
<template>
<!-- 外部容器, 类名自定义, 必须要有宽高 -->
<div class="echarts">
<!-- 该组件已全局注册, 直接使用即可 -->
<plugins-echarts
eid="test_echarts_id"
:option="option"
@reload="getOption"
@get-echarts="getEcharts"
></plugins-echarts>
</div>
...
</template>
<style lang="scss" scoped>
.echarts {
width: 300px;
height: 300px;
}
</style>
typescript
中使用
<script setup lang="ts">
// 引入 echarts 的类型
import type { EchartsType, EchartsOption } from 'echarts';
// 引入配置方法, 如: 柱状图
import bar from '@echarts/bar';
// 定义存放 echarts 配置的变量
const option = ref<EchartsOption>();
/**
* 定义变量赋值的方法
*/
const getOption = () => {
// option.value = 获取配置的方法(...参数);
option.value = bar.getBar();
};
/**
* 获取 echarts 的方法, 用于对 echarts 添加事件
*/
const getEcharts = (echarts: EchartsType) => {
// 添加点击事件
echarts.on('click', function (params) {
console.log(params);
});
};
// 在没有给默认值的情况下, 变量赋值的方法一定要在父组件中先执行一次, 否则无法生成 echarts 图
getOptions();
// 如果是对接了接口, 可在接口数据返回后, 执行
const getData = async () => {
try {
const res = await 接口方法(...参数);
if (判断接口是否请求成功) {
执行数据处理;
// 执行变量赋值的方法
getOptions();
return;
}
message.error(接口请求失败, 错误提示);
} catch (error) {
message.error(方法出现异常, 错误提示);
}
};
</script>
FzScroll - 列表滚动组件
参数说明
参数 | 类型 | 说明 | 是否必填 | 默认值 |
---|---|---|---|---|
list | any[] | 列表数据 | 是 | - |
modelValue | boolean | 是否允许滚动 | 否 | true |
wheel | boolean | 是否允许鼠标滚轮滚动 | 否 | true |
hover | boolean | 是否鼠标悬停时暂停滚动 | 否 | true |
delay | number | 延迟滚动时间(ms) | 否 | 0 |
waitTime | number | 滚动停顿时间(ms) | 否 | 0 |
step | number | 滚动一次需要多久完成滚动(ms) | 否 | 800 |
案例
<script setup lang="ts">
import { FzScroll } from 'fallen-zero-ui';
import 'fallen-zero-ui/dist/index.css';
const list = ref<number[]>([]);
for (let i = 0; i < 40; i++) {
list.value.push(i);
}
</script>
<template>
<div class="box">
<FzScroll :list="list" :wait-time="2000">
<template #default="{ data }">
{{ data }}
</template>
</FzScroll>
</div>
</template>
<style lang="scss" scoped>
.box {
width: 500px;
height: 60%;
margin: 0 auto;
background: rgb(255 255 255 / 0.2);
}
</style>
1.2.2
4 months ago
1.2.1
4 months ago
1.2.0
7 months ago
1.1.11
7 months ago
1.1.10
7 months ago
1.1.9
7 months ago
1.1.8
7 months ago
1.1.7
7 months ago
1.1.6
7 months ago
1.1.5
7 months ago
1.1.4
7 months ago
1.1.3
7 months ago
1.1.2
7 months ago
1.1.1
7 months ago
1.0.10
7 months ago
1.0.9
7 months ago
1.0.8
7 months ago
1.0.7
7 months ago
1.0.6
7 months ago
1.0.5
7 months ago
1.0.4
7 months ago
1.0.3
7 months ago
1.0.2
7 months ago
1.0.1
7 months ago
1.0.0
8 months ago