Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to achieve the vue2.0+vuex-based date selection component function", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to achieve the vue2.0+vuex-based date selection component function"!

Calendar vue date selection component

A vue component that selects a date

Based on vue2.0 + vuex

I originally wanted to find such a component, but after looking at vuex, I found that the writing of vuex was not based on 2.0, so I did it myself.

Demo presentation & & use in the project

Directory structure

Demo is built with vue-cli 's webpack-simple

Calendar |-- dist build generated directory |-- doc display image |-- src |-- assets resource |-- components |-- calendar date component |-- dateScroll scrolling sub-component |-- css | store vuex directory |-- modules |-- calendar |-- mutation component Some status of |-- store | App.vue entry | main.js

Component usage

Components can be passed a range of years. Both startTime and endTime are numbers. The default is 1900-2050.

Trigger component this.$store.dispatch ('calendarStatus',true)

Click to set the date

{{date}}

Require ('. / css/style.scss'); import calendar from'. / components/calendar' Export default {name: 'app', data () {return {/ / the start of the selected date is returned. Default is 1900-2050 start:1950, end:2030}}, components: {comCalendar:calendar}, methods: {setDate:function () {/ / trigger date component this.$store.dispatch (' calendarStatus',true) }, computed: {/ / Mask status mark:function () {return this.$store.getters.markStatus}, / / component status calendar:function () {return this.$store.getters.getCalendarStatus? {display:'block'}: {display:'none'};}, / / returned date date:function () {return this.$store.getters.getCalendarDate }}}

Running

# install dependenciesnpm install# serve with hot reload at localhost:8081npm run dev# build for production with minificationnpm run build Thank you for your reading, the above is the content of "how to achieve the vue2.0+vuex-based date selection component function". After the study of this article, I believe you have a deeper understanding of how to achieve the vue2.0+vuex-based date selection component function, and the specific usage still needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.