社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
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 分钟快速食用完毕!
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!