pc-component-v5/examples/vue-monthly-picker/src/VueMonthlyPickerExample.vue

<template>
  <div>
    <h1>月份选择器</h1>
    <div class="demo-component">
      <vue-monthly-picker
        v-model="selectedMonth"
        :input-class="{'input': isDisplayInput}"
        :disabled="isDisable"
        :month-labels="locale"
        :clear-option="clearOption"
        :min="min"
        :max="max"
        :alignment="alignment"
        :selected-background-color="selectedBackgroundColor"
        @selected="handleSelect"
      />
    </div>

    <div>选择的月份: {{ selectedMonth }}</div>

    <div>
      <div class="form-group">
        <label>只读</label>
        <div class="input-group">
          <Switches v-model="isDisable" />
          {{ isDisable ? 'Disabled': 'Enable' }}
        </div>
      </div>
      <div class="form-group">
        <label>限制范围</label>
        <div class="input-group">
          <Switches v-model="isLimitRange" />
          {{ rangeDisplay }}
        </div>
      </div>
      <div class="form-group">
        <label>显示</label>
        <div class="input-group">
          <Switches
            v-model="isDisplayInput"
            true-value="Input"
            false-value="Label"
          />
          {{ isDisplayInput? 'Input': 'Label' }}
        </div>
      </div>
      <div class="form-group">
        <label>清空</label>
        <div class="input-group">
          <Switches v-model="clearOption" />
          {{ clearOption ? 'Enable': 'Disabled' }}
        </div>
      </div>
      <div class="form-group">
        <label>国际化</label>
        <select
          v-model="locale"
          placeholder="Select a language"
          class="form-control"
        >
          <option
            v-for="option in options"
            :key="option.id"
            :value="option.monthLabels"
          >
            {{ option.title }}
          </option>
        </select>
      </div>
      <div class="form-group">
        <label>对齐</label>
        <select
          v-model="alignment"
          placeholder="Select an alignment"
          class="form-control"
        >
          <option
            v-for="alignment1 in alignments"
            :key="alignment1"
            :value="alignment1"
          >
            {{ alignment1 }}
          </option>
        </select>
      </div>
      <div class="form-group">
        <label>背景色</label>
        <select
          v-model="selectedBackgroundColor"
          placeholder="Select an color"
          class="form-control"
        >
          <option
            v-for="color in colorExamples"
            :key="color"
            :value="color"
          >
            {{ color }}
          </option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import VueMonthlyPicker from '@/vue-monthly-picker/index.js';
import Switches from '@/switches/index.js';

export default {
  name: 'App',
  components: {
    VueMonthlyPicker, Switches,
  },
  data() {
    return {
      selectedMonth: moment(),
      isDisable: false,
      isDisplayInput: true,
      locale: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      alignment: 'left',
      selectedBackgroundColor: 'blue',
      options: [
        {
          id: 1,
          title: 'English',
          monthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        },
        {
          id: 2,
          title: '中文',
          monthLabels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        },
        {
          id: 3,
          title: 'Korean',
          monthLabels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
        },
      ],
      alignments: ['left', 'center', 'right'],
      colorExamples: ['blue', 'red', 'black'],
      min: null,
      max: null,
      isLimitRange: false,
      clearOption: true,
    };
  },
  computed: {
    rangeDisplay() {
      if (!this.min || !this.max) {
        return 'Disabled';
      }
      return this.min.format('YYYY/MM') + '-' + this.max.format('YYYY/MM');
    },
  },
  watch: {
    isLimitRange(newValue) {
      if (newValue) {
        this.setSelectRange(moment().subtract(6, 'months'), moment().add(6, 'months'));
      } else {
        this.setSelectRange(null, null);
      }
    },
  },
  methods: {
    handleSelect(value) {
      console.log('Select', value);
    },
    setSelectRange(min, max) {
      this.min = min;
      this.max = max;
    },
  },
};
</script>

<style scoped>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}

.demo-component {
    width: 250px;
    margin: auto;
}
.control-group {
    margin-top: 100px;
}
.control {
    text-align: center;
}
.option-list {
    margin-top: 20px;
}
</style>