编写自定义指令

Author: 2017coding

.eslintrc.js

@@ -10,7 +10,8 @@ module.exports = {
     es6: true,
   },
   extends: ['plugin:vue/recommended', 'eslint:recommended'],
-
+  // 设置可以使用的全局变量
+  globals: {"tpwidget": true},
   // add your custom rules here
   //it is base on https://github.com/vuejs/eslint-config-vue
   rules: {

src/components/PageTable/index.vue

@@ -69,6 +69,7 @@
           <!-- 图片 -->
           <img
             v-else-if="item.type === 'image' && scope.row[item.value]"
+            v-imgAlart
             height="50px"
             :src="scope.row[item.value]"
           >

src/directive/clipboard/clipboard.js

@@ -0,0 +1,9 @@
+export default {
+  install (Vue) {
+    Vue.directive('focus', {
+      inserted: el => {
+        el.focus()
+      }
+    })
+  }
+}

src/directive/clipboard/index.js

@@ -0,0 +1,24 @@
+.g-img-alart{
+}
+.g-img-alart-mask{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, .5);
+  z-index: 9999;
+}
+.g-img-alart-content{
+  padding: 10px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 10001;
+  transform: translate(-50%, -50%);
+  background: white;
+  border-radius: 10px;
+}
+.g-img-alart-img{
+  max-width: 500px;
+}

src/directive/el-dragDialog/drag.js

@@ -0,0 +1,25 @@
+import './alart.css'
+export default {
+  bind (el, binding) {
+    el.addEventListener('click', e => {
+      const src = e.target.currentSrc
+      const body = document.querySelector('body')
+      const imgAlart = document.createElement('div')
+      imgAlart.className = 'g-img-alart'
+      imgAlart.innerHTML = `
+        <div class="g-img-alart-mask"></div>
+        <div class="g-img-alart-content">
+          <img class="g-img-alart-img" src="${src}">
+        </div>
+      `
+      body.appendChild(imgAlart)
+
+      // 监听到遮罩层点击
+      imgAlart.addEventListener('click', e => {
+        if (e.target.className === 'g-img-alart-mask') {
+          body.removeChild(imgAlart)
+        }
+      }, false)
+    }, false)
+  }
+}

src/directive/el-dragDialog/index.js

@@ -0,0 +1,7 @@
+import imgAlart from './alart'
+
+export default {
+  install (Vue) {
+    Vue.directive('imgAlart', imgAlart)
+  }
+}

src/directive/focus/index.js

@@ -1,13 +1,7 @@
 import waves from './waves'
 
-const install = function (Vue) {
-  Vue.directive('waves', waves)
+export default {
+  install (Vue) {
+    Vue.directive('waves', waves)
+  }
 }
-
-if (window.Vue) {
-  window.waves = waves
-  Vue.use(install); // eslint-disable-line
-}
-
-waves.install = install
-export default waves

src/directive/imgAlart/alart.css

@@ -15,6 +15,8 @@ import '@/common/style/index.scss' // 自定义样式
 import mavonEditor from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
 import vueWaves from '@/directive/waves/index'// 水波纹指令
+import vueFocus from '@/directive/focus/index'// 聚焦指令
+import vueImgAlart from '@/directive/imgAlart/index'// 图片弹窗指令
 import '@/common/config/errorLog' // 错误日志
 import '@/common/config/permission' // 路由动态配置
 import commonPlug from '@/common/js/commonPlug' // 自定义插件
@@ -23,6 +25,8 @@ Vue.use(commonPlug)
 Vue.use(ElementUI)
 Vue.use(mavonEditor)
 Vue.use(vueWaves)
+Vue.use(vueFocus)
+Vue.use(vueImgAlart)
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */

src/directive/imgAlart/alart.js

@@ -154,7 +154,7 @@ export default {
         data: [],
         fieldList: [
           { label: '标题', value: 'title' },
-          { label: '图标', value: 'image', type: 'image', width: 100 },
+          { label: '图片', value: 'image', type: 'image', width: 100 },
           { label: '排序', value: 'sort', width: 80 },
           { label: '点击触发', value: 'click', type: 'select', list: 'eventList', minWidth: 120 },
           { label: '跳转地址', value: 'href', minWidth: 120 },

src/directive/imgAlart/index.js

@@ -56,6 +56,7 @@
         <template v-slot:form-avatar>
           <div class="slot-avatar">
             <img
+              v-imgAlart
               :src="formInfo.data.avatar"
               style="height: 30px;"
             >
@@ -302,8 +303,8 @@ export default {
     },
     // 触发事件
     handleEvent (event, data) {
-      switch (event) {
-      }
+      // switch (event) {
+      // }
     }
   }
 }

src/directive/permission/index.js

@@ -68,6 +68,7 @@
         <template v-slot:form-avatar>
           <div class="slot-avatar">
             <img
+              v-imgAlart
               :src="formInfo.data.avatar"
               style="height: 30px;"
             >