Skip to content

Commit 4eb4182

Browse files
AmyFoxFNAmyFoxFN
authored
Merge pull request #2 from AmyFoxFN/scroll-enhance
Scroll demo enhance
2 parents db45d57 + 032e815 commit 4eb4182

File tree

6 files changed

+545
-72
lines changed

6 files changed

+545
-72
lines changed

‎example/components/input-option/input-option.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div class="input-option">
3+
<span class="name">{{ name }}</span>
4+
<input type="text" v-model="inputValue">
5+
</div>
6+
</template>
7+
8+
<script type="text/ecmascript-6">
9+
const COMPONENT_NAME = 'input-option'
10+
export default {
11+
name: COMPONENT_NAME,
12+
props: {
13+
name: {
14+
type: String
15+
},
16+
value: null,
17+
minValue: null
18+
},
19+
data() {
20+
return {
21+
inputValue: this.value
22+
}
23+
},
24+
watch: {
25+
inputValue: function (newValue) {
26+
this.$emit('update:value', this.minValue ? Math.max(newValue, this.minValue) : newValue)
27+
}
28+
}
29+
}
30+
</script>
31+
32+
<style scoped lang="stylus" rel="stylesheet/stylus">
33+
@import "../../../src/common/stylus/variable.styl"
34+
35+
.input-option
36+
display: flex
37+
height: 100%
38+
justify-content space-between
39+
align-items stretch
40+
padding-left: 15px
41+
.name
42+
flex: 0 0 auto
43+
width: 8rem
44+
display inline-flex
45+
align-items center
46+
input
47+
flex: 1 1 auto
48+
padding-left: 0.8rem
49+
background-color: $color-white
50+
border-left: 1px solid rgba(0, 0, 0, .1)
51+
box-shadow: 0 0 1px 1px #eee inset
52+
outline: none
53+
&:focus
54+
border: 1px solid $color-orange
55+
56+
</style>

‎example/components/select-option/select-option.vue‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div class="select-option">
3+
<span class="name">{{ name }}</span>
4+
<select v-model="selected">
5+
<option v-for="option in options" :value="option">
6+
{{ option }}
7+
</option>
8+
</select>
9+
</div>
10+
</template>
11+
12+
<script type="text/ecmascript-6">
13+
const COMPONENT_NAME = 'select-option'
14+
export default {
15+
name: COMPONENT_NAME,
16+
props: {
17+
name: {
18+
type: String
19+
},
20+
options: {
21+
type: Array
22+
},
23+
value: null
24+
},
25+
data() {
26+
return {
27+
selected: this.value
28+
}
29+
},
30+
watch: {
31+
selected: function (newValue) {
32+
this.$emit('update:value', newValue)
33+
}
34+
}
35+
}
36+
</script>
37+
38+
<style scoped lang="stylus" rel="stylesheet/stylus">
39+
@import "../../../src/common/stylus/variable.styl"
40+
41+
.select-option
42+
display: flex
43+
height: 100%
44+
justify-content space-between
45+
align-items stretch
46+
padding-left: 15px
47+
.name
48+
flex: 0 0 auto
49+
width: 8rem
50+
display inline-flex
51+
align-items center
52+
select
53+
flex: 1 1 auto
54+
padding-left: 0.8rem
55+
background-color: $color-white
56+
border: none
57+
border-left: 1px solid rgba(0, 0, 0, .1)
58+
box-shadow: 0 0 1px 1px #eee inset
59+
outline: none
60+
border-radius: 0
61+
&:focus
62+
border: 1px solid $color-orange
63+
64+
</style>

‎example/components/switch-option/switch-option.vue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div class="switch-option">
3+
<span class="name">{{ name }}</span>
4+
<div class="switch-ellipse" :class="{ active: checked }" @click="clickSwitch">
5+
<span class="switch-circle" :class="{ active: checked }"></span>
6+
</div>
7+
</div>
8+
</template>
9+
10+
<script type="text/ecmascript-6">
11+
const COMPONENT_NAME = 'switch-option'
12+
export default {
13+
name: COMPONENT_NAME,
14+
props: {
15+
name: {
16+
type: String
17+
},
18+
value: null
19+
},
20+
data() {
21+
return {
22+
checked: this.value
23+
}
24+
},
25+
watch: {
26+
checked: function (newValue) {
27+
this.$emit('update:value', newValue)
28+
}
29+
},
30+
methods: {
31+
clickSwitch: function () {
32+
this.checked = !this.checked
33+
}
34+
}
35+
}
36+
</script>
37+
38+
<style scoped lang="stylus" rel="stylesheet/stylus">
39+
@import "../../../src/common/stylus/variable.styl"
40+
41+
.switch-option
42+
display flex
43+
justify-content space-between
44+
align-items stretch
45+
height: 100%
46+
padding 0 15px
47+
.name
48+
display flex
49+
align-items: center
50+
flex: 0 1 auto
51+
.switch-ellipse
52+
align-self: center
53+
flex: 0 0 auto
54+
margin-top: 5px
55+
display: inline-block
56+
position: relative
57+
height: 31px
58+
width: 51px
59+
background-color: $color-white
60+
border-radius: 1000px
61+
border: 2px solid rgba(0, 0, 0, .1)
62+
transition: all 0.1s
63+
&.active
64+
background-color: $color-orange
65+
border-color: transparent
66+
transition: all 0.2s ease 0.2s
67+
.switch-circle
68+
position: absolute
69+
display: inline-block
70+
height: 27px
71+
width: 27px
72+
background: white
73+
border-radius: 50%
74+
border: 1px solid rgba(0, 0, 0, .1)
75+
box-shadow: -1px 1px 1px #999
76+
top: 0
77+
left: 0
78+
transition: all 0.3s
79+
&.active
80+
left: 21px
81+
transition: all 0.4s ease 0.1s
82+
83+
</style>

‎example/data/ease.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export const ease = {
2+
// easeOutQuint
3+
swipe: {
4+
style: 'cubic-bezier(0.23, 1, 0.32, 1)',
5+
fn: function (t) {
6+
return 1 + (--t * t * t * t * t)
7+
}
8+
},
9+
// easeOutQuard
10+
swipeBounce: {
11+
style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
12+
fn: function (t) {
13+
return t * (2 - t)
14+
}
15+
},
16+
// easeOutQuart
17+
bounce: {
18+
style: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
19+
fn: function (t) {
20+
return 1 - (--t * t * t * t)
21+
}
22+
}
23+
}

0 commit comments

Comments
 (0)