ft-component-set

Reference method

// Mode 1: Global Import
import ftComponentSet from 'ft-component-set'; // 引入的组件
import 'ft-component-set/style.css'; // 引入组件样式

const app = createApp(App);

app.use(ftComponentSet).mount('#app');

...

<countTo :endVal="2022"></countTo>
<pageQuery :total="10"></pageQuery>
<ftVideo :data="{}" :controls="false" muted></ftVideo>

<template>
  <countTo :startVal="0" :endVal="2022" :duration="3000"></countTo>
  <pageQuery :total="10"></pageQuery>
  <ftVideo :data="videoData" :controls="false" muted></ftVideo>
</template>
<script setup>
  // Mode 2: On Demand Import
  import { countTo, pageQuery, ftVideo } from 'ft-component-set';
  import 'ft-component-set/style.css';

  const videoData =  {
    url: 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8',
    name: 'test'
  }
</script>

Options : ft-video

Property	Description	type	default
data	Video Information	Object	--
controls	Show Control Bar	Boolean	false
muted	Mute	Boolean	true

Options : page-query

Property	Description	type	default
total	Total Page	Number	--
index	Current Page Index	Number	false
isLoop	Whether to Loop	Boolean	false
timing	Loop Interval	Boolean	true

Options ： count-to

Property	Description	type	default
startVal	the value you want to begin at	Number	0
endVal	the value you want to arrive at	Number	2022
duration	duration in millisecond	Number	3000
autoplay	when mounted autoplay	Boolean	true
decimals	the number of decimal places to show	Number	0
decimal	the split decimal	String	.
separator	the separator	String	,
prefix	the prefix	String	''
suffix	the suffix	String	''
useEasing	is use easing function	Boolean	true
easingFn	the easing function	Function	—
** notes: when autoplay:true , it will auto start when startVal or endVal change **

Functions ： count-to

Function Name	Description
mountedCallback	when mounted will emit mountedCallback
start	start the countTo
pause	pause the countTo
reset	reset the countTo