vue H5项目:利用vant ui二次封装的选择月份的日历组件

因为vant里面只有选择天数的日历没有选择月份的,所以我自己又封装了一个组件。
vue H5项目:利用vant ui二次封装的选择月份的日历组件_第1张图片

上代码:
这是封装的子组件

<template>
  <div>
    <div @click="showPopup">
      {
     {
      yesr }}-<span v-show="actived < 10 ? true : false">0</span
      >{
     {
      actived }}
    </div>
    <van-popup
      v-model="show"
      position="top"
      :style="{ height: '50%' }"
      @click-overlay="close"
    >
      <main>
        <!-- 选择年 -->
        <div class="yesr">
          <van-icon name="arrow-left" @click="last" />
          <span
            >{
     {
      yesr }}<span v-show="actived < 10 ? true : false">0</span
            >{
     {
      actived }}</span
          >
          <van-icon name="arrow" @click="next" />
        </div>

        <section>
          <div>
            <span
              v-for="(item, index) in 12"
              :key="index"
              :class="actived === item ? 'spanBGd' : false"
              @click="spanmouth(item)"
            >
              {
     {
      item }}</span>
          </div>
        </section>

        <footer>
           
        </footer>
      </main>
      <div class="button" @click="button">确定</div>
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import {
      Icon } from "vant";
import {
      Popup } from "vant";

Vue.use(Icon);
Vue.use(Popup);
export default {
     
  data() {
     
    return {
     
      yesr: 1970, //年
      actived: 1, //月
      show: false
    };
  },
  mounted() {
     
    //   设置默认年份
    var date = new Date();
    this.yesr = date.getFullYear();
    this.actived = date.getMonth() + 1;
  },
  methods: {
     
    //   上一年
    last() {
     
      this.yesr = this.yesr - 1;
    },
    // 下一年
    next() {
     
      this.yesr = this.yesr + 1;
    },
    //选择月份
    spanmouth(item) {
     
      this.actived = item;
    },
    //弹出层
    showPopup() {
     
      this.show = true;
    },
    //关闭弹出层
    close() {
     
      //   设置默认年份
      var date = new Date();
      this.yesr = date.getFullYear();
      this.actived = date.getMonth() + 1;
    },
    //确定
    button() {
     
      this.show = false;
      var Datenum=`${
       this.yesr}${
       this.actived}`
      this.$emit('datebutton',Datenum)
      console.log(Datenum);
    }
  }
};
</script>

<style scoped>
main > .yesr {
     
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  width: 100%;
  background: #ffc02e;
}
section {
     
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgb(207, 205, 205);
}
section > div {
     
  width: 74%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
section > div > span {
     
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;

}
.spanBGd {
     
  background: #ffc02e;
  color: #fff;
  border-radius: 10px;
}
.button {
     
  width: 80%;
  height: 50px;
  margin: 20px auto;
  line-height: 50px;
  background: linear-gradient(270deg, #fec208 0%, #ffd337 100%);
  outline: none;
  border-radius: 2px;
  text-align: center;
}
</style>

父组件调用:
导入

import datecomponent from "@/views/achievement/components/date.vue";

注册

components: {
     
    datecomponent
},

标签及事件:

<datecomponent @datebutton="datebutton"  />
methods:{
     
 datebutton(Datenum) {
     
      console.log(Datenum)
    },
}

组件通过this.$emit('datebutton',Datenum)把参数传过去。
最终得到的时间格式:如202011

可以看下效果图:(结果打印在控制台了)

你可能感兴趣的:(Vue.js,封装可复用的组件,组件,日历,选择月份,封装的组件)