增加clipboard指令

iview · Nov 19, 2018 · 8552ce1 · 8552ce1
1 parent 228cd68
commit 8552ce1
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 44 deletions.
diff --git a/src/directive/directives.js b/src/directive/directives.js
@@ -1,45 +1,9 @@
-import { on } from '@/libs/tools'
+import draggable from './module/draggable'
+import clipboard from './module/clipboard'
+
 const directives = {
-  draggable: {
-    inserted: (el, binding, vnode) => {
-      let triggerDom = document.querySelector(binding.value.trigger)
-      triggerDom.style.cursor = 'move'
-      let bodyDom = document.querySelector(binding.value.body)
-      let pageX = 0
-      let pageY = 0
-      let transformX = 0
-      let transformY = 0
-      let canMove = false
-      const handleMousedown = e => {
-        let transform = /\(.*\)/.exec(bodyDom.style.transform)
-        if (transform) {
-          transform = transform[0].slice(1, transform[0].length - 1)
-          let splitxy = transform.split('px, ')
-          transformX = parseFloat(splitxy[0])
-          transformY = parseFloat(splitxy[1].split('px')[0])
-        }
-        pageX = e.pageX
-        pageY = e.pageY
-        canMove = true
-      }
-      const handleMousemove = e => {
-        let xOffset = e.pageX - pageX + transformX
-        let yOffset = e.pageY - pageY + transformY
-        if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
-      }
-      const handleMouseup = e => {
-        canMove = false
-      }
-      on(triggerDom, 'mousedown', handleMousedown)
-      on(document, 'mousemove', handleMousemove)
-      on(document, 'mouseup', handleMouseup)
-    },
-    update: (el, binding, vnode) => {
-      if (!binding.value.recover) return
-      let bodyDom = document.querySelector(binding.value.body)
-      bodyDom.style.transform = ''
-    }
-  }
+  draggable,
+  clipboard
 }
 
 export default directives
diff --git a/src/directive/index.js b/src/directive/index.js
@@ -10,6 +10,15 @@ const importDirective = Vue => {
    * }
    */
   Vue.directive('draggable', directive.draggable)
+  /**
+   * clipboard指令 v-draggable="options"
+   * options = {
+   *  value:    /在输入框中使用v-model绑定的值/,
+   *  success:  /复制成功后的回调/,
+   *  error:    /复制失败后的回调/
+   * }
+   */
+  Vue.directive('clipboard', directive.clipboard)
 }
 
 export default importDirective
diff --git a/src/directive/module/clipboard.js b/src/directive/module/clipboard.js
@@ -0,0 +1,30 @@
+import Clipboard from 'clipboard'
+export default {
+  bind: (el, binding) => {
+    const clipboard = new Clipboard(el, {
+      text: () => binding.value.value
+    })
+    el.__success_callback__ = binding.value.success
+    el.__error_callback__ = binding.value.error
+    clipboard.on('success', e => {
+      const callback = el.__success_callback__
+      callback && callback(e)
+    })
+    clipboard.on('error', e => {
+      const callback = el.__error_callback__
+      callback && callback(e)
+    })
+    el.__clipboard__ = clipboard
+  },
+  update: (el, binding) => {
+    el.__clipboard__.text = () => binding.value.value
+    el.__success_callback__ = binding.value.success
+    el.__error_callback__ = binding.value.error
+  },
+  unbind: (el, binding) => {
+    delete el.__success_callback__
+    delete el.__error_callback__
+    el.__clipboard__.destroy()
+    delete el.__clipboard__
+  }
+}
diff --git a/src/directive/module/draggable.js b/src/directive/module/draggable.js
@@ -0,0 +1,41 @@
+import { on } from '@/libs/tools'
+export default {
+  inserted: (el, binding, vnode) => {
+    let triggerDom = document.querySelector(binding.value.trigger)
+    triggerDom.style.cursor = 'move'
+    let bodyDom = document.querySelector(binding.value.body)
+    let pageX = 0
+    let pageY = 0
+    let transformX = 0
+    let transformY = 0
+    let canMove = false
+    const handleMousedown = e => {
+      let transform = /\(.*\)/.exec(bodyDom.style.transform)
+      if (transform) {
+        transform = transform[0].slice(1, transform[0].length - 1)
+        let splitxy = transform.split('px, ')
+        transformX = parseFloat(splitxy[0])
+        transformY = parseFloat(splitxy[1].split('px')[0])
+      }
+      pageX = e.pageX
+      pageY = e.pageY
+      canMove = true
+    }
+    const handleMousemove = e => {
+      let xOffset = e.pageX - pageX + transformX
+      let yOffset = e.pageY - pageY + transformY
+      if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
+    }
+    const handleMouseup = e => {
+      canMove = false
+    }
+    on(triggerDom, 'mousedown', handleMousedown)
+    on(document, 'mousemove', handleMousemove)
+    on(document, 'mouseup', handleMouseup)
+  },
+  update: (el, binding, vnode) => {
+    if (!binding.value.recover) return
+    let bodyDom = document.querySelector(binding.value.body)
+    bodyDom.style.transform = ''
+  }
+}
diff --git a/src/view/directive/directive.vue b/src/view/directive/directive.vue
@@ -4,12 +4,12 @@
       <i-col>
         <Card>
           <Row>
-            <i-col span="5">
+            <i-col span="8">
               <Button type="primary" @click="showModal">显示可拖动弹窗</Button>
               <br/>
               <Button v-draggable="buttonOptions" class="draggable-btn">这个按钮也是可以拖动的</Button>
             </i-col>
-            <i-col span="19">
+            <i-col span="16">
               <div class="intro-con">
                 &lt;Modal v-draggable="options" v-model="visible"&gt;标题&lt;/Modal&gt;
                 <pre class="code-con">
@@ -27,6 +27,42 @@
         拖动这里即可拖动整个弹窗
       </Modal>
     </Row>
+    <Row style="margin-top: 10px;">
+      <i-col>
+        <Card>
+          <Row>
+            <i-col span="8">
+              <Input style="width: 60%" v-model="inputValue">
+                <Button slot="append" v-clipboard="clipOptions">copy</Button>
+              </Input>
+            </i-col>
+            <i-col span="16">
+              <div class="intro-con">
+                &lt;Input style="width: 60%" v-model="inputValue"&gt;
+                  <br/>
+                  &nbsp;&nbsp;&nbsp;&lt;Button slot="append" v-clipboard="clipOptions"&gt;copy&lt;/Button&gt;
+                  <br/>
+                &lt;/Input&gt;
+                <pre class="code-con">
+    inputValue = {
+      value: this.inputValue,
+      success: (e) => {
+        this.$Message.success('复制成功')
+      },
+      error: () => {
+        this.$Message.error('复制失败')
+      }
+    }
+                </pre>
+              </div>
+            </i-col>
+          </Row>
+        </Card>
+      </i-col>
+      <Modal v-draggable="options" v-model="modalVisible">
+        拖动这里即可拖动整个弹窗
+      </Modal>
+    </Row>
   </div>
 </template>
 
@@ -45,7 +81,21 @@ export default {
         trigger: '.draggable-btn',
         body: '.draggable-btn'
       },
-      statu: 1
+      statu: 1,
+      inputValue: '这是输入的内容'
+    }
+  },
+  computed: {
+    clipOptions () {
+      return {
+        value: this.inputValue,
+        success: (e) => {
+          this.$Message.success('复制成功')
+        },
+        error: () => {
+          this.$Message.error('复制失败')
+        }
+      }
     }
   },
   methods: {