基於Vue構造器建立Form元件的通用解決方案

const transform = (component) => {
  const _constructor = Vue.extend(component)
  return function (options = {}) {
    const {
      propsData
    } = options
    let instance = new _constructor({
      propsData
    }).$mount(document.createElement('div'))
    return instance
  }
}
複製程式碼

首先利用Vue.extend(options)建立一個<Form/>元件的子類

const _constructor = Vue.extend(component)
複製程式碼

然後return function，它的功能是:

• 將<form />元件轉化為method
• 在method呼叫時，將元件例項化並傳遞propsData

const {
  propsData
} = options
let instance = new _constructor({
  propsData
}).$mount(document.createElement('div'))
複製程式碼

為了能夠控制例項化後的元件，選擇instance返回。

當元件例項化時，它只是掛載到document.createElement('div')上，但是並沒有掛載到頁面上，所以需要將其appendChild到頁面中。為了更好的語義化，選擇在元件的生命週期中完成它在頁面中的掛載。例項化時，會觸發元件mounted生命週期，所以當其觸發時可以掛載在document.body中，具體如下

mounted () {
  document.body.appendChild(this.$el)
}
複製程式碼

有了掛載，就必須要有登出。對應的生命週期應該是destroyed，所以

method: {
  destroyElement () {
    this.$destroy()
  }   
},
destroyed () {
  this.$el.parentNode.removeChild(this.$el)
}
複製程式碼

元件登出的時間與它在頁面中顯示息息相關，當<form />在頁面中不可見時候，需要登出它

watch: {
  isVisible (newValue) {
    if (!newValue) {
      this.destroyElement()
      // 如果需要新增過渡動畫
      // this.$el.addEventListener('transitionend', this.destroyElement)
    }
  }
}
複製程式碼

一般Form元件有兩個功能：

• done：代表使用者確認；
• cancel：代表使用者取消；

當done或cancel觸發時，APP元件內可能會有相應的變化，所以在元件例項化之後，利用$on去監聽對應的done事件以及cancel事件。

done && inlineListen({
  method: 'done',
  options,
  instance
})
cancel && inlineListen({
  method: 'cancel',
  options,
  instance
})
複製程式碼

其中inlineListen函式可以方便後續新增其他的event，其程式碼為

const inlineListen = ({
  method,
  options,
  instance
}) => {
  let listener = `on${method}`
  instance[listener] = options[method]
  instance.$on(method, function (data) {
    this[listener](data)
  })
}
複製程式碼

也可以將上述方案封裝成Promise形式，如下

export const transform = (component) => {
  const _constructor = Vue.extend(component)
  return function (options = {}) {
    const {
      propsData
    } = options

    return new Promise((resolve, reject) => {
      let instance = new _constructor({
        propsData
      }).$mount(document.createElement('div'))

      instance.$on('done', data => resolve(data))
    })
  }
}
複製程式碼

使用

可以將上述屬於<Form/>公有的data以及method獨立出來，再通過mixins引入到每個表單內，例如

export default {
  data() {
    return {
      visible: true
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        this.destroyElement()
      }
    }
  },
  mounted() {
    document.body.appendChild(this.$el)
  },
  destroyed() {
    this.$el.parentNode.removeChild(this.$el)
  },
  methods: {
    destroyElement() {
      this.$destroy()
    },
    close() {
      this.visible = false
    }
  }
}
複製程式碼

再通過mixins混入。

<script>
import popupWin from '../mixins/popup-win'

export default {
  mixins: [popupWin],

  data () {
    return {
      input: '',
      gender: 1
    }
  },
  methods: {
    handleClick ({ type }) {
      const handler = {
        close: () => this.close(),
        confirm: () => {
          const { input } = this
          this.$emit('done', input)
        }
      }
    }
  }
}
</script>
複製程式碼

呼叫時，只需

export default {
  name: 'App',
  methods: {
    register: transform(register),

    handleClick () {
      this.register({
        propsData: {
          ...
        },
        // done: data => function
        done () {
            // 外部關閉
            this.close()
        }
      })
    }
  }
}
複製程式碼

PS：如果業務場景需要，在外部控制表單的關閉時，只需要改變done function的context，也就是this指標指向<Form/>。

總結

通過上述的transform函式，將原有的注入式元件轉化為了命令式，簡化了頁面狀態的維護，在通過mixins混入公有data以及method，簡化了表單元件開發。上述方法也可用於開發toast、alert、confirm等元件，只需要將

Vue.prototype.method = transform(Toast-Component) 
複製程式碼

原創宣告： 該文章為原創文章，轉載請註明出處。