微信公众号——设计滚动年月选择器

最新推荐文章于 2023-12-21 16:17:16 发布

自律最差的编程狗

最新推荐文章于 2023-12-21 16:17:16 发布

阅读量653

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40765784/article/details/103694498

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

使用软件:WebStorm

效果图：点击选择日期前
在这里插入图片描述
点击选择日期后

点击确定后

1.Mint-ui的安装（Mint-ui官网）

npm install mint-ui -S

2.在WebStorm中的main.js中引入Mint组件库及样式

import { DatetimePicker } from 'mint-ui' //引入Mint组件库
import '../node_modules/mint-ui/lib/style.css' //引入Mint组件库样式
Vue.component(DatetimePicker.name, DatetimePicker); //加入到Vue脚手架中

3.在.vue中使用组件

提醒：
1：一定要去掉style标签中的scoped，否则组件的样式可能出不来
2：.vue文件中适当的位置加入这些代码可以执行起来

<template>
  <body>
  <div class="datePicker">
    <mt-datetime-picker
      type="date"
      ref="picker"
      year-format="{value} 年"
      month-format="{value} 月"
      @confirm="handleConfirm"
      :end-date="endDate"
      v-model="dateVal"
    >
    </mt-datetime-picker>
  </div>
  <article class="cardtitle">
    <span>物流信息</span>
    <dl>
      <dt @click="openPicker" style="width: 120px; margin-left: 0px;"><label>{{startText?startText:'选择日期'}}</label></dt>
    </dl>
  </article>
  </body>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        sentRecords: null,
        search: {
          year: 0,
          month: 0
        },
        startText:"",
        dateVal:'',
        endDate:new Date()
      }
    },

    methods: {
      openPicker() {
        let year=this.search.year
        let month=this.search.month
        if (year!=0&&month!=0) {
          this.dateVal=new Date(year+"-"+month+'-01');
        } else {
          this.dateVal = new Date()
        }
        this.$refs.picker.open()
        //隐藏日
        document.getElementsByClassName('picker-slot')[2].style.display='none';
      },
      handleConfirm() {
        let arr1 = this.getDate(this.dateVal).split('-')
        this.startText=arr1[0]+'年'+arr1[1]+'月'
        this.search.year=arr1[0];
        this.search.month=arr1[1];
      },
      getDate(data) {
        const y = data.getFullYear()
        let m = data.getMonth() + 1
        m = m < 10 ? '0' + m : m
        return y + '-' + m
      }
    }
  }
</script>

<style> /*scope一定要去掉*/
</style>

本人小白一枚，如果对你有帮助的话，请点个赞！！！

自律最差的编程狗

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信公众号——设计滚动年月选择器

使用软件:WebStorm效果图：点击选择日期前点击选择日期后点击确定后1.Mint-ui的安装（Mint-ui官网）npm install mint-ui -S2.在WebStorm中的main.js中引入Mint组件库及样式import { DatetimePicker } from 'mint-ui' //引入Mint组件库import '../node_module...
复制链接

扫一扫