使用原生方式开发Vue的一次体验-一一网

凌波不过横塘路，但目送，芳尘去，锦瑟年华谁与度？

如果放弃使用webpack及脚手架进行基于Vue的项目开发，效果会怎样?如何进行组件化?如何进行状态管理?

背景

上周末原本打算去找朋友玩,但是另外一个朋友需要我帮他写一个表格。能够支持拖拽表头进行列排序。同时这个需要放到JavaWeb的项目里去运行。

实现思路

想了一下，这个也不难，直接在html里引入vue的cdn的文件就可以了，同时需要引入些件库的cnd文件。

// iview 组件库的样式
   <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>
复制代码

vue-comp.js是自定定义的组件。

拖拽部分还是直接使用拖拽api即可。

组件化

基于脚手架我们可以直接使用.vue的后缀名创建文件，直接实现需要的组件。但是放弃脚手架后，我们需要使用vue.componentapi来定义我们需要的组件。

Vue.component('drag-item', {
  template: `
  <div
  class="draggable-item can-put"
  :draggable="true"
  @dragstart="dragStart"
  @dragover="dragEnter"
  @dragend="dragEnd"
  :data-index="dataIndex"
>
  <div>{{ itemInfo.title }}</div>
</div>
  `,
  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)
      }
    },
  },
});
复制代码

自定义组件有一个需要注意的地方:porps定义时用的是驼峰标记itemInfo,但是在使用组件时，需要写成连字符的形式。例如:

          <drag-item :item-info="item" :data-index="index" @sortname="dragColumn"
            @setstartindex="setstartindex"
            @setendindex="setendindex"
          /> 
复制代码

我们定义的组件最后都会放到this.$options.components这个对象中。

交换表头位置

交换表头位置，本质上是将column这个数组的两个元素交换位置。

但是在交换位置的过程中，由于响应式原理对数组的限制

Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

我们需要使用vue.set方法实现位置交换的功能。

        // 拖动易位
        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)
        },
复制代码