Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
B
beyond-clouds-frontM
Overview
Overview
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
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
云深项目组
beyond-clouds-frontM
Commits
fe9e7eaf
Commit
fe9e7eaf
authored
Mar 10, 2020
by
yanju
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
添加toast
parent
79993a53
Hide whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
658 additions
and
59 deletions
+658
-59
assets/reset.scss
+2
-1
components/README.md
+58
-3
components/common/adaptableCon/src/main.vue
+3
-4
components/common/button/src/main.js
+50
-22
components/common/dialog/index.js
+183
-0
components/common/dialog/src/main.vue
+189
-0
components/common/image/src/main.vue
+9
-7
components/common/popup/src/main.vue
+13
-2
components/common/toast/index.js
+0
-2
components/common/toast/src/main.vue
+1
-0
components/common/touch/index.js
+69
-0
components/moblie/pageHeader.vue
+11
-1
components/moblie/projectCard.vue
+28
-15
plugins/nossr.js
+42
-2
No files found.
assets/reset.scss
View file @
fe9e7eaf
...
...
@@ -20,7 +20,8 @@ blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr
padding
:
0
}
body
,
button
,
input
,
select
,
textarea
{
font
:
14px
/
1
.5
tahoma
,
arial
,
'Hiragino Sans GB'
,
'\5b8b\4f53'
,
sans-serif
;
font-family
:
Helvetica
Neue
,
Helvetica
,
PingFang
SC
,
Hiragino
Sans
GB
,
Microsoft
YaHei
,
微软雅黑
,
Arial
,
sans-serif
;
}
address
,
cite
,
dfn
,
em
,
var
{
...
...
components/README.md
View file @
fe9e7eaf
...
...
@@ -12,7 +12,7 @@ tag: yun-div
|skeW|骨架屏宽度|Number|-|-|
|skeH|骨架屏高度|Number|-|-|
|borderR|
[
左上角,右上角,右下角,左下角
]
|Array|-|可按照css规则设置1到4个值|
|borderV|
[
边界宽度,边界样式,边界颜色
]
|Array|-|-|
|borderV|
[
边界宽度,边界样式,边界颜色
,边界位置(默认全部,传{left,right,top,bottom})
]
|Array|-|-|
|paddingV|
[
上,右,下,左
]
|Array|-|可按照css规则设置1到4个值|
|marginV|
[
上,右,下,左
]
|Array|-|可按照css规则设置1到4个值|
|flexV|
[
flex-direction,justify-content,align-items
]
|Array|-|-|
...
...
@@ -20,7 +20,8 @@ tag: yun-div
|fontStyle|
[
字号,行高,字粗,颜色,排布位置
]
|Array|-|-|
|bgColorV|背景颜色|String|-|-|
|noWrap|文本是否不换行|Boolean|-|-|
|noFlexWrap|是否换行|Boolean|-|-|
|flexWrap|是否换行|Boolean|-|-|
|pointer|是否支持点击|Boolean|-|-|
|noFlexShrink|flex布局时是否可压缩|Boolean|true|-|
|extendStyle|附加的样式|Object|-|jsx语法|
...
...
@@ -35,7 +36,7 @@ tag: yun-button
|----|-----|------|------|------|
|disabled|是否禁用|Boolean|false|-|
|size|
[
按钮宽度,按钮长度
]
|Array|
[
224,66
]
|-|
|border|
[
边界宽度,边界样式,边界颜色
]
|Array|
[
]
|-|
|border|
[
边界宽度,边界样式,边界颜色
,边界位置(默认全部,传{left,right,top,bottom})
]
|Array|-
|-|
|borderR|
[
左上角,右上角,右下角,左下角
]
|Array|
[
224,66
]
|可按照css规则设置1到4个值|
|color|字体颜色|String|#fff|-|
|bgColor|背景颜色|String|#00AAE6|-|
...
...
@@ -83,6 +84,31 @@ tag: yun-image
|borderV|
[
边界宽度,边界样式,边界颜色
]
|Array|-|-|
---
---
tag: yun-dialog
---
#### Props
|属性 | 说明 | 类型 | 默认值 | 备注|
|----|-----|------|------|------|
| v-model | 双向绑定是否显示窗口 | Boolean |
`false`
|-|
| title | 窗口标题 | String | -|-|
| closable | 是否显示关闭按钮 | Boolean |
`true`
|-|
| btns | 底部操作按钮组 | Array
\<
DialogBtnOptions
\>
|
`[]`
|-|
| has-mask | 是否有蒙层 | Boolean | `true`|-|
---
#### DialogBtnOptions Props
|属性 | 说明 | 类型 | 默认值|
|----|-----|------|------|
|text|按钮文案|String|-|
|handler|点击回调|Function(btn: DialogBtnOptions)|-|
|warning|警示按钮|Boolean|
`false`
|
|disabled |禁用按钮|Boolean|
`false`
|
prototype: $message
---
...
...
@@ -96,3 +122,32 @@ prototype: $message
|position|提示位置|String|'center'|
[
'top','bottom'
]
|
|hasMask|是否有遮罩层|Boolean|false|-|
prototype: $messageBox.confirm
---
#### Props
|属性 | 说明 | 类型 | 默认值 | 备注|
|----|-----|------|------|------|
| title | 窗口标题 | String | -|
| content | 正文内容 | String | -|
| cancelText | 底部取消按钮文字 | String |
`取消`
|
| confirmText | 底部确认按钮文字 | String |
`确认`
|
| cancelWarning | 点击取消按钮为警示操作 | Boolean |
`false`
|
| confirmWarning | 点击确认按钮为警示操作 | Boolean |
`false`
|
| onConfirm | 点击确认按钮回调函数 | Function | -|
| onCancel | 点击取消按钮回调函数 | Function | -|
prototype: $messageBox.alert
---
#### Props
|属性 | 说明 | 类型 | 默认值 | 备注|
|----|-----|------|------|------|
| title | 窗口标题 | String | -|
| content | 正文内容 | String | -|
| confirmText | 底部确认按钮文字 | String |
`确认`
|
| warning | 点击确认按钮为警示操作 | Boolean |
`false`
|
| onConfirm | 点击确认按钮回调函数 | Function | -|
components/common/adaptableCon/src/main.vue
View file @
fe9e7eaf
<
template
>
<client-only>
<div
class=
"self-adaption-content-con"
:style=
"computedStyle"
>
<yun-skeleton
:size=
"[skeW,skeH||fontStyle[1]]"
v-if=
"fontStyle[0]&&showSke&&loading"
></yun-skeleton>
<slot
v-else
></slot>
</div>
</client-only>
</
template
>
...
...
@@ -62,7 +60,7 @@
bgColorV
:
String
,
noFlexShrink
:
Boolean
,
noWrap
:
Boolean
,
noF
lexWrap
:
Boolean
,
f
lexWrap
:
Boolean
,
pointer
:
Boolean
,
extendStyle
:
Object
},
...
...
@@ -106,7 +104,7 @@
stylesObject
.
borderBottom
=
`
${
borderV
[
0
]
*
remRate
+
'px'
}
${
borderV
[
1
]}
${
borderV
[
2
]}
`
}
else
{
if
(
!
position
)
{
stylesObject
.
border
=
`
${
borderV
[
0
]
*
remRate
+
'px'
}
${
borderV
[
1
]}
${
borderV
[
2
]}
`
}
...
...
@@ -233,6 +231,7 @@
/*flex-shrink: 0;*/
overflow
:
hidden
;
position
:
relative
;
/*cursor:pointer;*/
}
</
style
>
components/common/button/src/main.js
View file @
fe9e7eaf
import
pageConfig
from
'../../../../action/page-config'
;
import
{
isPc
}
from
'../../../../action/utils'
;
import
{
isPc
,
isRealNum
}
from
'../../../../action/utils'
;
import
TouchRipple
from
'./TouchRipple'
;
import
FocusRipple
from
'./FocusRipple'
;
import
'./button.scss'
;
...
...
@@ -54,21 +54,30 @@ export default {
methods
:{
handleBorderR
(
array
){
if
(
array
.
length
===
1
){
return
[
array
[
0
],
array
[
0
],
array
[
0
],
array
[
0
]]
}
if
(
array
.
length
===
2
){
return
[
array
[
0
],
array
[
1
],
array
[
0
],
array
[
1
]]
}
if
(
array
.
length
===
3
){
return
[
array
[
0
],
array
[
1
],
array
[
2
],
array
[
1
]]
}
else
{
return
array
;
}
handleCssArray
(
array
){
if
(
array
.
length
===
1
){
return
[
array
[
0
],
array
[
0
],
array
[
0
],
array
[
0
]]
}
if
(
array
.
length
===
2
){
return
[
array
[
0
],
array
[
1
],
array
[
0
],
array
[
1
]]
}
if
(
array
.
length
===
3
){
return
[
array
[
0
],
array
[
1
],
array
[
2
],
array
[
1
]]
}
else
{
return
array
;
}
},
},
returnNewLength
(
object
,
name
,
val
,
rate
){
if
(
val
||
val
===
0
){
if
(
isRealNum
(
val
)){
object
[
name
]
=
val
*
rate
+
'px'
;
}
else
{
object
[
name
]
=
val
}
}
},
handleHover
(
event
)
{
if
(
!
this
.
disabled
&&
isPc
())
{
this
.
hover
=
true
;
...
...
@@ -180,23 +189,42 @@ export default {
render
(
h
){
let
remRate
=
window
.
$nuxt
.
$store
.
state
.
page
.
remRate
;
let
borderR
=
this
.
handle
BorderR
(
this
.
borderR
);
let
borderR
=
this
.
handle
CssArray
(
this
.
borderR
);
const
div
=
'button'
;
const
style
=
{
width
:
this
.
size
[
0
]
*
remRate
+
'px'
,
height
:
this
.
size
[
1
]
*
remRate
+
'px'
,
position
:
'relative'
,
backgroundColor
:
this
.
bgColor
||
pageConfig
.
primaryColor
(),
color
:
this
.
color
||
'#fff'
,
borderWidth
:
this
.
border
[
0
]
*
remRate
+
'px'
||
0
,
borderStyle
:
this
.
border
[
1
]
||
''
,
borderColor
:
this
.
border
[
2
],
borderTopLeftRadius
:
borderR
[
0
]
*
remRate
+
'px'
,
borderTopRightRadius
:
borderR
[
1
]
*
remRate
+
'px'
,
borderBottomRightRadius
:
borderR
[
2
]
*
remRate
+
'px'
,
borderBottomLeftRadius
:
borderR
[
3
]
*
remRate
+
'px'
,
fontSize
:
this
.
fontSize
fontSize
:
this
.
fontSize
*
remRate
+
'px'
,
};
if
(
this
.
border
){
let
borderV
=
this
.
border
;
let
position
=
borderV
[
3
];
if
(
position
===
'left'
){
style
.
borderLeft
=
`
${
borderV
[
0
]
*
remRate
+
'px'
}
${
borderV
[
1
]}
${
borderV
[
2
]}
`
}
if
(
position
===
'right'
){
style
.
borderRight
=
`
${
borderV
[
0
]
*
remRate
+
'px'
}
${
borderV
[
1
]}
${
borderV
[
2
]}
`
}
if
(
position
===
'top'
){
style
.
borderTop
=
`
${
borderV
[
0
]
*
remRate
+
'px'
}
${
borderV
[
1
]}
${
borderV
[
2
]}
`
}
if
(
position
===
'bottom'
){
style
.
borderBottom
=
`
${
borderV
[
0
]
*
remRate
+
'px'
}
${
borderV
[
1
]}
${
borderV
[
2
]}
`
}
if
(
!
position
){
style
.
border
=
`
${
borderV
[
0
]
*
remRate
+
'px'
}
${
borderV
[
1
]}
${
borderV
[
2
]}
`
}
}
this
.
returnNewLength
(
style
,
'width'
,
this
.
size
[
0
],
remRate
)
this
.
returnNewLength
(
style
,
'height'
,
this
.
size
[
1
],
remRate
)
const
buttonClass
=
this
.
disabled
?
'disabled'
:
'mu-button'
;
return
h
(
div
,{
...
...
components/common/dialog/index.js
0 → 100644
View file @
fe9e7eaf
import
Vue
from
'vue'
import
Dialog
from
'./src/main'
Dialog
.
install
=
function
(
V
)
{
V
.
component
(
'yun-dialog'
,
Dialog
)
}
/* istanbul ignore next */
const
noop
=
function
()
{}
// all active instances
const
instances
=
[]
/**
* Dialog factory
*
* @param {Object} props
* @return {Dialog}
*/
const
Generate
=
function
({
title
=
''
,
icon
=
''
,
iconSvg
=
false
,
content
=
''
,
closable
=
false
,
btns
=
[],
onShow
=
noop
,
onHide
=
noop
,
})
{
const
DialogConstructor
=
Vue
.
extend
(
Dialog
)
const
vm
=
new
DialogConstructor
({
propsData
:
{
value
:
false
,
title
,
icon
,
iconSvg
,
content
,
closable
,
btns
,
transition
:
'md-bounce'
,
preventScroll
:
true
,
},
}).
$mount
()
instances
.
push
(
vm
)
vm
.
$on
(
'input'
,
val
=>
{
/* istanbul ignore else */
if
(
!
val
)
{
vm
.
value
=
false
}
})
vm
.
$on
(
'hide'
,
()
=>
{
const
index
=
instances
.
indexOf
(
vm
)
if
(
vm
){
/* istanbul ignore else */
if
(
index
>=
0
)
{
instances
.
splice
(
index
,
1
)
}
vm
.
$destroy
()
onHide
()
}
})
vm
.
$on
(
'show'
,
()
=>
{
onShow
()
})
vm
.
value
=
true
return
vm
}
/**
* Dynamically create a confirm dialog
*
* @param {Object} props
* @return {Dialog}
*/
Dialog
.
confirm
=
({
title
=
''
,
icon
=
''
,
iconSvg
=
false
,
content
=
''
,
cancelText
=
'取消'
,
cancelWarning
=
false
,
confirmText
=
'确定'
,
confirmWarning
=
false
,
closable
=
false
,
onConfirm
=
noop
,
onCancel
=
noop
,
onShow
=
noop
,
onHide
=
noop
,
})
=>
{
const
vm
=
Generate
({
title
,
icon
,
iconSvg
,
content
,
closable
,
onShow
,
onHide
,
btns
:
[
{
text
:
cancelText
,
warning
:
cancelWarning
,
handler
:
/* istanbul ignore next */
()
=>
{
if
(
onCancel
()
!==
false
)
{
vm
.
close
()
}
},
},
{
text
:
confirmText
,
warning
:
confirmWarning
,
handler
:
/* istanbul ignore next */
()
=>
{
if
(
onConfirm
()
!==
false
)
{
vm
.
close
()
}
},
},
],
})
return
vm
}
/**
* Dynamically create a alert dialog
*
* @param {Object} props
* @return {Dialog}
*/
Dialog
.
alert
=
({
title
=
''
,
icon
=
''
,
iconSvg
=
false
,
content
=
''
,
confirmText
=
'确定'
,
closable
=
false
,
warning
=
false
,
onConfirm
=
noop
,
onShow
=
noop
,
onHide
=
noop
,
})
=>
{
const
vm
=
Generate
({
title
,
icon
,
iconSvg
,
content
,
closable
,
onShow
,
onHide
,
btns
:
[
{
text
:
confirmText
,
warning
,
handler
:
/* istanbul ignore next */
()
=>
{
if
(
onConfirm
()
!==
false
)
{
vm
.
close
()
}
},
},
],
})
return
vm
}
/**
* Close all actived static dialogs
*
* @static
* @return void
*/
Dialog
.
closeAll
=
()
=>
{
instances
.
forEach
(
instance
=>
{
instance
.
close
()
})
}
export
default
Dialog
components/common/dialog/src/main.vue
0 → 100644
View file @
fe9e7eaf
<
template
>
<yun-popup
:value=
"value"
:hasMask=
"hasMask"
position=
"center"
class=
"dialog-content"
@
hide=
"$_onHide"
@
input=
"$_onInput"
>
<yun-div
:width-v=
"606"
:border-r=
"[12]"
bg-color-v=
"#fff"
>
<slot
name=
"header"
></slot>
<yun-div
:font-style=
"[undefined,undefined,undefined,'#666f83','left']"
:show-ske=
"false"
:padding-v=
"[52]"
>
<yun-div
role=
"button"
v-if=
"closable"
:font-style=
"[undefined,undefined,undefined,'#858b9c',undefined]"
:show-ske=
"false"
:position-v=
"[32,32,undefined,undefined]"
:extend-style=
"
{
position:'absolute'
}"
v-tap="close"
>
<yun-icon
name=
"close1"
size=
"32"
/>
</yun-div>
<yun-div
v-if=
"title"
:font-style=
"[40,48,400,'#111a34','center']"
:margin-v=
"[0,0,28]"
:show-ske=
"false"
>
{{
title
}}
</yun-div>
<yun-div
:flex-v=
"['row','center','center']"
v-html=
"content"
:font-style=
"[28,38,400,'#666f83','left']"
></yun-div>
</yun-div>
<yun-div
:flex-v=
"['row','center','center']"
:border-v=
"[2,'solid','#e2e4ea','top']"
>
<template
v-for=
"(btn, index) in btns"
>
<yun-button
:disabled=
"!!btn.disabled"
:border=
"[2,'solid','#e2e4ea','right']"
:border-r=
"[0]"
:size=
"[undefined,100]"
:font-size=
"36"
:color=
"(!btn.disabled && !!btn.warning)?'#ff5257':index+1===btns.length?'#2f86f6':'#666f83'"
bg-color=
"#fff"
:style=
"
{flex:'1 1 0%',fontWeight:500}"
:key="index"
v-tap="()=>$_onClick(btn)"
>
<yun-icon
:name=
"btn.icon"
:size=
"28"
></yun-icon>
{{
btn
.
text
}}
</yun-button>
</
template
>
</yun-div>
</yun-div>
</yun-popup>
</template>
<
script
>
export
default
{
name
:
'yun-dialog'
,
props
:
{
value
:
{
type
:
Boolean
,
default
:
false
,
},
title
:
{
type
:
String
,
default
:
''
,
},
icon
:
{
type
:
String
,
default
:
''
,
},
iconSvg
:
{
type
:
Boolean
,
default
:
false
,
},
closable
:
{
type
:
Boolean
,
default
:
true
,
},
content
:
{
type
:
String
,
default
:
''
,
},
btns
:
{
type
:
Array
,
default
()
{
/* istanbul ignore next */
return
[]
},
},
layout
:
{
type
:
String
,
default
:
'row'
,
},
appendTo
:
{
default
:
()
=>
document
.
body
,
},
hasMask
:
{
type
:
Boolean
,
default
:
true
,
},
maskClosable
:
{
type
:
Boolean
,
default
:
false
,
},
transition
:
{
type
:
String
,
default
:
'md-fade'
,
},
preventScroll
:
{
type
:
Boolean
,
default
:
false
,
},
preventScrollExclude
:
{
type
:
String
,
default
:
''
,
},
},
mounted
()
{
if
(
this
.
appendTo
)
{
this
.
appendTo
.
appendChild
(
this
.
$el
)
}
},
beforeDestroy
()
{
if
(
this
.
appendTo
)
{
this
.
appendTo
.
removeChild
(
this
.
$el
)
}
},
methods
:
{
// MARK: private methods
// MARK: events handler
$_onInput
(
val
)
{
this
.
$emit
(
'input'
,
val
)
},
$_onShow
()
{
this
.
$emit
(
'show'
)
},
$_onHide
()
{
this
.
$emit
(
'hide'
)
},
$_onClick
(
btn
)
{
if
(
btn
.
disabled
||
btn
.
loading
)
{
return
}
if
(
typeof
btn
.
handler
===
'function'
)
{
btn
.
handler
.
call
(
null
,
btn
)
}
else
{
this
.
close
()
}
},
// MARK: public methods
close
()
{
this
.
$emit
(
'input'
,
false
)
},
},
}
</
script
>
<
style
>
</
style
>
components/common/image/src/main.vue
View file @
fe9e7eaf
...
...
@@ -115,14 +115,16 @@
},
checkInView
()
{
clearTimeout
(
this
.
loadTimer
)
if
(
process
.
browser
){
this
.
loadTimer
=
setTimeout
(()
=>
{
let
eleClientTop
=
this
.
$refs
.
el
?
this
.
$refs
.
el
.
getBoundingClientRect
().
top
:
200
;
let
clientHeight
=
document
.
documentElement
.
clientHeight
;
if
(
eleClientTop
<
clientHeight
){
this
.
load
()
}
},
1000
)
}
this
.
loadTimer
=
setTimeout
(()
=>
{
let
eleClientTop
=
this
.
$refs
.
el
.
getBoundingClientRect
().
top
;
let
clientHeight
=
document
.
documentElement
.
clientHeight
;
if
(
eleClientTop
<
clientHeight
){
this
.
load
()
}
},
1000
)
},
load
(
onFinish
=
noop
)
{
...
...
components/common/popup/src/main.vue
View file @
fe9e7eaf
...
...
@@ -16,9 +16,11 @@
bg-color-v=
"rgba(37, 38, 45, .7)"
:extend-style=
"
{
position:'absolute',
zIndex:fullScreenZIndex
+1
,
zIndex:fullScreenZIndex,
pointerEvents:'auto',
}"
v-tap="$_hidePopupBox"
@click="$_hidePopupBox"
v-if="hasMask"
>
...
...
@@ -71,6 +73,7 @@ export default {
type
:
Boolean
,
default
:
true
,
},
type
:
String
,
},
watch
:
{
...
...
@@ -96,7 +99,15 @@ export default {
let
styles
=
{
pointerEvents
:
'auto'
,
position
:
'absolute'
,
transform
:
'translateX(-50%)'
transform
:
'translateX(-50%)'
,
zIndex
:
this
.
type
===
'msg'
?
this
.
fullScreenZIndex
+
1000
:
this
.
fullScreenZIndex
+
1
,
};
return
styles
;
}
else
{
let
styles
=
{
pointerEvents
:
'auto'
,
zIndex
:
this
.
type
===
'msg'
?
this
.
fullScreenZIndex
+
1000
:
this
.
fullScreenZIndex
+
1
,
};
return
styles
;
...
...
components/common/toast/index.js
View file @
fe9e7eaf
...
...
@@ -46,8 +46,6 @@ const Toast =function ({
vm
.
duration
=
duration
vm
.
position
=
position
vm
.
hasMask
=
hasMask
console
.
log
(
vm
)
console
.
log
(
new
Vue
())
vm
.
show
()
return
vm
...
...
components/common/toast/src/main.vue
View file @
fe9e7eaf
...
...
@@ -3,6 +3,7 @@
:value=
"visible"
:hasMask=
"hasMask"
:position=
"position"
type=
"msg"
>
<!-- 自定义slot-->
<yun-div
...
...
components/common/touch/index.js
0 → 100644
View file @
fe9e7eaf
function
TouchEvent
(
el
,
binding
,
type
)
{
var
_this
=
this
;
this
.
obj
=
el
;
this
.
binding
=
binding
;
this
.
touchType
=
type
;
this
.
vueTouchs
=
{
x
:
0
,
y
:
0
};
this
.
vueMoves
=
true
;
this
.
vueLeave
=
true
;
this
.
vueCallBack
=
typeof
(
binding
.
value
)
===
"object"
?
binding
.
value
:
binding
.
value
;
this
.
obj
.
addEventListener
(
'touchstart'
,
function
(
e
)
{
_this
.
start
(
e
);
},
false
);
this
.
obj
.
addEventListener
(
"touchend"
,
function
(
e
){
_this
.
end
(
e
);
},
false
);
this
.
obj
.
addEventListener
(
"touchmove"
,
function
(
e
){
_this
.
move
(
e
);
},
false
);
}
TouchEvent
.
prototype
=
{
start
:
function
(
e
)
{
this
.
vueMoves
=
true
;
this
.
vueLeave
=
true
;
this
.
longTouch
=
true
;
this
.
vueTouches
=
{
x
:
e
.
changedTouches
[
0
].
pageX
,
y
:
e
.
changedTouches
[
0
].
pageY
};
this
.
time
=
setTimeout
(
function
(){
if
(
this
.
vueLeave
&&
this
.
vueMoves
){
this
.
touchType
==
"longtap"
&&
this
.
vueCallBack
(
this
.
binding
.
value
,
e
);
this
.
longTouch
=
false
;
};
}.
bind
(
this
),
1000
);
},
end
:
function
(
e
)
{
var
disX
=
e
.
changedTouches
[
0
]?
e
.
changedTouches
[
0
].
pageX
-
this
.
vueTouches
.
x
:
0
;
var
disY
=
e
.
changedTouches
[
0
]?
e
.
changedTouches
[
0
].
pageY
-
this
.
vueTouches
.
y
:
0
;
clearTimeout
(
this
.
time
);
if
(
Math
.
abs
(
disX
)
>
10
||
Math
.
abs
(
disY
)
>
100
)
{
//当横向位移大于10,纵向位移大于100,则判定为滑动事件
this
.
touchType
==
"swipe"
&&
this
.
vueCallBack
(
this
.
binding
.
value
,
e
);
//若为滑动事件则返回
if
(
Math
.
abs
(
disX
)
>
Math
.
abs
(
disY
)){
//判断是横向滑动还是纵向滑动
if
(
disX
>
10
){
this
.
touchType
==
"swiperight"
&&
this
.
vueCallBack
(
this
.
binding
.
value
,
e
);
//右滑
};
if
(
disX
<-
10
){
this
.
touchType
==
"swipeleft"
&&
this
.
vueCallBack
(
this
.
binding
.
value
,
e
);
//左滑
};
}
else
{
if
(
disY
>
10
){
this
.
touchType
==
"swipedown"
&&
this
.
vueCallBack
(
this
.
binding
.
value
,
e
);
//下滑
};
if
(
disY
<-
10
){
this
.
touchType
==
"swipeup"
&&
this
.
vueCallBack
(
this
.
binding
.
value
,
e
);
//上滑
};
};
}
else
{
if
(
this
.
longTouch
&&
this
.
vueMoves
){
this
.
touchType
==
"tap"
&&
this
.
vueCallBack
(
this
.
binding
.
value
,
e
);
this
.
vueLeave
=
false
};
}
},
move
:
function
(
e
){
//监听touchmove事件
this
.
vueMoves
=
false
;
}
}
export
default
TouchEvent
components/moblie/pageHeader.vue
View file @
fe9e7eaf
...
...
@@ -19,7 +19,11 @@
:width-v=
"699"
>
<!--logo-->
<yun-div
>
<yun-div
:font-style=
"[10]"
:ske-h=
"36"
:ske-w=
"153"
>
<embed
:src=
"BCLogo"
:width=
"153*heightRate"
:height=
"36*heightRate"
type=
"image/svg+xml"
pluginspage=
"http://www.adobe.com/svg/viewer/install/"
/>
...
...
@@ -39,6 +43,8 @@
<yun-div
:height-v=
"56"
:border-r=
"[28]"
:ske-h=
"56"
:ske-w=
"56"
:font-style=
"[28,56,500,'#00AAE6','center']"
bg-color-v=
"#F4F8FA"
>
...
...
@@ -58,6 +64,8 @@
:width-v=
"56"
:height-v=
"56"
:border-r=
"[28]"
:ske-h=
"56"
:ske-w=
"56"
:font-style=
"[28,56,500,'#00AAE6','center']"
bg-color-v=
"#F4F8FA"
:border-v=
"[1,'solid',commonReturnPrimaryColor(0.3)]"
...
...
@@ -69,6 +77,8 @@
:width-v=
"56"
:height-v=
"56"
:border-r=
"[28]"
:ske-h=
"56"
:ske-w=
"56"
:font-style=
"[28,56,500,'#00AAE6','center']"
bg-color-v=
"#F4F8FA"
:border-v=
"[1,'solid',commonReturnPrimaryColor(0.3)]"
...
...
components/moblie/projectCard.vue
View file @
fe9e7eaf
<
template
>
<yun-slider
v-if=
"showCard"
>
<yun-div
:width-v=
"704"
...
...
@@ -20,7 +21,7 @@
:extend-style=
"
{
verticalAlign:'middle'
}"
>
<span>
>
<span
>
云里云外开源社区
</span>
...
...
@@ -88,6 +89,7 @@
:flex-v=
"['row','flex-end','flex-start']"
:margin-v=
"[0,0,0,20]"
noFlexShrink
>
<yun-img
:ske-w=
"120"
:ske-h=
"120"
:border-r=
"[6]"
></yun-img>
</yun-div>
...
...
@@ -95,16 +97,18 @@
</yun-div>
<!-- drawer -->
<yun-div
width-v=
"100%"
height-v=
"100%"
bg-color-v=
"#FF7474"
:flex-v=
"['row','center','center']"
slot=
"drawer"
@
click
.
native=
"deleteItem"
>
<yun-icon
name=
"delete"
color=
"#fff"
:size=
"30"
></yun-icon>
</yun-div>
<yun-button
:size=
"['100%','100%']"
bg-color=
"#FF7474"
slot=
"drawer"
v-tap=
"deleteItem"
>
<yun-icon
name=
"delete"
color=
"#fff"
:size=
"30"
></yun-icon>
</yun-button>
</yun-slider
>
</
template
>
...
...
@@ -129,7 +133,7 @@
cardView
:
''
,
priority
:
0
,
praiseNum
:
0
,
show
Drawer
:
fals
e
,
show
Card
:
tru
e
,
}
},
props
:{
...
...
@@ -147,9 +151,18 @@
},
deleteItem
(){
this
.
$message
({
type
:
'success'
,
message
:
'删除成功!'
this
.
$messageBox
.
confirm
({
title
:
'提示'
,
content
:
'确认删除信息?'
,
onConfirm
:
()
=>
{
this
.
showCard
=
false
;
this
.
$message
({
type
:
'success'
,
message
:
'删除成功!'
,
position
:
'top'
});
},
})
}
}
...
...
plugins/nossr.js
View file @
fe9e7eaf
import
VueTouch
from
'vue-touch'
import
VueTouch
from
'vue-touch'
;
import
TouchEvent
from
'../components/common/touch'
import
YunButton
from
'../components/common/button'
;
import
YunPopup
from
'../components/common/popup'
;
import
Toast
from
'../components/common/toast'
;
import
YunDialog
from
'../components/common/dialog'
;
import
YunSlider
from
'../components/common/slideBox'
;
import
YunIcon
from
'../components/common/icon'
;
import
YunImg
from
'../components/common/image'
;
...
...
@@ -11,9 +13,10 @@ import Vue from 'vue';
Vue
.
prototype
.
$message
=
Toast
Vue
.
prototype
.
$messageBox
=
YunDialog
Vue
.
use
(
YunAdaptableCon
)
Vue
.
use
(
YunDialog
)
Vue
.
use
(
YunPopup
)
Vue
.
use
(
YunButton
)
Vue
.
use
(
YunIcon
)
...
...
@@ -25,3 +28,40 @@ Vue.use(VueTouch,{name:'v-touch'});
VueTouch
.
config
.
swipe
=
{
threshold
:
30
//手指左右滑动距离
}
Vue
.
directive
(
"tap"
,{
//点击事件
bind
:
function
(
el
,
binding
){
new
TouchEvent
(
el
,
binding
,
"tap"
);
}
});
Vue
.
directive
(
"swipe"
,{
//滑动事件
bind
:
function
(
el
,
binding
){
new
TouchEvent
(
el
,
binding
,
"swipe"
);
}
});
Vue
.
directive
(
"swipeleft"
,{
//左滑事件
bind
:
function
(
el
,
binding
){
new
TouchEvent
(
el
,
binding
,
"swipeleft"
);
}
});
Vue
.
directive
(
"swiperight"
,{
//右滑事件
bind
:
function
(
el
,
binding
){
new
TouchEvent
(
el
,
binding
,
"swiperight"
);
}
});
Vue
.
directive
(
"swipedown"
,{
//下滑事件
bind
:
function
(
el
,
binding
){
new
TouchEvent
(
el
,
binding
,
"swipedown"
);
}
});
Vue
.
directive
(
"swipeup"
,{
//上滑事件
bind
:
function
(
el
,
binding
){
new
TouchEvent
(
el
,
binding
,
"swipeup"
);
}
});
Vue
.
directive
(
"longtap"
,{
//长按事件
bind
:
function
(
el
,
binding
){
new
TouchEvent
(
el
,
binding
,
"longtap"
);
}
});
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