feat(config): 一些配置

src/components/global/button/index.vue

+<template>
+    <div class="comp-button">
+        <button>全局button</button>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'GButton',
+    data() {
+        return {}
+    },
+    created() {},
+    mounted() {}
+}
+</script>
+
+<style scoped lang="scss">
+/* @import url(); 引入css类 */
+</style>

src/components/global/index.js

+const requireContext = require.context('.', true, /\.vue$/)
+let components = {}
+requireContext
+    .keys()
+    .filter((path) => path !== './index.vue')
+    .forEach((path) => {
+        const file = requireContext(path)
+        components[file.default.name] = file.default
+    })
+
+export default components

src/components/layout/index.js

-import defaultLayout from '@/components/layout/default.vue'
-import layoutA from '@/components/layout/layoutA.vue'
-
-// const install = Vue => {
-
-// const requireComponent = require.context('.', true, /\.vue/)
-// requireComponent.keys().forEach(filename => {
-//     // 每个文件的详细信息
-//     const config = requireComponent(filename)
-//     Vue.component(config.default.name, config.default)
-// })
-// }
-
-export default [defaultLayout, layoutA]
-
-// export default {
-//     install
-// }
+const install = (Vue) => {
+    const requireContext = require.context('.', true, /\.vue/)
+    requireContext.keys().forEach((path) => {
+        // 每个文件的详细信息
+        const file = requireContext(path)
+        Vue.component(file.default.name, file.default)
+    })
+}
+
+export default {
+    install
+}

src/directives/follower.js

+export default {
+    inserted(el, binding) {
+        let txt, style
+        if (binding.value) {
+            txt = binding.value.txt
+            style = binding.value.style || {}
+        }
+        let span = document.createElement('span')
+        let _style = {
+            backgroundColor: '#fff',
+            padding: '3px 5px',
+            color: '#000',
+            borderRadius: '8px'
+            // position: "fixed",
+        }
+        el.style = Object.assign(span.style, _style, style)
+        console.log('el.style:', el.style)
+        span.style.position = 'fixed'
+        span.style.visibility = 'hidden'
+        span.innerText = txt || '点击查看详情'
+
+        el.onmousemove = (e) => {
+            if (el.contains(e.target)) {
+                el.appendChild(span)
+                let spanRect = span.getBoundingClientRect()
+                span.style.visibility = 'visible'
+                span.style.left = `${e.clientX - spanRect.width / 2}px`
+                span.style.top = `${e.clientY + spanRect.height / 2}px`
+            }
+        }
+        el.onmouseleave = () => {
+            span.style.visibility = 'hidden'
+        }
+    },
+    unbind(el) {
+        el.onmousemove = null
+        el.onmouseleave = null
+    }
+}

src/directives/index.js

+/** ===========
+ * 全局自定义指令
+ * ============
+ */
+// import infiniteScroll from "./directives/infiniteScroll";
+import follower from '@/directives/follower'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
+export default {
+    /**
+     * 滚动加载
+     * 用于列表项的包裹元素上，接收一个对象作为参数
+     * @loadFn {function} 必选。为数据加载的方法，当**指令绑定的元素底边出现在视窗内**便会触发此方法
+     * @wrapper {string} 可选。指定监听滚动事件的目标对象，需将其`ref`值传入。默认为空，则会监听window的滚动事件
+     */
+    // infiniteScroll: infiniteScroll,
+    /**
+     * 用于图片懒加载。用于<img>标签，将图片地址传入即可。
+     */
+    lazyload: {
+        bind() {
+            // console.log(`bind:`);
+        },
+        inserted: (el, binding) => {
+            if (window.IntersectionObserver) {
+                binding.def.observer = new IntersectionObserver((changes) => {
+                    for (const change of changes) {
+                        let intersectionRatio = change.intersectionRatio
+                        // 出现在视野中且未加载过
+                        if (intersectionRatio && !el.src) {
+                            // console.log(`出现在视野中且未加载过:`);
+                            el.src = binding.value
+                        } else {
+                            // console.log('我隐身了:');
+                            return
+                        }
+                    }
+                })
+                binding.def.observer.observe(el)
+            } else {
+                window.addEventListener('scroll', binding.def.scrollHandler.bind(null, el, binding))
+            }
+        },
+        unbind: (el, binding) => {
+            window.IntersectionObserver ? binding.def.observer.unobserve(el) : window.removeEventListener('scroll', binding.def.scrollHandler)
+        },
+        observer: {},
+        scrollHandler(el, binding) {
+            // 通过指令的el参数拿到img，判断其是否在视口内
+            if (binding.def.isInViewport(el, binding) && !el.src) {
+                el.src = binding.value
+            }
+        },
+        // 判断图片是否在视口区域内
+        // 可用于lazyload, infinite scroll等常见功能
+        isInViewport(el) {
+            // 获取视口
+            function getViewport() {
+                if (document.compatMode == 'backCompat') {
+                    return {
+                        width: document.body.clientWidth || window.innerWidth,
+                        height: document.body.clientHeight || window.innerHeight
+                    }
+                } else {
+                    return {
+                        width: document.documentElement.clientWidth || window.innerWidth,
+                        height: document.documentElement.clientHeight || window.innerHeight
+                    }
+                }
+            }
+            let rect = el.getBoundingClientRect()
+            let viewport = getViewport()
+
+            return rect.bottom > 0 && rect.top < viewport.height && rect.left < viewport.width && rect.right > 0
+        }
+    },
+    /**@description
+     * 图片加载出来前会采用随机色填充;
+     * 使用指令时把图片url作为属性值传入即可:
+     * v-before-img-load="imgUrl"
+     */
+    beforeImgLoad: {
+        inserted: (el, binding) => {
+            let color = Math.floor(100000 + Math.random() * 900000) //生成随机6位数
+            el.style.backgroundColor = `#${color}` //设置随机颜色
+
+            let img = new Image()
+            img.src = binding.value
+            img.onload = function() {
+                el.style.background = `url(${binding.value}) center/cover no-repeat`
+            }
+        }
+    },
+    /**
+     * 自动获取焦点
+     */
+    autoFocus: {
+        inserted: (el) => {
+            el.focus()
+        }
+    },
+    timeouter: {
+        inserted: (el, binding) => {
+            var startTime = new Date(binding.value[0]).getTime()
+            var endTime = new Date(binding.value[1]).getTime()
+            var nowTime = new Date().getTime()
+            if (nowTime < startTime || nowTime > endTime) {
+                el.style.display = 'none'
+            }
+        }
+    },
+    /**
+     * 在指令作用的元素范围内，生成一个鼠标跟随的元素。
+     * 可自定义元素样式及元素内容。
+     * 默认: v-follower
+     * 自定义: v-follower="{style:{}, txt: ''}"
+     */
+    follower: follower,
+    /**
+     * 处理标节点之外的点击事件
+     * v-clickoutside="outseideClickHandler()"
+     */
+    Clickoutside: Clickoutside
+}

src/directives/placeholder.js

+export default {
+    inserted(el, binding) {
+        // 随机色
+        const randomColor = `#${Math.floor(100000 + Math.random() * 900000)}`
+
+        // ==用图片占位==
+        if (Object.prototype.toString.call(binding.value) === '[object Array]') {
+            const targetSrc = binding.value[0]
+            const placeholderSrc = binding.value[1]
+
+            let img = new Image()
+            img.src = targetSrc
+
+            // 背景图的形式
+            if (binding.modifiers.bg) {
+                el.style.background = `url(${placeholderSrc}) center/cover no-repeat`
+
+                img.onload = function() {
+                    el.style.background = `url(${targetSrc}) center/cover no-repeat`
+                }
+            } else {
+                // 图片的形式
+                el.src = placeholderSrc
+
+                img.onload = function() {
+                    el.src = targetSrc
+                }
+            }
+            return
+        }
+
+        // ==用随机色占位==
+        el.style.backgroundColor = randomColor
+
+        let img = new Image()
+        img.src = binding.value
+
+        img.onload = function() {
+            // 背景图的形式
+            if (binding.modifiers.bg) {
+                el.style.background = `url(${binding.value}) center/cover no-repeat`
+            } else {
+                // 图片的形式
+                el.src = binding.value
+            }
+        }
+    }
+}

src/filters/index.js

+/** ===========
+ * 全局自定义过滤器
+ * ============
+ */
+// import utils from "./utils";
+import moment from 'moment'
+
+export default {
+    /**
+     * 处理静态资源链接，添加七牛地址前缀
+     */
+    // assetsUrlFil: url => utils.handleAssetsUrl(url),
+    /**
+     * 处理时间戳
+     * 返回格式：yyyy-mm-dd hh:mm
+     */
+    tsFil(ts) {
+        if (!ts) return
+        //分钟必须是两位数
+        function checkTime(t) {
+            if (t < 10) {
+                t = '0' + t
+                return t
+            } else {
+                return t
+            }
+        }
+        //浏览器兼容，不能用toLocaleString()
+        ts = new Date(parseInt(ts * 1000))
+
+        let y, mon, day, hou, min
+        y = ts.getFullYear()
+        mon = ts.getMonth() + 1
+        day = ts.getDate()
+        hou = ts.getHours()
+        min = checkTime(ts.getMinutes())
+
+        let time = `${y}-${mon}-${day} ${hou}:${min}`
+        return time
+    },
+    /**
+     * 处理手机显示
+     * 返回格式132****1632
+     */
+    formatPhone(v) {
+        var reg = /^(\d{3})\d*(\d{4})$/
+        v = v.toString()
+        return v && v.replace(reg, '$1****$2')
+    },
+    /**
+     * 可根据性处理用户头像兼容问题
+     * 头像必须都存储在七牛云上的
+     * @param {用户信息} userInfo
+     */
+    // avantaFil(userInfo) {
+    //     // 存在userInfo===null的情况
+    //     let avantaUrl;
+    //     if (typeof userInfo === "string") {
+    //         avantaUrl = userInfo || "web/defaultAvanta.jpg";
+    //     } else {
+    //         avantaUrl = userInfo ?
+    //             (userInfo.headImgUrl ? `${userInfo.headImgUrl}` : (userInfo.sex ? "web/defaultAvanta.jpg" : "web/defaultAvanta.jpg")) :
+    //             "web/defaultAvanta.jpg";
+    //     }
+    //     return utils.handleAssetsUrl(avantaUrl);
+    // },
+    /**
+     * 格式化浏览量，超过5位数变为万的单位
+     */
+    browseFil(num) {
+        let _num = (num / 10000).toFixed(1)
+        return _num >= 1 ? `${_num}万` : num
+    },
+    /**
+     * momentjs过滤器
+     * dateStr: 时间。  patter：格式
+     * 用法：
+     * {{date | moment}}
+     * {{date | moment(pattern)}}
+     */
+    moment(dateStr, pattern = 'YYYY-MM-DD HH:mm') {
+        /**
+         * 处理10位和13位的时间戳，同时时间戳转换为momentjs接受的number类型
+         */
+        const reg = /^[0-9]+$/
+        if (reg.test(dateStr)) {
+            dateStr = dateStr.toString()
+            dateStr = dateStr.length === 10 ? Number(dateStr * 1000) : dateStr.length === 13 ? Number(dateStr) : dateStr
+        }
+        return moment(dateStr).format(pattern)
+    }
+}

src/main.js

@@ -8,9 +8,18 @@ import axios from 'axios'
 import VueBus from 'vue-bus'
 import VModal from 'vue-js-modal'
 import layoutComponents from '@/components/layout/index.js'
+import globalComponents from '@/components/global/index.js'
+import filters from '@/filters/index.js'
+import directives from '@/directives/index.js'
 
 // 全局注册layout组件
-layoutComponents.forEach((layout) => Vue.component(layout.name, layout))
+Vue.use(layoutComponents)
+// 注册自定义全局组件
+Object.keys(globalComponents).forEach((compName) => Vue.component(compName, globalComponents[compName]))
+// 注册全局自定义filter
+Object.keys(filters).forEach((key) => Vue.filter(key, filters[key]))
+// 注册全局自定义directive
+Object.keys(directives).forEach((key) => Vue.directive(key, directives[key]))
 
 Vue.use(VueBus)
 Vue.use(VModal)

src/store/index.js

@@ -13,7 +13,6 @@ requireContext
             return
         }
         const file = requireContext(path)
-        console.log('file:', file)
         modules[moduleName] = file.default || file
     })
 

src/views/home.vue

@@ -7,6 +7,7 @@
             c="dfsfsdfdsfsfsdfsddfsdfsdfsfsdf">
             df
         </div>
+        <g-button></g-button>
     </div>
 </template>