Lingbo but hengtang road, but watch, fang dust to, Jin Se years who and degree?

What happens if you forgo webpack and scaffolding for Vue based project development? How to componentize? How to manage state?

background

I had planned to visit my friends last weekend, but another friend needed me to help him write a form. Support for column sorting by dragging and dropping table headers. This also needs to be run in a JavaWeb project.

Implementation approach

Think about it, this is not difficult, directly in HTML to introduce the VUE CDN file can, at the same time need to introduce some library CND file.

// The iView component library style
   <link rel="stylesheet" href="https://unpkg.com/view-design/dist/styles/iview.css">
    <script type="text/javascript" src="./lib/vue.js"></script>
    <script src="https://unpkg.com/view-design/dist/iview.min.js"></script>
    <script type="text/javascript" src="./components/vue-comp.js"></script>
Copy the code

Vue-comp.js is a custom component.

For the drag part, just use the drag API.

componentization

Based on scaffolding we can create files directly using the.vue suffix to implement the required components directly. But without scaffolding, we need to use the Vue.com PonentAPI to define the components we need.

Vue.component('drag-item', {
  template: ` 
      
 
       

        {{ itemInfo.title }}
       
 
      
 `.data() {
    return {
      dragInfo: {
        start: ' '.end: ' '}}},props: ['itemInfo'.'dataIndex'].methods: {
    dragStart(e) {
      this.dragInfo.start = e.target.dataset.index
      e.target.className = 'draggable-item'
      this.$emit('setstartindex', e.target.dataset.index)
    },
    dragEnd(e) {
      if (e.target.className == 'draggable-item') {
        this.$emit('sortname')
        e.target.className = 'draggable-item can-input'}},dragEnter(e) {
      e.preventDefault()
      const { index } = e.target.dataset
      if (index) {
        console.log('end-index', e.target.dataset.index)
        this.$emit('setendindex', e.target.dataset.index)
      }
    },
  },
});
Copy the code

One caveat to custom components is that porps are defined with the hump tag itemInfo, but when components are used, they need to be hyphenated. Such as:

          <drag-item :item-info="item" :data-index="index" @sortname="dragColumn"
            @setstartindex="setstartindex"
            @setendindex="setendindex"
          /> 
Copy the code

The components we define will end up in this. Code. options.components object.

Swap header positions

Swapping header positions essentially swaps two elements of the column array.

However, in the process of switching positions, the array is limited by the responsivity principle

Vue cannot detect the following array changes: when you set an item directly using an index, e.g. Vm. items[indexOfItem] = newValue When you change the length of the array, e.g. Vm. items. Length = newLength

We need to use vue.set method to implement the function of position switching.

        // Drag to swap
        dragColumn() {
          const {start,end} = this.dragState
          const arr = page.columnsInitial
          var item = arr[start];
          Vue.set(page.columnsInitial, start, arr[end])
          Vue.set(page.columnsInitial, end, item)
        },
Copy the code

The details of implementing drag and drop

If you are familiar with the drag and drop APi, the ability to drag and drop table headers to sort columns is easy to implement. However, the following considerations need to be kept in mind during the implementation process.

  • dragstart,dragendThe event triggers the element dragged by the element
  • dragenter,dragover,dropThe element triggered by the event is the element represented by the position to be placed
  • dropEvent triggering requirementsdragoverSet up thepreventDefault()
  • e.dataTransfer.setDataCan effectively reduce the complexity of the interaction
  • e.dataTransfer.effectAllowedOptionally, you can style the drag and drop processcopy|move|link|none

conclusion

Usually used scaffolding development habits, occasionally try the original way is not impossible. And this process helped change the details of Vue.com Ponent and the drag and drop API.

I also felt that this development approach could be applied to older projects, such as the older JavaWeb project.

Warehouse address: https://gitee.com/mynoe/table-for-friend.git

One last word

  1. Move your rich little hands and “like it.”
  2. Move your rich little hands, “click here”
  3. All see here, might as well “add a follow”
  4. Might as well “forward”, good things to remember to share

Click to add a follow