l-ynet-timer-project
v2.1.0
Published
1. 安装依赖 ``` npm install l-ynet-timer-project ``` 2. 注册到main.js ``` import Vue from 'vue'; import TimerProject from 'l-ynet-timer-project'; Vue.use(TimerProject); ```
Downloads
3
Maintainers
Readme
安装使用
- 安装依赖
npm install l-ynet-timer-project
- 注册到main.js
import Vue from 'vue';
import TimerProject from 'l-ynet-timer-project';
Vue.use(TimerProject);
使用方法
<div id="app">
<h1>
</h1>
<div
class="example__container"
v-for="example in examples"
:key="example.title"
>
<h1>{{ example.title }}</h1>
<circular-count-down-timer
:steps="example.steps" // 倒计时秒数
:stroke-color="example.strokeColor" // 进度条颜色
/>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return {
examples: [
{
title: 'Simple',
circles: [
{
id: '1',
steps: 10,
strokeColor:'red'
}
]
}
]
};
}
};
</script>
<style>
#app {
width: 100%;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
align-items: center;
color: #2c3e50;
background-color: aliceblue;
}
.example__container {
text-align: center;
margin-bottom: 50px;
background-color: #6de0f3;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.circle__container--1 {
width: 420px;
display: flex;
flex-direction: row-reverse !important;
flex-wrap: wrap;
}
</style>```