Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
M
mould-vuecli3
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
lhfe
mould-vuecli3
Commits
b317ce25
Commit
b317ce25
authored
Aug 30, 2020
by
lipengcheng
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat(config): 一些配置
parent
faad9f72
Show whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
356 additions
and
20 deletions
+356
-20
index.vue
src/components/global/button/index.vue
+20
-0
index.js
src/components/global/index.js
+11
-0
index.js
src/components/layout/index.js
+12
-18
follower.js
src/directives/follower.js
+39
-0
index.js
src/directives/index.js
+123
-0
placeholder.js
src/directives/placeholder.js
+48
-0
index.js
src/filters/index.js
+92
-0
main.js
src/main.js
+10
-1
index.js
src/store/index.js
+0
-1
home.vue
src/views/home.vue
+1
-0
No files found.
src/components/global/button/index.vue
0 → 100644
View file @
b317ce25
<
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
0 → 100644
View file @
b317ce25
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
View file @
b317ce25
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
0 → 100644
View file @
b317ce25
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
0 → 100644
View file @
b317ce25
/** ===========
* 全局自定义指令
* ============
*/
// 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
0 → 100644
View file @
b317ce25
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
0 → 100644
View file @
b317ce25
/** ===========
* 全局自定义过滤器
* ============
*/
// 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
View file @
b317ce25
...
...
@@ -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
View file @
b317ce25
...
...
@@ -13,7 +13,6 @@ requireContext
return
}
const
file
=
requireContext
(
path
)
console
.
log
(
'file:'
,
file
)
modules
[
moduleName
]
=
file
.
default
||
file
})
...
...
src/views/home.vue
View file @
b317ce25
...
...
@@ -7,6 +7,7 @@
c=
"dfsfsdfdsfsfsdfsddfsdfsdfsfsdf"
>
df
</div>
<g-button></g-button>
</div>
</
template
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment