1.0.2 • Published 3 years ago
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 |