三状态按钮实现

功能描述

  三种状态的按钮实现方式
  例： 排序
    正序
    倒序
    不排序

目录结构

  |-- src
  |--  |-- components
  |--  |--  |   |-- Sorting.vue

使用

  <template>
    <Sorting
      :setting="sort"
      @change="handelSorting()"
    />
  </template>

实现

  <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>