select support auto watch texts

xhgrid · Apr 18, 2018 · 7a2d2a7 · 7a2d2a7
1 parent 8880d31
commit 7a2d2a7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
@@ -79,6 +79,18 @@
       },
       selectedText() {
         return this.valueIndex !== -1 ? this.adaptOptions[0][this.valueIndex].text : ''
+      },
+      txts() {
+        return {
+          title: this.title,
+          confirmTxt: this.confirmTxt,
+          cancelTxt: this.cancelTxt
+        }
+      }
+    },
+    watch: {
+      txts() {
+        this.updatePicker()
       }
     },
     created() {
@@ -94,6 +106,9 @@
       this.autoPop && this.showPicker()
     },
     methods: {
+      updatePicker() {
+        this.picker.$updateProps(this.txts)
+      },
       showPicker() {
         if (this.disabled) {
           return

diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js
@@ -1,6 +1,7 @@
 import Vue from 'vue2'
 import Select from '@/modules/select'
 import instantiateComponent from '@/common/helpers/instantiate-component'
+import createVue from '../utils/create-vue'
 
 describe('Select.vue', () => {
   let vm
@@ -27,6 +28,34 @@ describe('Select.vue', () => {
       .to.equal('2016')
   })
 
+  it('should render correct contents - update txt', (done) => {
+    vm = createVue({
+      template: `
+        <cube-select v-model="value" :options="options" :title="title" :confirmTxt="confirmTxt" :cancelTxt="cancelTxt" />
+      `,
+      data: {
+        value: 2016,
+        options: [2013, 2014, 2015, 2016, 2017, 2018],
+        title: 'title',
+        confirmTxt: 'confirm',
+        cancelTxt: 'cancel'
+      }
+    })
+    // change txt
+    vm.$parent.title = 'title2'
+    vm.$parent.confirmTxt = 'confirm2'
+    vm.$parent.cancelTxt = 'cancel2'
+    vm.$nextTick(() => {
+      expect(vm.picker.$el.querySelector('.cube-picker-choose [data-action="cancel"]').textContent.trim())
+        .to.equal('cancel2')
+      expect(vm.picker.$el.querySelector('.cube-picker-choose [data-action="confirm"]').textContent.trim())
+        .to.equal('confirm2')
+      expect(vm.picker.$el.querySelector('.cube-picker-choose h1').textContent.trim())
+        .to.equal('title2')
+      done()
+    })
+  })
+
   it('should trigger events', function (done) {
     this.timeout(10000)