datetime: Re-render when readonly is changed (Close #1593)

airyland · Jun 21, 2017 · f56b26b · f56b26b
1 parent 3d95b28
commit f56b26b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/components/datetime/index.vue b/src/components/datetime/index.vue
@@ -120,9 +120,9 @@ export default {
   },
   mounted () {
     const uuid = this.uuid
+    this.$el.setAttribute('id', `vux-datetime-${uuid}`)
     if (!this.readonly) {
       this.$nextTick(() => {
-        this.$el.setAttribute('id', `vux-datetime-${uuid}`)
         this.render()
       })
     }
@@ -212,6 +212,13 @@ export default {
     }
   },
   watch: {
+    readonly (val) {
+      if (val) {
+        this.picker && this.picker.destroy()
+      } else {
+        this.render()
+      }
+    },
     show (val) {
       if (val) {
         this.picker && this.picker.show(this.currentValue)

diff --git a/src/components/datetime/metas.yml b/src/components/datetime/metas.yml
@@ -141,8 +141,10 @@ events:
 changes:
   next:
     en:
+      - '[fix] Re-render when readonly is changed #1593'
       - '[feature] Support prop:default-selected-value #1576'
     zh-CN:
+      - '[fix] readonly 值变化时重新渲染 #1593'
       - '[feature] 支持通过 prop:default-selected-value 设置默认选中日期 #1576'
   v2.4.0:
     en:

diff --git a/src/demos/Datetime.vue b/src/demos/Datetime.vue
@@ -18,8 +18,11 @@
     </group>
 
     <group title="readonly">
-      <datetime v-model="valueReadonly" readonly @on-change="change" :title="$t('Birthday')"></datetime>
+      <datetime v-model="valueReadonly" :readonly="readonly" @on-change="change" :title="$t('Birthday')"></datetime>
     </group>
+    <div style="padding:15px">
+      <x-button type="primary" plain @click.native="readonly = !readonly">toggle readonly</x-button>
+    </div>
 
      <group :title="$t('format display value')">
       <datetime v-model="formatValue" :display-format="formatValueFunction" @on-change="change" :title="$t('Birthday')"></datetime>
@@ -158,6 +161,7 @@ export default {
   },
   data () {
     return {
+      readonly: true,
       minuteListValue: '2017-06-12 09:00',
       hourListValue: '2017-06-12 09:00',
       format: 'YYYY-MM-DD HH:mm',