Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
dyingstraw
vue-element-admin
提交
1a345a7c
V
vue-element-admin
项目概览
dyingstraw
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
1a345a7c
编写于
10月 24, 2018
作者:
花
花裤衩
提交者:
GitHub
10月 24, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feature: add drag select component (#1249)
上级
ec58373a
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
115 addition
and
0 deletion
+115
-0
README.md
README.md
+1
-0
README.zh-CN.md
README.zh-CN.md
+1
-0
src/components/DragSelect/index.vue
src/components/DragSelect/index.vue
+61
-0
src/lang/en.js
src/lang/en.js
+1
-0
src/lang/es.js
src/lang/es.js
+1
-0
src/lang/zh.js
src/lang/zh.js
+1
-0
src/router/modules/components.js
src/router/modules/components.js
+6
-0
src/views/components-demo/dragSelect.vue
src/views/components-demo/dragSelect.vue
+43
-0
未找到文件。
README.md
浏览文件 @
1a345a7c
...
...
@@ -118,6 +118,7 @@ Understanding and learning this knowledge in advance will greatly help the use o
- Avatar Upload
- Back To Top
- Drag Dialog
- Drag Select
- Drag Kanban
- Drag List
- SplitPane
...
...
README.zh-CN.md
浏览文件 @
1a345a7c
...
...
@@ -130,6 +130,7 @@
- 头像上传
- 返回顶部
- 拖拽Dialog
- 拖拽Select
- 拖拽看板
- 列表拖拽
- SplitPane
...
...
src/components/DragSelect/index.vue
0 → 100644
浏览文件 @
1a345a7c
<
template
>
<el-select
v-model=
"selectVal"
v-bind=
"$attrs"
class=
"drag-select"
multiple
>
<slot/>
</el-select>
</
template
>
<
script
>
import
Sortable
from
'
sortablejs
'
export
default
{
name
:
'
DragSelect
'
,
props
:
{
value
:
{
type
:
Array
,
required
:
true
}
},
computed
:
{
selectVal
:
{
get
()
{
return
[...
this
.
value
]
},
set
(
val
)
{
this
.
$emit
(
'
input
'
,
[...
val
])
}
}
},
mounted
()
{
this
.
setSort
()
},
methods
:
{
setSort
()
{
const
el
=
document
.
querySelectorAll
(
'
.el-select__tags > span
'
)[
0
]
this
.
sortable
=
Sortable
.
create
(
el
,
{
ghostClass
:
'
sortable-ghost
'
,
// Class name for the drop placeholder,
setData
:
function
(
dataTransfer
)
{
dataTransfer
.
setData
(
'
Text
'
,
''
)
// to avoid Firefox bug
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
},
onEnd
:
evt
=>
{
const
targetRow
=
this
.
value
.
splice
(
evt
.
oldIndex
,
1
)[
0
]
this
.
value
.
splice
(
evt
.
newIndex
,
0
,
targetRow
)
}
})
}
}
}
</
script
>
<
style
scoped
>
.drag-select
>>>
.sortable-ghost
{
opacity
:
.8
;
color
:
#fff
!important
;
background
:
#42b983
!important
;
}
.drag-select
>>>
.el-tag
{
cursor
:
pointer
;
}
</
style
>
src/lang/en.js
浏览文件 @
1a345a7c
...
...
@@ -22,6 +22,7 @@ export default {
componentMixin
:
'
Mixin
'
,
backToTop
:
'
BackToTop
'
,
dragDialog
:
'
Drag Dialog
'
,
dragSelect
:
'
Drag Select
'
,
dragKanban
:
'
Drag Kanban
'
,
charts
:
'
Charts
'
,
keyboardChart
:
'
Keyboard Chart
'
,
...
...
src/lang/es.js
浏览文件 @
1a345a7c
...
...
@@ -22,6 +22,7 @@ export default {
componentMixin
:
'
Mixin
'
,
backToTop
:
'
Ir arriba
'
,
dragDialog
:
'
Drag Dialog
'
,
dragSelect
:
'
Drag Select
'
,
dragKanban
:
'
Drag Kanban
'
,
charts
:
'
Gráficos
'
,
keyboardChart
:
'
Keyboard Chart
'
,
...
...
src/lang/zh.js
浏览文件 @
1a345a7c
...
...
@@ -22,6 +22,7 @@ export default {
componentMixin
:
'
小组件
'
,
backToTop
:
'
返回顶部
'
,
dragDialog
:
'
拖拽 Dialog
'
,
dragSelect
:
'
拖拽 Select
'
,
dragKanban
:
'
可拖拽看板
'
,
charts
:
'
图表
'
,
keyboardChart
:
'
键盘图表
'
,
...
...
src/router/modules/components.js
浏览文件 @
1a345a7c
...
...
@@ -78,6 +78,12 @@ const componentsRouter = {
name
:
'
DragDialogDemo
'
,
meta
:
{
title
:
'
dragDialog
'
}
},
{
path
:
'
drag-select
'
,
component
:
()
=>
import
(
'
@/views/components-demo/dragSelect
'
),
name
:
'
DragSelectDemo
'
,
meta
:
{
title
:
'
dragSelect
'
}
},
{
path
:
'
dnd-list
'
,
component
:
()
=>
import
(
'
@/views/components-demo/dndList
'
),
...
...
src/views/components-demo/dragSelect.vue
0 → 100644
浏览文件 @
1a345a7c
<
template
>
<div
class=
"components-container"
>
<el-drag-select
v-model=
"value"
style=
"width:500px;"
multiple
placeholder=
"请选择"
>
<el-option
v-for=
"item in options"
:label=
"item.label"
:value=
"item.value"
:key=
"item.value"
/>
</el-drag-select>
<div
style=
"margin-top:30px;"
>
<el-tag
v-for=
"item of value"
:key=
"item"
style=
"margin-right:15px;"
>
{{
item
}}
</el-tag>
</div>
</div>
</
template
>
<
script
>
import
ElDragSelect
from
'
@/components/DragSelect
'
// base on element-ui
export
default
{
name
:
'
DragSelectDemo
'
,
components
:
{
ElDragSelect
},
data
()
{
return
{
value
:
[
'
Apple
'
,
'
Banana
'
,
'
Orange
'
],
options
:
[{
value
:
'
Apple
'
,
label
:
'
Apple
'
},
{
value
:
'
Banana
'
,
label
:
'
Banana
'
},
{
value
:
'
Orange
'
,
label
:
'
Orange
'
},
{
value
:
'
Pear
'
,
label
:
'
Pear
'
},
{
value
:
'
Strawberry
'
,
label
:
'
Strawberry
'
}]
}
}
}
</
script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录