add && refine
This commit is contained in:
Pan
187
src/views/components/countTo.vue
Normal file
187
src/views/components/countTo.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="components-container">
|
||||
<code>countTo 组件 <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>线上地址</a></code>
|
||||
|
||||
<count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
|
||||
:separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay='false' />
|
||||
<div style='margin-left: 25%;margin-top: 40px;'>
|
||||
<label class="label" for="startValInput">startVal: <input type="number" v-model.number='setStartVal' name='startValInput' /></label>
|
||||
<label class="label" for="endValInput">endVal: <input type="number" v-model.number='setEndVal' name='endVaInput' /></label>
|
||||
<label class="label" for="durationInput">duration: <input type="number" v-model.number='setDuration' name='durationInput' /></label>
|
||||
<div class="startBtn example-btn" @click='start'>开始</div>
|
||||
<div class="pause-resume-btn example-btn" @click='pauseResume'>暂停/恢复</div>
|
||||
<br/>
|
||||
<label class="label" for="decimalsInput">decimals: <input type="number" v-model.number='setDecimals' name='decimalsInput' /></label>
|
||||
<label class="label" for="separatorInput">separator: <input v-model='setSeparator' name='separatorInput' /></label>
|
||||
<label class="label" for="prefixInput">prefix: <input v-model='setPrefix' name='prefixInput' /></label>
|
||||
<label class="label" for="suffixInput">suffix: <input v-model='setSuffix' name='suffixInput' /></label>
|
||||
</div>
|
||||
<code><count-to :start-val='{{_startVal}}' :end-val='{{_endVal}}' :duration='{{_duration}}' :decimals='{{_decimals}}'
|
||||
:separator='{{_separator}}' :prefix='{{_prefix}}' :suffix='{{_suffix}}' :autoplay=false></code>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import countTo from 'vue-count-to';
|
||||
|
||||
export default {
|
||||
components: { countTo },
|
||||
data() {
|
||||
return {
|
||||
setStartVal: 0,
|
||||
setEndVal: 2017,
|
||||
setDuration: 4000,
|
||||
setDecimals: 0,
|
||||
setSeparator: ',',
|
||||
setSuffix: ' rmb',
|
||||
setPrefix: '¥ '
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_startVal() {
|
||||
if (this.setStartVal) {
|
||||
return this.setStartVal
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
_endVal() {
|
||||
if (this.setEndVal) {
|
||||
return this.setEndVal
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
_duration() {
|
||||
if (this.setDuration) {
|
||||
return this.setDuration
|
||||
} else {
|
||||
return 100
|
||||
}
|
||||
},
|
||||
_decimals() {
|
||||
if (this.setDecimals) {
|
||||
if (this.setDecimals < 0 || this.setDecimals > 20) {
|
||||
alert('digits argument must be between 0 and 20')
|
||||
return 0
|
||||
}
|
||||
return this.setDecimals
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
_separator() {
|
||||
return this.setSeparator
|
||||
},
|
||||
_suffix() {
|
||||
return this.setSuffix
|
||||
},
|
||||
_prefix() {
|
||||
return this.setPrefix
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
start() {
|
||||
this.$refs.example.start();
|
||||
},
|
||||
pauseResume() {
|
||||
this.$refs.example.pauseResume();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
line-height: 1.5;
|
||||
padding: 4px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
||||
position: relative;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
background-color: #fff;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
|
||||
.example-btn:hover {
|
||||
color: #4AB7BD;
|
||||
background-color: #fff;
|
||||
border-color: #4AB7BD;
|
||||
}
|
||||
.example {
|
||||
font-size: 50px;
|
||||
color: #F6416C;
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
font-size: 80px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #2f4f4f;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
margin: 15px 30px 15px 0;
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 4px 7px;
|
||||
width: 70px;
|
||||
height: 28px;
|
||||
cursor: text;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.startBtn {
|
||||
margin-left: 20px;
|
||||
font-size: 20px;
|
||||
color: #30B08F;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.startBtn:hover {
|
||||
background-color: #30B08F;
|
||||
color: #fff;
|
||||
border-color: #30B08F;
|
||||
}
|
||||
|
||||
.pause-resume-btn {
|
||||
font-size: 20px;
|
||||
color: #E65D6E;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.pause-resume-btn:hover {
|
||||
background-color: #E65D6E;
|
||||
color: #fff;
|
||||
border-color: #E65D6E;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
39
src/views/components/mixin.vue
Normal file
39
src/views/components/mixin.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="components-container">
|
||||
<div class='component-item'>
|
||||
<MDinput name="name" v-model="title" required :maxlength="100">
|
||||
标题
|
||||
</MDinput>
|
||||
<code class='code-part'>Material Design 的input</code>
|
||||
</div>
|
||||
|
||||
<div class='component-item'>
|
||||
<PanThumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
|
||||
上海花裤衩
|
||||
</PanThumb>
|
||||
<code class='code-part'>图片hover效果</code>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MDinput from 'components/MDinput';
|
||||
import PanThumb from 'components/PanThumb';
|
||||
|
||||
export default {
|
||||
components: { MDinput, PanThumb },
|
||||
data() {
|
||||
return {
|
||||
title: ''
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.component-item{
|
||||
margin-top: 100px;
|
||||
}
|
||||
.code-part{
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user