更新组件初始化的代码

Signed-off-by: linhf <[email protected]>
zhongpingyong · May 5, 2017 · be809ec · be809ec
1 parent 9b9b9e7
commit be809ec
Show file tree

Hide file tree

Showing 9 changed files with 274 additions and 291 deletions.
diff --git a/calendar/.idea/workspace.xml b/calendar/.idea/workspace.xml
diff --git a/calendar/README.md b/calendar/README.md
@@ -112,4 +112,6 @@ Vue.use(Calendar,{
 
 ```
 
+### 版本
+1.0.3 更改初始化的代码
 
diff --git a/calendar/package.json b/calendar/package.json
@@ -1,15 +1,23 @@
 {
   "name": "vue2-datepick",
+  "keywords": [
+    "vue2-datepick",
+    "vue",
+    "vue2",
+    "vue-calendar",
+    "vue日期选择"
+  ],
   "description": "A Vue.js project,vue-calendar,vuejs,vue",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "author": "linhf <[email protected]>",
   "private": false,
-  "main":"./dist/index.js",
+  "main": "./dist/index.js",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --port 8081",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
+    "object-assign": "^4.1.1",
     "vue": "^2.2.1"
   },
   "devDependencies": {

diff --git a/calendar/src/App.vue b/calendar/src/App.vue
@@ -22,7 +22,7 @@ export default {
 
    setDate(){
        let vm = this;
-      this.$calendar({
+      this.$calendar.show({
           onOk(data){
               console.log(data)
               vm.data= data.year+'-'+data.month+'-'+data.day;
@@ -35,13 +35,14 @@ export default {
     },
       setDate2(){
           let vm = this;
-          this.$calendar({
+          this.$calendar.show({
               onOk(data){
                   vm.data= data.year+'-'+data.month+'-'+data.day;
-                  console.log('确定')
+                  console.log(data)
+                  console.log('确定123')
               },
               onCancel(){
-                  console.log('取消')
+                  console.log('取消123')
               },
             year:2015,
             month:2,

diff --git a/calendar/src/components/calendar.vue b/calendar/src/components/calendar.vue
@@ -8,14 +8,14 @@
             <div class="dp-content">
                 <div class="dp-content">
                     <div class="dp-item" >
-                        <com-date-scroll @setDate="setDate" :cur="dateData.year"  :startTime="dateData.startYear" :dType = "'year'" :endTime ="dateData.endYear"></com-date-scroll>
+                        <com-date-scroll @setDate="setDate" :cur="curYear||year"  :startTime="startYear" :dType = "'year'" :endTime ="endYear"></com-date-scroll>
                   </div>
                     <div class="dp-item" >
-                        <com-date-scroll @setDate="setDate"  :cur="dateData.month" :dType = "'month'"  ></com-date-scroll>
+                        <com-date-scroll @setDate="setDate"  :cur="curMonth||month" :dType = "'month'"  ></com-date-scroll>
 
                     </div>
                     <div class="dp-item" >
-                        <com-date-scroll @setDate="setDate"  :cur="dateData.day"  :dType = "'day'"  ></com-date-scroll>
+                        <com-date-scroll @setDate="setDate"  :cur="curDay||day"  :dType = "'day'"  ></com-date-scroll>
                     </div>
 
                 </div>
@@ -34,47 +34,63 @@
     export default {
         data:function () {
             return{
-                status:false,
-                year:'',
-                month:'',
-                day:''
+                sYear:'',
+                sMonth:'',
+                sDay:'',
+                curYear:'',
+                curMonth:'',
+                curDay:'',
             }
         },
         props:{
-            dateData:{
-                type:Object,
-                default: function () {
-                    return { }
-                }
-            }
+            startYear:{
+                type:Number
+            },
+            endYear:{
+                type:Number
+            },
+            year:{
+                type:Number
+            },
+            month:{
+                type:Number
+            },
+            day:{
+                type:Number
+            },
+            onOk:{
+                type:Function
+            },
+            onCancel:{
+                type:Function
+            },
         },
         components:{
             comDateScroll:dateScroll
         },
-        computed: {
-            status:function(){
-//                return this.$store.getters.getCalendarOk;
-            }
-        },
+
         methods:{
             choiceDate:function(){
                 let vm = this;
-                this.$emit('hide')
-                this.dateData.onOk({
-                    year:vm.year||vm.dateData.year,
-                    month:vm.month||vm.dateData.month,
-                    day:vm.day||vm.dateData.day,
+                this.$emit('hide');
+                this.curYear = this.sYear
+                this.curMonth = this.sMonth
+                this.curDay = this.sDay
+                this.onOk({
+                    year:vm.curYear||vm.year,
+                    month:vm.curMonth||vm.month,
+                    day:vm.curDay||vm.day,
                 })
             },
             hiddenCalendar:function () {
                 this.$emit('hide')
-                this.dateData.onCancel()
+                this.onCancel();
             },
             setDate(d,v){
                 switch (d){
-                    case 'year':this.year = v;break;
-                    case 'month':this.month = v;break;
-                    case 'day':this.day = v;break;
+                    case 'year':this.sYear = v;break;
+                    case 'month':this.sMonth = v;break;
+                    case 'day':this.sDay = v;break;
                 }
 
             }

diff --git a/calendar/src/components/calendarMain.vue b/calendar/src/components/calendarMain.vue
@@ -1,35 +1,56 @@
 <template>
-    <div v-show="status">
-        <com-calendar :dateData="dateData" v-on:hide="hide"></com-calendar>
+    <transition name="fade">
+    <div v-show="show">
+        <com-calendar
+                :startYear="startYear"
+                :endYear="endYear"
+                :month="month"
+                :year="year"
+                :day="day"
+                :onOk="onOk"
+                :onCancel="onCancel"
+                v-on:hide="hide"
+        ></com-calendar>
         <div  class='mark'></div>
         <p></p>
     </div>
+    </transition>
 
 </template>
 
-
+<style>
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .3s
+    }
+    .fade-enter, .fade-leave-active {
+        opacity: 0
+    }
+</style>
 <script>
    import calendarComponent from '../components/calendar.vue'
     export default {
         data:function () {
-            return{
-                status:true
+            return {
+                 show:false,
+                 startYear:1900,
+                 endYear:2050,
+                 year:(new Date).getFullYear(),
+                 month:((new Date).getMonth()+1),
+                 day:(new Date).getDay(),
+                 onOk:function () {},
+                 onCancel:function (){},
             }
         },
-        props:{
-            dateData:{
-                type:Object,
-                default: function () {
-                    return { }
-                }
-            }
+
+        mounted(){
+            console.log(this.year+'---')
         },
         components:{
             comCalendar:calendarComponent
         },
         methods:{
             hide(){
-                this.status =false
+                this.show =false
             }
         }
 

diff --git a/calendar/src/components/dateScroll.vue b/calendar/src/components/dateScroll.vue
@@ -46,15 +46,13 @@
                 type:Number
             },
             cur:{
-              type:Number
+
             },
             endTime:{
                 type:Number
             }
         },
-        mounted(){
-          this.moveTo(this.cur)
-        },
+
         methods: {
             end:function (e) {
 
@@ -88,7 +86,6 @@
 
                 vm.Y = vm.d *34;
 
-
                 vm.styleObject.transform  = "translate(0,"+vm.Y+"px)";
                 vm.styleObject.transition  = "all "+mT+"s linear";
 
@@ -132,26 +129,26 @@
 
             },
             moveTo(cur){
-                console.log(cur)
+
                 let vm = this;
-                if(this.dType=='year'){
+                if(this.dType==='year'){
 
-                   if(this.all.join().indexOf(cur+'年')==-1){
+                   if(this.all.join().indexOf(cur+'年')===-1){
                        return false
                    }
 
                     cur = cur- this.startTime +1;
 
                 }
-                if(this.dType=='month'){
-                    if(this.all.join().indexOf(cur+'月')==-1){
+                if(this.dType==='month'){
+                    if(this.all.join().indexOf(cur+'月')===-1){
                         return false
                     }
 
                 }
-                if(this.dType=='day'){
+                if(this.dType==='day'){
 
-                    if(this.all.join().indexOf(cur+'日')==-1){
+                    if(this.all.join().indexOf(cur+'日')===-1){
                         return false
                     }
 
@@ -263,6 +260,9 @@
                     }
 
                 }
+            },
+            cur:function () {
+                this.moveTo(this.cur)
             }
 
         }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -112,4 +112,6 @@ Vue.use(Calendar,{

		```

		### 版本
		1.0.3 更改初始化的代码