Skip to content

Commit 8552ce1

Browse files
author
zhigang.li
committed
增加clipboard指令
1 parent 228cd68 commit 8552ce1

File tree

5 files changed

+138
-44
lines changed

5 files changed

+138
-44
lines changed

‎src/directive/directives.js

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,9 @@
1-
import { on } from '@/libs/tools'
1+
import draggable from './module/draggable'
2+
import clipboard from './module/clipboard'
3+
24
const directives = {
3-
draggable: {
4-
inserted: (el, binding, vnode) => {
5-
let triggerDom = document.querySelector(binding.value.trigger)
6-
triggerDom.style.cursor = 'move'
7-
let bodyDom = document.querySelector(binding.value.body)
8-
let pageX = 0
9-
let pageY = 0
10-
let transformX = 0
11-
let transformY = 0
12-
let canMove = false
13-
const handleMousedown = e => {
14-
let transform = /\(.*\)/.exec(bodyDom.style.transform)
15-
if (transform) {
16-
transform = transform[0].slice(1, transform[0].length - 1)
17-
let splitxy = transform.split('px, ')
18-
transformX = parseFloat(splitxy[0])
19-
transformY = parseFloat(splitxy[1].split('px')[0])
20-
}
21-
pageX = e.pageX
22-
pageY = e.pageY
23-
canMove = true
24-
}
25-
const handleMousemove = e => {
26-
let xOffset = e.pageX - pageX + transformX
27-
let yOffset = e.pageY - pageY + transformY
28-
if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
29-
}
30-
const handleMouseup = e => {
31-
canMove = false
32-
}
33-
on(triggerDom, 'mousedown', handleMousedown)
34-
on(document, 'mousemove', handleMousemove)
35-
on(document, 'mouseup', handleMouseup)
36-
},
37-
update: (el, binding, vnode) => {
38-
if (!binding.value.recover) return
39-
let bodyDom = document.querySelector(binding.value.body)
40-
bodyDom.style.transform = ''
41-
}
42-
}
5+
draggable,
6+
clipboard
437
}
448

459
export default directives

‎src/directive/index.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,15 @@ const importDirective = Vue => {
1010
* }
1111
*/
1212
Vue.directive('draggable', directive.draggable)
13+
/**
14+
* clipboard指令 v-draggable="options"
15+
* options = {
16+
* value: /在输入框中使用v-model绑定的值/,
17+
* success: /复制成功后的回调/,
18+
* error: /复制失败后的回调/
19+
* }
20+
*/
21+
Vue.directive('clipboard', directive.clipboard)
1322
}
1423

1524
export default importDirective

‎src/directive/module/clipboard.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Clipboard from 'clipboard'
2+
export default {
3+
bind: (el, binding) => {
4+
const clipboard = new Clipboard(el, {
5+
text: () => binding.value.value
6+
})
7+
el.__success_callback__ = binding.value.success
8+
el.__error_callback__ = binding.value.error
9+
clipboard.on('success', e => {
10+
const callback = el.__success_callback__
11+
callback && callback(e)
12+
})
13+
clipboard.on('error', e => {
14+
const callback = el.__error_callback__
15+
callback && callback(e)
16+
})
17+
el.__clipboard__ = clipboard
18+
},
19+
update: (el, binding) => {
20+
el.__clipboard__.text = () => binding.value.value
21+
el.__success_callback__ = binding.value.success
22+
el.__error_callback__ = binding.value.error
23+
},
24+
unbind: (el, binding) => {
25+
delete el.__success_callback__
26+
delete el.__error_callback__
27+
el.__clipboard__.destroy()
28+
delete el.__clipboard__
29+
}
30+
}

‎src/directive/module/draggable.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { on } from '@/libs/tools'
2+
export default {
3+
inserted: (el, binding, vnode) => {
4+
let triggerDom = document.querySelector(binding.value.trigger)
5+
triggerDom.style.cursor = 'move'
6+
let bodyDom = document.querySelector(binding.value.body)
7+
let pageX = 0
8+
let pageY = 0
9+
let transformX = 0
10+
let transformY = 0
11+
let canMove = false
12+
const handleMousedown = e => {
13+
let transform = /\(.*\)/.exec(bodyDom.style.transform)
14+
if (transform) {
15+
transform = transform[0].slice(1, transform[0].length - 1)
16+
let splitxy = transform.split('px, ')
17+
transformX = parseFloat(splitxy[0])
18+
transformY = parseFloat(splitxy[1].split('px')[0])
19+
}
20+
pageX = e.pageX
21+
pageY = e.pageY
22+
canMove = true
23+
}
24+
const handleMousemove = e => {
25+
let xOffset = e.pageX - pageX + transformX
26+
let yOffset = e.pageY - pageY + transformY
27+
if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
28+
}
29+
const handleMouseup = e => {
30+
canMove = false
31+
}
32+
on(triggerDom, 'mousedown', handleMousedown)
33+
on(document, 'mousemove', handleMousemove)
34+
on(document, 'mouseup', handleMouseup)
35+
},
36+
update: (el, binding, vnode) => {
37+
if (!binding.value.recover) return
38+
let bodyDom = document.querySelector(binding.value.body)
39+
bodyDom.style.transform = ''
40+
}
41+
}

‎src/view/directive/directive.vue

Lines changed: 53 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
<i-col>
55
<Card>
66
<Row>
7-
<i-col span="5">
7+
<i-col span="8">
88
<Button type="primary" @click="showModal">显示可拖动弹窗</Button>
99
<br/>
1010
<Button v-draggable="buttonOptions" class="draggable-btn">这个按钮也是可以拖动的</Button>
1111
</i-col>
12-
<i-col span="19">
12+
<i-col span="16">
1313
<div class="intro-con">
1414
&lt;Modal v-draggable="options" v-model="visible"&gt;标题&lt;/Modal&gt;
1515
<pre class="code-con">
@@ -27,6 +27,42 @@
2727
拖动这里即可拖动整个弹窗
2828
</Modal>
2929
</Row>
30+
<Row style="margin-top: 10px;">
31+
<i-col>
32+
<Card>
33+
<Row>
34+
<i-col span="8">
35+
<Input style="width: 60%" v-model="inputValue">
36+
<Button slot="append" v-clipboard="clipOptions">copy</Button>
37+
</Input>
38+
</i-col>
39+
<i-col span="16">
40+
<div class="intro-con">
41+
&lt;Input style="width: 60%" v-model="inputValue"&gt;
42+
<br/>
43+
&nbsp;&nbsp;&nbsp;&lt;Button slot="append" v-clipboard="clipOptions"&gt;copy&lt;/Button&gt;
44+
<br/>
45+
&lt;/Input&gt;
46+
<pre class="code-con">
47+
inputValue = {
48+
value: this.inputValue,
49+
success: (e) => {
50+
this.$Message.success('复制成功')
51+
},
52+
error: () => {
53+
this.$Message.error('复制失败')
54+
}
55+
}
56+
</pre>
57+
</div>
58+
</i-col>
59+
</Row>
60+
</Card>
61+
</i-col>
62+
<Modal v-draggable="options" v-model="modalVisible">
63+
拖动这里即可拖动整个弹窗
64+
</Modal>
65+
</Row>
3066
</div>
3167
</template>
3268

@@ -45,7 +81,21 @@ export default {
4581
trigger: '.draggable-btn',
4682
body: '.draggable-btn'
4783
},
48-
statu: 1
84+
statu: 1,
85+
inputValue: '这是输入的内容'
86+
}
87+
},
88+
computed: {
89+
clipOptions () {
90+
return {
91+
value: this.inputValue,
92+
success: (e) => {
93+
this.$Message.success('复制成功')
94+
},
95+
error: () => {
96+
this.$Message.error('复制失败')
97+
}
98+
}
4999
}
50100
},
51101
methods: {

0 commit comments

Comments
 (0)