Commit b317ce25 authored by lipengcheng 's avatar lipengcheng

feat(config): 一些配置

parent faad9f72
<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>
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
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
}
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
}
}
/** ===========
* 全局自定义指令
* ============
*/
// 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
}
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
}
}
}
}
/** ===========
* 全局自定义过滤器
* ============
*/
// 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)
}
}
......@@ -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)
......
......@@ -13,7 +13,6 @@ requireContext
return
}
const file = requireContext(path)
console.log('file:', file)
modules[moduleName] = file.default || file
})
......
......@@ -7,6 +7,7 @@
c="dfsfsdfdsfsfsdfsddfsdfsdfsfsdf">
df
</div>
<g-button></g-button>
</div>
</template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment