10 分钟上手 Vue 组件 Vue

Vue 综合了 Angualr 和 React 的优点,因其易上手,轻量级,受到了广泛应用。成为了是时下火热的前端框架,吸引着越来越多的前端开发者!

本文将通过一个最简单的拖拽例子带领大家快速上手 Vue 组件 Vue-Draggable。

首先,需要在工作环境中配置好 Vue-cli,创建一个 vue 项目。

vue create test_1

创建项目时会有很多安装步骤,按下面的说明选择配置:

1.pick a preset 选择 Manually select features

image

2.Check the features needed for your project 选择 Babel 和 CSS Pre-processors 两项(使用空格键来选中或取消)

image

3.Pick a CSS pre-processor 选择 Sass/SCSS(with node-sass)

image

4.Where do you prefer placing config 选择 In dedicated config files

image

5.Save this as a preset for future projects? 选 yes ,并填写一个名字,以后的 Vue 项目就可以继续使用这个配置

image

6. Pick the package manager to use when installing dependencies 选择 Use NPM(有些同学安装可能不会遇到这步)

image

OK,准备工作做好,下面我们可以进入 Vue-Draggable 的内容。

首先, cd test_1 进入项目目录,配置一下 Vue-Draggable。

npm i vuedraggable -S

接着,在 src/components 目录下新建 Draggable.vue

<script> 中引入并且注册 vuedraggable 组件,再写一点数据后面验证用:

<script>
import Draggable from "vuedraggable"

const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs"
]

export default {
  components: {
    Draggable
  },
  data () {
    return {
      list: message.map((name, index) => {
        return { name, order: index + 1 };
      })
    }
  }
}
</script>

然后我们就可以在 <template> 中愉快的使用 draggable。

<template>
      <draggable
        class="list-group"
        tag="ul"
        v-model="list"
        v-bind="{
          animation: 200,
          group: 'description',
          disabled: false,
          ghostClass: 'ghost'
        }"
      >
          <li
            class="list-group-item"
            v-for="element in list"
            :key="element.order"
          >
            {{ element.name }}
          </li>
      </draggable>
</template>

注意,draggable 标签中,tag = 'ul' 用来指定 draggable 组件渲染出来的 html 标签。v-model 绑定列表可拖动的元素,也就是 data() 中的 list,通常与 draggable 中的内部元素 v-for 的引用一致。

v-bind 绑定 draggable 组件的配置项,可以看看具体讲解:

再配置一下对应 class 样式:

<style lang="scss">
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group {
  min-height: 20px;
  list-style: none;
}
.list-group-item {
  cursor: move;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
}

</style>

最后,修改一下 App.vue 注册组件:

<template>
  <div id="app">
    <draggable></draggable>
  </div>
</template>

<script>
import Draggable from './components/Draggable'

export default {
  name: 'app',
  components: {
    Draggable
  }
}
</script>

启动项目,在浏览器中查看一下效果!

npm run server

很简单对吧,10 分钟快速食用完毕!

10 分钟上手 Vue 组件 Vue

全文结束