draggable布局 vue_10 分钟上手 Vue 组件 Vue-Draggable
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。
在
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 };
})
}
}
}
然后我们就可以在 中愉快的使用 draggable。
class="list-group"
tag="ul"
v-model="list"
v-bind="{
animation: 200,
group: 'description',
disabled: false,
ghostClass: 'ghost'
}"
>
class="list-group-item"
v-for="element in list"
:key="element.order"
>
{{ element.name }}
注意,draggable 标签中,tag = 'ul' 用来指定 draggable 组件渲染出来的 html 标签。v-model 绑定列表可拖动的元素,也就是 data() 中的 list,通常与 draggable 中的内部元素 v-for 的引用一致。
v-bind 绑定 draggable 组件的配置项,可以看看具体讲解:
group:string or object
string:命名,用处是为了设置可以拖放容器时使用
object: {name, pull, put}
name: 同 string 的方法
pull:pull 用来定义从这个列表容器移动出去的设置,true/false/'clone'/function
true:列表容器内的列表元素可以被移出;
false:列表容器内的列表元素不可以被移出;
clone:列表元素移出,移动的为该元素的副本;
function:用来进行 pull 的函数判断,可以进行复杂逻辑,在函数中 return false/true 来判断是否移出;
put:put 用来定义往这个列表容器放置列表元素的的设置,true/false/['foo','bar']/function
true:列表容器可以从其他列表容器内放入列表元素;
false:与 true 相反;
['foo','bar']:这个可以是一个字符串或者是字符串的数组,代表的是 group 配置项里定义的 name 值;
function:用来进行 put 的函数判断,可以进行复杂逻辑,在函数中 return false/true 来判断是否放入
animation: number 单位:ms,定义动画的时间;
disabled: boolean 定义此 sortable 对象是否可用,为 true 时 sortable 对象不能拖放排序等功能,为 false 时为可以进行排序,相当于一个开关;
ghostClass:selector 格式为简单 css 选择器的字符串,当拖动列表元素时会生成一个副本作为影子元素来模拟被拖动元素排序的情况,此配置项就是来给这个影子元素添加一个 class,我们可以通过这种方式来给影子元素进行编辑样式;
sort: boolean 定义是否列表元素是否可以在列表容器内进行拖拽排序;
delay: number 定义鼠标选中列表元素可以开始拖动的延迟时间;
handle: selector 格式为简单 css 选择器的字符串,使列表元素中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表元素进行拖动;
filter: selector 格式为简单 css 选择器的字符串,定义哪些列表元素不能进行拖放,可设置为多个选择器,中间用“,”分隔
draggable:selector 格式为简单 css 选择器的字符串,定义哪些列表元素可以进行拖放
chosenClass:selector 格式为简单 css 选择器的字符串,当选中列表元素时会给该元素增加一个 class;
forceFallback:boolean 如果设置为 true 时,将不使用原生的 html5 的拖放,可以修改一些拖放中元素的样式等;
fallbackClass:string 当 forceFallback 设置为 true 时,拖放过程中鼠标附着元素的样式;
scroll:boolean 默认为 true,当排序的容器是个可滚动的区域,拖放可以引起区域滚动。
再配置一下对应 class 样式:
.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;
}
最后,修改一下 App.vue 注册组件:
import Draggable from './components/Draggable'
export default {
name: 'app',
components: {
Draggable
}
}
启动项目,在浏览器中查看一下效果!
npm run server
很简单对吧,10 分钟快速食用完毕!
draggable布局 vue_10 分钟上手 Vue 组件 Vue-Draggable相关推荐
- Vue组件+Vue动画
目录 Vue选项 自定义指令 过滤,管道filters 全局组件 局部组件 props传递参数 props细节 组件传参父传子 组件传值总结 组件的插槽(嵌套) 具名插槽 弹框组件的使用htt ...
- html页面渲染vue组件,Vue组件页面渲染的基本流程
html: 组件页面渲染的基本流程 main.js: import Vue from "vue"; import Home from "./home.vue"; ...
- vue组件+vue插件的创建和使用
一.vue组件的概念 是一个可以重复使用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签.因为组件是可复用的Vue实例,所以它们与new Vue ...
- vue 组件 Vue.component 用法
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 1.插槽内可以放置什么内容? 2.默认插槽 3.具名插 ...
- Vue组件间通信:一个例子学会Vue组件-Vue.js学习总结)(转载)
详情请点击 http://www.jianshu.com/p/9ad1ba89a04b 转载于:https://www.cnblogs.com/zhongjiang/p/6694459.html
- 【前端——vue】:过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
- vue组件 .vue_Vue列车时刻表组件
vue组件 .vue 训练时间表 (vue-train-timetable) Vue Train Timetable Component. Vue列车时刻表组件. View Demo 查看演示 Dow ...
- 10 分钟上手 Vue 组件 Vue-Draggable
Vue 综合了 Angualr 和 React 的优点,因其易上手,轻量级,受到了广泛应用.成为了是时下火热的前端框架,吸引着越来越多的前端开发者! 本文将通过一个最简单的拖拽例子带领大家快速上手 V ...
- 七十三、Vue项目城市详细页的动态路由,Banner布局和公用图片画廊组件拆分
2020/11/04. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
最新文章
- 2022年你应该知道的机器学习算法
- 进阶学习(3.7) Flyweight Pattern 享元模式
- Linux 服务器如何修改主机名
- 公文字体字号标准2020_零秒处理公文格式的三个要点
- ZJOI2012网络 题解报告【LCT】
- git pull时冲突的几种解决方式
- Struts2 ognl中的#、%和$符号用法说明
- “浪姐”万茜盗号事件是锅传锅?阿里、网易都来回应了
- 网易我的世界服务器如何装组件,【图文教程】我的世界中国版怎么添加使用光影|光影放在哪里|服务器光影如何安装...
- 小爱同学app安卓版_小爱同学app下载安卓版|语音助手下载_最火软件站
- 【年终总结】我的2015
- RealSR性能大幅提升,旷视科技+快手科技+电子科大联合提出“先发散再收敛”的D2CSR
- 那些年,我们遇到的傻X问题
- ubuntu 截图工具flameshot(火焰截图)
- JAVA正则表达式验证英文字母、汉字和数字!!!
- Effective-Java 检查参数有效性
- 2021年氧化工艺新版试题及氧化工艺复审考试
- C/c++中内存拷贝函数memcpy详解
- 找二叉树根节点到叶子结点最长路径
- 阿里云邮箱登录日志中有异地IP登录是怎么回事?该怎么办?