# 三状态按钮实现
# 功能描述
三种状态的按钮实现方式
例: 排序
正序
倒序
不排序
1
2
3
4
5
2
3
4
5
# 目录结构
|-- src
|-- |-- components
|-- |-- | |-- Sorting.vue
1
2
3
2
3
# 使用
<template>
<Sorting
:setting="sort"
@change="handelSorting()"
/>
</template>
1
2
3
4
5
6
2
3
4
5
6
# 实现
<template>
<IconFont
class="header-icon"
:icon-class="'icon_' + sort[0]"
@click="handleSortNext"
/>
</template>
<script>
export default {
name: 'Sorting',
// 默认值/初始值
props: {
setting: {
type: String,
default: 'sort'
}
},
data () {
return {
sort: ['sort', 'sort_up', 'sort_down']
}
},
watch: {
setting: {
handler () {
while (
this.sort.indexOf(this.setting) !== -1 &&
this.setting &&
this.sort[0] !== this.setting
) {
this.handleErgodic()
}
},
immediate: true
}
},
methods: {
handleSortNext () {
this.handleErgodic()
this.$emit('change', this.sort[0])
},
handleErgodic () {
const first = this.sort.shift()
this.sort.push(first)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49