vue 综合了 angualr 和 react 的优点,因其易上手,轻量级,受到了广泛应用。成为了是时下火热的前端框架,吸引着越来越多的前端开发者!
本文将通过一个最简单的拖拽例子带领大家快速上手 vue 组件 vue-draggable。
首先,需要在工作环境中配置好 vue-cli,创建一个 vue 项目。
vue create test_1
创建项目时会有很多安装步骤,按下面的说明选择配置:
1.pick a preset 选择 manually select features
2.check the features needed for your project 选择 babel 和 css pre-processors 两项(使用空格键来选中或取消)
3.pick a css pre-processor 选择 sass/scss(with node-sass)
4.where do you prefer placing config 选择 in dedicated config files
5.save this as a preset for future projects? 选 yes ,并填写一个名字,以后的 vue 项目就可以继续使用这个配置
6. pick the package manager to use when installing dependencies 选择 use npm(有些同学安装可能不会遇到这步)
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 分钟快速食用完毕!
如对本文有疑问, 点击进行留言回复!!
网友评论