directive: v-el-dral-dialog

src/components/demo-block-control.vue

+<template>
+  <div class="demo-block-control" :class="{'is-fixed':isVisible}">
+    <i v-if="!isVisible" class="el-icon-caret-bottom"></i>
+    <i v-if="isVisible" class="el-icon-caret-top"></i>
+    <span v-if="!isVisible" @click="change">显示代码</span>
+    <span v-if="isVisible" @click="change">隐藏代码</span>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "demo-block-control",
+    data() {
+      return {
+        isVisible: false
+      }
+    },
+    props: ['meta'],
+    created() {
+      console.log(this.$refs)
+    },
+    methods: {
+      change() {
+        if (this.isVisible) {
+          this.$emit('height','0px')
+        } else {
+          this.$emit('height','auto')
+        }
+        this.isVisible = !this.isVisible
+      }
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -20,7 +20,7 @@ import './utils/error-log' // error log
 
 import * as filters from './filters' // global filters
 
-import Hightlight from './utils/highlight'
+import Hightlight from './directive/highlight'
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/router/modules/components.js

@@ -66,12 +66,12 @@ const componentsRouter = {
     //   name: 'ComponentMixinDemo',
     //   meta: { title: 'componentMixin' }
     // },
-    {
-      path: 'back-to-top',
-      component: () => import('@/views/components-demo/back-to-top'),
-      name: '返回顶部',
-      meta: { title: '返回顶部' }
-    },
+    // {
+    //   path: 'back-to-top',
+    //   component: () => import('@/views/components-demo/back-to-top'),
+    //   name: '返回顶部',
+    //   meta: { title: '返回顶部' }
+    // },
     {
       path: 'drag-dialog',
       component: () => import('@/views/components-demo/drag-dialog'),

src/styles/index.scss

@@ -202,14 +202,77 @@ aside {
   -webkit-font-smoothing: auto;
 }
 
-code.demo {
-  color: #5e6d82;
-  background-color: #e6effb;
-  margin: 0 4px;
-  display: inline-block;
-  padding: 1px 5px;
-  font-size: 12px;
+
+.demo-block {
+  border: 1px solid #ebebeb;
   border-radius: 3px;
-  height: 18px;
-  line-height: 18px;
+  transition: .2s;
+
+  .source {
+    padding: 24px;
+  }
+
+  .meta {
+    background-color: #fafafa;
+    border-top: 1px solid #eaeefb;
+    overflow: hidden;
+    transition: height .2s;
+
+    .description {
+      > p {
+        font-size: 14px;
+        color: #5e6d82;
+        line-height: 26px;
+        padding: 0 10px;
+
+        code.demo, code {
+          color: #5e6d82;
+          background-color: #e6effb;
+          margin: 0 4px;
+          display: inline-block;
+          padding: 1px 5px;
+          font-size: 12px;
+          border-radius: 3px;
+          height: 18px;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+
+  .demo-block-control {
+    border-top: 1px solid #eaeefb;
+    height: 44px;
+    box-sizing: border-box;
+    background-color: #fff;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    text-align: center;
+    margin-top: -1px;
+    color: #46a0fc;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .demo-block-control.is-fixed {
+    position: fixed;
+    bottom: 0;
+    width: 1113px;
+  }
+
+  .demo-block-control i {
+    font-size: 16px;
+    line-height: 44px;
+    transition: .3s;
+  }
+
+  .control-button {
+    line-height: 26px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 14px;
+    padding-left: 5px;
+    padding-right: 25px;
+  }
 }

src/views/components-demo/back-to-top.vue

 <template>
   <div class="components-container">
-    <aside>{{ $t('components.backToTopTips1') }}</aside>
-    <aside>{{ $t('components.backToTopTips2') }}</aside>
+    <aside>页面滚动到指定位置会在右下角出现返回顶部按钮</aside>
+    <aside>可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素</aside>
     <div class="placeholder-container">
       <div>placeholder</div>
       <div>placeholder</div>

src/views/components-demo/drag-dialog.vue

 <template>
   <div class="components-container">
-    <el-button type="primary" @click="dialogTableVisible = true">
-      open a Drag Dialog
-    </el-button>
-    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
-      <el-select ref="select" v-model="value" placeholder="请选择">
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-      </el-select>
-      <el-table :data="gridData">
-        <el-table-column property="date" label="Date" width="150" />
-        <el-table-column property="name" label="Name" width="200" />
-        <el-table-column property="address" label="Address" />
-      </el-table>
+    <aside>
+      拖动的directive:<code class="demo">v-el-drag-dialog</code>
+    </aside>
+
+    <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address">
+      <p>something</p>
     </el-dialog>
+    <div class="demo-block demo">
+      <div class="source">
+        例子：
+        <el-button type="primary" @click="dialogTableVisible = true">
+          open a Drag Dialog
+        </el-button>
+      </div>
+      <div class="meta" ref="meta">
+        <div class="description">
+          <p>1）新建el-drag-dialog文件夹，里面两个文件<code>drag.js</code><code>index.js</code></p>
+        </div>
+        <div class="description">
+          <p>2）<code>drag.js</code>拖动的事件效果</p>
+        </div>
+        <div class="highlight">
+          <pre v-highlight><code class="hljs">
+
+export default {
+  bind(el, binding, vnode) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style.cssText += ';cursor:move;'
+    dragDom.style.cssText += ';top:0px;'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const getStyle = (function() {
+      if (window.document.currentStyle) {
+        return (dom, attr) => dom.currentStyle[attr]
+      } else {
+        return (dom, attr) => getComputedStyle(dom, false)[attr]
+      }
+    })()
+
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      const dragDomWidth = dragDom.offsetWidth
+      const dragDomHeight = dragDom.offsetHeight
+
+      const screenWidth = document.body.clientWidth
+      const screenHeight = document.body.clientHeight
+
+      const minDragDomLeft = dragDom.offsetLeft
+      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+
+      const minDragDomTop = dragDom.offsetTop
+      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
+
+      // 获取到的值带px 正则匹配替换
+      let styL = getStyle(dragDom, 'left')
+      let styT = getStyle(dragDom, 'top')
+
+      if (styL.includes('%')) {
+        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+      } else {
+        styL = +styL.replace(/\px/g, '')
+        styT = +styT.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        let left = e.clientX - disX
+        let top = e.clientY - disY
+
+        // 边界处理
+        if (-(left) > minDragDomLeft) {
+          left = -minDragDomLeft
+        } else if (left > maxDragDomLeft) {
+          left = maxDragDomLeft
+        }
+
+        if (-(top) > minDragDomTop) {
+          top = -minDragDomTop
+        } else if (top > maxDragDomTop) {
+          top = maxDragDomTop
+        }
+
+        // 移动当前元素
+        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+
+        // emit onDrag event
+        vnode.child.$emit('dragDialog')
+      }
+
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+}
+    </code></pre>
+        </div>
+        <div class="description">
+          <p>3）<code>index.js </code>在Vue实例中注入 <code>v-el-drag-dialog</code></p>
+        </div>
+        <div class="highlight">
+          <pre v-highlight><code class="hljs">
+import drag from './drag'
+
+const install = function(Vue) {
+  Vue.directive('el-drag-dialog', drag)
+}
+
+if (window.Vue) {
+  window['el-drag-dialog'] = drag
+  Vue.use(install); // eslint-disable-line
+}
+
+drag.install = install
+export default drag
+
+          </code>
+          </pre>
+        </div>
+        <div class="description">
+          <p>4）在 <code>dialog</code>中加入 <code>v-el-drag-dialog</code>directive，即可实现dialog拖动的效果</p>
+          <pre v-highlight><code class="hljs">{{value}}</code></pre>
+        </div>
+      </div>
+<!--      <demo-block-control @height="changeHeight"></demo-block-control>-->
+    </div>
   </div>
 </template>
 
 <script>
-import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
+  import elDragDialog from '@/directive/el-drag-dialog'
+  import DemoBlockControl from "../../components/demo-block-control"; // base on element-ui
 
-export default {
-  name: 'DragDialogDemo',
-  directives: { elDragDialog },
-  data() {
-    return {
-      dialogTableVisible: false,
-      options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' },
-        { value: '选项3', label: '蚵仔煎' },
-        { value: '选项4', label: '龙须面' }
-      ],
-      value: '',
-      gridData: [{
-        date: '2016-05-02',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-04',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-01',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }, {
-        date: '2016-05-03',
-        name: 'John Smith',
-        address: 'No.1518,  Jinshajiang Road, Putuo District'
-      }]
-    }
-  },
-  methods: {
-    // v-el-drag-dialog onDrag callback function
-    handleDrag() {
-      this.$refs.select.blur()
+  export default {
+    name: 'DragDialogDemo',
+    components: {DemoBlockControl},
+    directives: {elDragDialog},
+    data() {
+      return {
+        dialogTableVisible: false,
+        value: `
+<el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address">
+   <p>something</p>
+</el-dialog>
+        `,
+        isVisible: false
+      }
+    },
+    created() {
+
+    },
+    methods: {
+      // v-el-drag-dialog onDrag callback function
+      changeHeight(ev) {
+        this.$refs.meta.style.height = ev;
+      }
     }
   }
-}
 </script>