Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
lzb_79
uni-app
提交
a9b9b9a5
U
uni-app
项目概览
lzb_79
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
a9b9b9a5
编写于
6月 10, 2021
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
test: ssr
上级
7c7201ec
变更
17
隐藏空白更改
内联
并排
Showing
17 changed file
with
1409 addition
and
0 deletion
+1409
-0
packages/playground/ssr/src/components/ssr-button/ssr-button.vue
...s/playground/ssr/src/components/ssr-button/ssr-button.vue
+3
-0
packages/playground/ssr/src/components/ssr-canvas/ssr-canvas.vue
...s/playground/ssr/src/components/ssr-canvas/ssr-canvas.vue
+281
-0
packages/playground/ssr/src/components/ssr-editor/ssr-editor.vue
...s/playground/ssr/src/components/ssr-editor/ssr-editor.vue
+44
-0
packages/playground/ssr/src/components/ssr-form/ssr-form.vue
packages/playground/ssr/src/components/ssr-form/ssr-form.vue
+129
-0
packages/playground/ssr/src/components/ssr-label/ssr-label.vue
...ges/playground/ssr/src/components/ssr-label/ssr-label.vue
+148
-0
packages/playground/ssr/src/components/ssr-map/ssr-map.vue
packages/playground/ssr/src/components/ssr-map/ssr-map.vue
+65
-0
packages/playground/ssr/src/components/ssr-navigator/navigate/navigate.vue
...nd/ssr/src/components/ssr-navigator/navigate/navigate.vue
+13
-0
packages/playground/ssr/src/components/ssr-navigator/redirect/redirect.vue
...nd/ssr/src/components/ssr-navigator/redirect/redirect.vue
+13
-0
packages/playground/ssr/src/components/ssr-navigator/ssr-navigator.vue
...ground/ssr/src/components/ssr-navigator/ssr-navigator.vue
+38
-0
packages/playground/ssr/src/components/ssr-picker-view/ssr-picker-view.vue
...nd/ssr/src/components/ssr-picker-view/ssr-picker-view.vue
+98
-0
packages/playground/ssr/src/components/ssr-picker/ssr-picker.vue
...s/playground/ssr/src/components/ssr-picker/ssr-picker.vue
+211
-0
packages/playground/ssr/src/components/ssr-rich-text/ssr-rich-text.vue
...ground/ssr/src/components/ssr-rich-text/ssr-rich-text.vue
+54
-0
packages/playground/ssr/src/components/ssr-slider/ssr-slider.vue
...s/playground/ssr/src/components/ssr-slider/ssr-slider.vue
+64
-0
packages/playground/ssr/src/components/ssr-textarea/ssr-textarea.vue
...ayground/ssr/src/components/ssr-textarea/ssr-textarea.vue
+36
-0
packages/playground/ssr/src/components/ssr-video/ssr-video.vue
...ges/playground/ssr/src/components/ssr-video/ssr-video.vue
+145
-0
packages/playground/ssr/src/components/ssr-webview/ssr-webview.vue
...playground/ssr/src/components/ssr-webview/ssr-webview.vue
+52
-0
packages/playground/ssr/src/pages/index/index.vue
packages/playground/ssr/src/pages/index/index.vue
+15
-0
未找到文件。
packages/playground/ssr/src/components/ssr-button/ssr-button.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<button
type=
"mini"
>
简单的button
</button>
</
template
>
\ No newline at end of file
packages/playground/ssr/src/components/ssr-canvas/ssr-canvas.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
<!--
<view
class=
"title"
>
请在下面输入签名:
</view>
-->
<button
@
click=
"canvasId = 'mycanvas_id'"
>
change canvas-id
</button>
<canvas
ref=
"canvas"
class=
"mycanvas"
:canvas-id=
"canvasId"
:disable-scroll=
"true"
:data-width=
"canvasWidth"
:data-height=
"canvasWidth"
@
touchstart=
"touchstart"
@
touchmove=
"touchmove"
@
touchend=
"touchend"
@
longtap=
"longtap"
@
error=
"error"
></canvas>
<button
v-for=
"(item, index) in ctxMethods"
:key=
"index"
@
click=
"handler(item)"
>
{{
item
}}
</button>
<view
class=
"footer"
>
<view
class=
"left"
@
click=
"finish"
>
保存到相册
</view>
<view
class=
"right"
@
click=
"clear"
>
清除
</view>
</view>
</view>
</
template
>
<
script
>
import
{
ref
}
from
"
vue
"
;
var
x
=
20
;
var
y
=
20
;
export
default
{
data
()
{
return
{
canvasWidth
:
0
,
ctx
:
""
,
//绘图图像
points
:
[],
//路径点集合
ctxMethods
:
[
"
getImageData
"
,
"
putImageData
"
,
"
toTempFilePath
"
],
canvasId
:
'
mycanvas
'
};
},
mounted
()
{
/* console.log(
'uni.createCanvasContext("mycanvas", this); :>> ',
uni.createCanvasContext("mycanvas", this)
); */
const
canvas
=
document
.
querySelector
(
"
.mycanvas>canvas
"
);
this
.
canvasWidth
=
canvas
.
getBoundingClientRect
().
width
;
// this.ctx = canvas.getContext("2d"); //创建绘图对象
this
.
ctx
=
uni
.
createCanvasContext
(
"
mycanvas
"
,
this
);
//创建绘图对象
//设置画笔样式
this
.
ctx
.
lineWidth
=
4
;
this
.
ctx
.
lineCap
=
"
round
"
;
this
.
ctx
.
lineJoin
=
"
round
"
;
/* this.ctx.fillStyle = "green";
this.ctx.fillRect(10, 10, 150, 100);
this.ctx.draw(); */
this
.
ctx
.
drawImage
(
'
/static/logo.png
'
,
0
,
0
,
150
,
100
)
this
.
ctx
.
draw
();
},
methods
:
{
//触摸开始,获取到起点
touchstart
:
function
(
e
)
{
console
.
log
(
"
🚀 ~ file: ssr-canvas.vue ~ line 79 ~ onReady ~ this.ctx
"
,
this
.
ctx
)
console
.
log
(
"
🚀 ~ file: ssr-canvas.vue ~ line 79 ~ onReady ~ this.ctx
"
,
this
.
ctx
)
console
.
log
(
"
🚀 ~ file: ssr-canvas.vue ~ line 79 ~ onReady ~ this.ctx
"
,
this
.
ctx
)
console
.
log
(
"
🚀 ~ file: ssr-canvas.vue ~ line 79 ~ onReady ~ this.ctx
"
,
this
.
ctx
)
console
.
log
(
"
🚀 ~ file: ssr-canvas.vue ~ line 79 ~ onReady ~ this.ctx
"
,
this
.
ctx
)
let
startX
=
e
.
changedTouches
[
0
].
x
;
let
startY
=
e
.
changedTouches
[
0
].
y
;
let
startPoint
=
{
X
:
startX
,
Y
:
startY
,
};
this
.
points
.
push
(
startPoint
);
//每次触摸开始,开启新的路径
this
.
ctx
.
beginPath
();
},
//触摸移动,获取到路径点
touchmove
:
function
(
e
)
{
let
moveX
=
e
.
changedTouches
[
0
].
x
;
let
moveY
=
e
.
changedTouches
[
0
].
y
;
let
movePoint
=
{
X
:
moveX
,
Y
:
moveY
,
};
this
.
points
.
push
(
movePoint
);
//存点
let
len
=
this
.
points
.
length
;
if
(
len
>=
2
)
{
this
.
draw
();
//绘制路径
}
},
// 触摸结束,将未绘制的点清空防止对后续路径产生干扰
touchend
:
function
(
e
)
{
this
.
points
=
[];
},
/* ***********************************************
# 绘制笔迹
# 1.为保证笔迹实时显示,必须在移动的同时绘制笔迹
# 2.为保证笔迹连续,每次从路径集合中区两个点作为起点(moveTo)和终点(lineTo)
# 3.将上一次的终点作为下一次绘制的起点(即清除第一个点)
************************************************ */
draw
:
function
()
{
let
point1
=
this
.
points
[
0
];
let
point2
=
this
.
points
[
1
];
this
.
points
.
shift
();
this
.
ctx
.
moveTo
(
point1
.
X
,
point1
.
Y
);
this
.
ctx
.
lineTo
(
point2
.
X
,
point2
.
Y
);
this
.
ctx
.
stroke
();
this
.
ctx
.
draw
(
true
);
},
//清空画布
clear
:
function
()
{
let
that
=
this
;
uni
.
getSystemInfo
({
success
:
function
(
res
)
{
let
canvasw
=
res
.
windowWidth
;
let
canvash
=
res
.
windowHeight
;
that
.
ctx
.
clearRect
(
0
,
0
,
canvasw
,
canvash
);
that
.
ctx
.
draw
(
true
);
},
});
},
//完成绘画并保存到本地
finish
:
function
()
{
uni
.
canvasToTempFilePath
({
canvasId
:
"
mycanvas
"
,
success
:
function
(
res
)
{
console
.
log
(
res
);
/* let path = res.tempFilePath;
uni.saveImageToPhotosAlbum({
filePath: path,
}); */
},
});
},
longtap
()
{
console
.
log
(
"
longtap
"
);
},
error
()
{
console
.
log
(
"
error
"
);
},
handler
(
fn
)
{
let
tempData
=
[];
switch
(
fn
)
{
case
"
getImageData
"
:
uni
.
canvasGetImageData
({
canvasId
:
"
mycanvas
"
,
x
:
10
,
y
:
10
,
width
:
150
,
height
:
100
,
success
(
res
)
{
console
.
log
(
"
canvasGetImageData :>>
"
,
res
);
},
});
/* tempData = this.canvas.getImageData({
x: 10,
y: 10,
width: 150,
height: 100,
}).data;
console.log("this.canvas.getImageData :>> ", tempData); */
break
;
case
"
putImageData
"
:
for
(
let
index
=
0
;
index
<
100
;
index
++
)
{
uni
.
canvasPutImageData
({
canvasId
:
"
mycanvas
"
,
x
:
170
,
y
:
index
,
width
:
1
,
data
:
new
Uint8ClampedArray
([
255
,
0
,
0
,
255
]),
success
(
res
)
{
console
.
log
(
"
canvasPutImageData :>>
"
,
res
);
},
});
/* this.canvas.putImageData({
x: 170,
y: index,
width: 1,
data: new Uint8ClampedArray([255, 0, 0, 255]),
}); */
}
break
;
case
"
toTempFilePath
"
:
/* console.log(
"this.canvas.toTempFilePath :>> ",
this.canvas.toTempFilePath({
x: 10,
y: 10,
width: 150,
height: 100,
destWidth: 150,
destHeight: 100,
})
); */
uni
.
canvasToTempFilePath
({
canvasId
:
"
mycanvas
"
,
x
:
10
,
y
:
10
,
width
:
150
,
height
:
100
,
destWidth
:
150
,
destHeight
:
100
,
success
(
res
)
{
console
.
log
(
"
canvasToTempFilePath :>>
"
,
res
);
},
});
break
;
default
:
break
;
}
},
},
setup
()
{
const
canvas
=
ref
(
null
);
return
{
canvas
,
};
},
};
</
script
>
<
style
>
.mycanvas
{
width
:
100%
;
height
:
calc
(
100vh
-
444
rpx
);
background-color
:
#ececec
;
}
.footer
{
font-size
:
16px
;
height
:
150
rpx
;
display
:
flex
;
justify-content
:
space-around
;
align-items
:
center
;
}
.left
,
.right
{
line-height
:
100
rpx
;
height
:
100
rpx
;
width
:
250
rpx
;
text-align
:
center
;
font-weight
:
bold
;
color
:
white
;
border-radius
:
5
rpx
;
}
.left
{
background
:
#007aff
;
}
.right
{
background
:
orange
;
}
</
style
>
packages/playground/ssr/src/components/ssr-editor/ssr-editor.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
<editor
id=
"editorId"
@
ready=
"onEditorReady"
@
input=
"bingEditorInput"
></editor>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
editorCtx
:
null
}
},
methods
:
{
onEditorReady
:
function
()
{
uni
.
createSelectorQuery
()
.
select
(
'
#editorId
'
)
.
context
(
res
=>
{
console
.
log
(
res
.
context
);
this
.
editorCtx
=
res
.
context
;
this
.
insertImageFun
();
})
.
exec
();
},
insertImageFun
:
function
()
{
this
.
editorCtx
.
insertImage
({
src
:
"
/static/logo.png
"
,
width
:
'
25px
'
,
height
:
'
25px
'
});
},
bingEditorInput
:
function
(
e
)
{
console
.
log
(
"
bingEditorInput()
"
)
}
}
}
</
script
>
<
style
>
</
style
>
packages/playground/ssr/src/components/ssr-form/ssr-form.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
<view
class=
"uni-padding-wrap uni-common-mt"
>
<form
@
submit=
"formSubmit"
@
reset=
"formReset"
>
<view
class=
"uni-form-item uni-column"
>
<view
class=
"title"
>
姓名
</view>
<input
class=
"uni-input"
name=
"nickname"
placeholder=
"请输入姓名"
/>
</view>
<view
class=
"uni-form-item uni-column"
>
<view
class=
"title"
>
性别
</view>
<radio-group
name=
"gender"
>
<label>
<radio
value=
"男"
checked
/><text>
男
</text>
</label>
<label>
<radio
value=
"女"
/>
<text>
女
</text>
</label>
</radio-group>
</view>
<view
class=
"uni-form-item uni-column"
>
<view
class=
"title"
>
爱好
</view>
<checkbox-group
name=
"loves"
>
<label>
<checkbox
value=
"读书"
/><text>
读书
</text>
</label>
<label>
<checkbox
value=
"写字"
checked
/><text>
写字
</text>
</label>
</checkbox-group>
</view>
<view
class=
"uni-form-item uni-column"
>
<view
class=
"title"
>
年龄
</view>
<slider
value=
"30"
name=
"age"
min=
"20"
max=
"50"
step=
"5"
disabled
show-value
></slider>
</view>
<view
class=
"uni-form-item uni-column"
>
<view
class=
"title"
>
开启
</view>
<switch
name=
"switch"
checked
color=
"#FFCC33"
/>
</view>
<view
class=
"uni-form-item uni-column"
>
<view
class=
"title"
>
时间
</view>
<view>
<picker
name=
"time"
mode=
"time"
v-model:value=
"time"
start=
"09:01"
end=
"21:01"
@
change=
"bindTimeChange"
>
<view
class=
"uni-input"
>
{{
time
}}
</view>
</picker>
</view>
</view>
<view
class=
"uni-btn-v"
>
<button
form-type=
"submit"
>
Submit
</button>
<button
type=
"default"
form-type=
"reset"
>
Reset
</button>
</view>
</form>
</view>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
time
:
"
12:01
"
,
};
},
methods
:
{
formSubmit
:
function
(
e
)
{
var
rule
=
[
{
name
:
"
nickname
"
,
checkType
:
"
string
"
,
checkRule
:
"
1,3
"
,
errorMsg
:
"
姓名应为1-3个字符
"
,
},
{
name
:
"
gender
"
,
checkType
:
"
in
"
,
checkRule
:
"
男,女
"
,
errorMsg
:
"
请选择性别
"
},
{
name
:
"
loves
"
,
checkType
:
"
notnull
"
,
checkRule
:
""
,
errorMsg
:
"
请选择爱好
"
},
];
},
bindTimeChange
:
function
(
e
)
{
this
.
time
=
e
.
detail
.
value
;
},
formReset
:
function
(
e
)
{
console
.
log
(
"
清空数据
"
);
},
},
};
</
script
>
<
style
>
.uni-form-item
.title
{
padding
:
20
rpx
0
;
}
</
style
>
packages/playground/ssr/src/components/ssr-label/ssr-label.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
<view
class=
"uni-common-mt"
>
<view
class=
"uni-form-item uni-column"
>
<view
class=
"title"
>
表单组件在label内
</view>
<checkbox-group
class=
"uni-list"
@
change=
"checkboxChange"
>
<label
class=
"uni-list-cell uni-list-cell-pd"
v-for=
"item in checkboxItems"
:key=
"item.name"
>
<view>
<checkbox
:value=
"item.name"
:checked=
"item.checked"
></checkbox>
</view>
<view>
{{
item
.
value
}}
</view>
</label>
</checkbox-group>
</view>
<view
class=
"uni-form-item uni-column"
>
<view
class=
"title"
>
label用for标识表单组件
</view>
<radio-group
class=
"uni-list"
@
change=
"radioChange"
>
<view
class=
"uni-list-cell uni-list-cell-pd"
v-for=
"(item, index) in radioItems"
:key=
"index"
>
<view>
<radio
:id=
"item.name"
:value=
"item.name"
:checked=
"item.checked"
></radio>
</view>
<label
class=
"label-2-text"
:for=
"item.name"
>
<text>
{{
item
.
value
}}
</text>
</label>
</view>
</radio-group>
</view>
<view
class=
"uni-form-item uni-column"
>
<view
class=
"title"
>
label内有多个时选中第一个
</view>
<checkbox-group
class=
"uni-list"
@
change=
"checkboxChange"
>
<label
class=
"label-3"
@
click=
"labelClick"
>
<view
class=
"uni-list-cell uni-list-cell-pd"
>
<checkbox
v-if=
"showOne"
value=
"one"
class=
"checkbox-3"
>
选项一
</checkbox>
</view>
<view
class=
"uni-list-cell uni-list-cell-pd"
>
<checkbox
value=
"two"
class=
"checkbox-3"
>
选项二
</checkbox>
</view>
<view
class=
"uni-link uni-center"
style=
"margin-top: 20rpx"
>
点击该label下的文字默认选中第一个checkbox
</view>
</label>
</checkbox-group>
</view>
</view>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
title
:
"
label
"
,
checkboxItems
:
[
{
name
:
"
USA
"
,
value
:
"
美国
"
,
},
{
name
:
"
CHN
"
,
value
:
"
中国
"
,
checked
:
"
true
"
,
},
],
radioItems
:
[
{
name
:
"
USA
"
,
value
:
"
美国
"
,
},
{
name
:
"
CHN
"
,
value
:
"
中国
"
,
checked
:
"
true
"
,
},
],
hidden
:
false
,
showOne
:
true
,
};
},
methods
:
{
checkboxChange
:
function
(
e
)
{
var
checked
=
e
.
detail
.
value
;
console
.
log
(
checked
);
},
radioChange
:
function
(
e
)
{
var
checked
=
e
.
detail
.
value
;
console
.
log
(
checked
);
},
labelClick
()
{
setTimeout
(()
=>
{
this
.
showOne
=
false
;
},
1000
);
},
},
};
</
script
>
<
style
>
.uni-list-cell
{
justify-content
:
flex-start
;
}
.uni-list
.label-3
{
padding
:
0
;
}
.label-2-text
{
flex
:
1
;
}
</
style
>
packages/playground/ssr/src/components/ssr-map/ssr-map.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
<view
class=
"cover-content"
v-if=
"showMap"
>
<!-- #ifndef APP-PLUS -->
<map></map>
<cover-view
class=
"cover-view"
>
简单的cover-view
</cover-view>
<!-- #ifndef MP-QQ -->
<cover-image
class=
"cover-image"
src=
"/static/logo.png"
></cover-image>
<!-- #endif -->
<!-- #endif -->
</view>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
showMap
:
false
,
};
},
onLoad
()
{
// #ifndef APP-PLUS || MP-BAIDU
this
.
showMap
=
true
;
// #endif
},
};
</
script
>
<
style
>
map
{
width
:
750
rpx
;
width
:
100%
;
height
:
600px
;
}
.video
{
width
:
100%
;
}
.cover-content
{
position
:
relative
;
}
.cover-view
{
position
:
absolute
;
left
:
5px
;
top
:
5px
;
width
:
375
rpx
;
text-align
:
center
;
background-color
:
#dddddd
;
}
.cover-image
{
position
:
absolute
;
left
:
0
;
top
:
0
;
right
:
0
;
bottom
:
0
;
margin
:
auto
;
width
:
96px
;
height
:
96px
;
}
</
style
>
packages/playground/ssr/src/components/ssr-navigator/navigate/navigate.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
title
:
'
新建的页面
'
}
}
}
</
script
>
packages/playground/ssr/src/components/ssr-navigator/redirect/redirect.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
title
:
'
当前页
'
}
}
}
</
script
>
packages/playground/ssr/src/components/ssr-navigator/ssr-navigator.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
<view
class=
"uni-padding-wrap uni-common-mt"
>
<view
class=
"uni-btn-v"
>
<navigator
url=
"navigate/navigate?title=navigate"
hover-class=
"navigator-hover"
>
<button
type=
"default"
>
跳转到新页面
</button>
</navigator>
<navigator
url=
"redirect/redirect?title=redirect"
open-type=
"redirect"
hover-class=
"other-navigator-hover"
>
<button
type=
"default"
>
在当前页打开
</button>
</navigator>
<navigator
url=
"/pages/tabBar/extUI/extUI"
open-type=
"switchTab"
hover-class=
"other-navigator-hover"
>
<button
type=
"default"
>
跳转tab页面
</button>
</navigator>
</view>
</view>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
title
:
'
navigator
'
}
}
}
</
script
>
packages/playground/ssr/src/components/ssr-picker-view/ssr-picker-view.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
<view
class=
"uni-padding-wrap"
>
<view
class=
"uni-title"
>
日期:
{{
year
}}
年
{{
month
}}
月
{{
day
}}
日
</view>
</view>
<picker-view
v-if=
"visible"
:indicator-style=
"indicatorStyle"
:value=
"value"
@
change=
"bindChange"
>
<picker-view-column>
<view
class=
"item"
v-for=
"(item, index) in years"
:key=
"index"
>
{{
item
}}
年
</view>
</picker-view-column>
<picker-view-column>
<view
class=
"item"
v-for=
"(item, index) in months"
:key=
"index"
>
{{
item
}}
月
</view>
</picker-view-column>
<picker-view-column>
<view
class=
"item"
v-for=
"(item, index) in days"
:key=
"index"
>
{{
item
}}
日
</view>
</picker-view-column>
</picker-view>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
const
date
=
new
Date
();
const
years
=
[];
const
year
=
date
.
getFullYear
();
const
months
=
[];
const
month
=
date
.
getMonth
()
+
1
;
const
days
=
[];
const
day
=
date
.
getDate
();
for
(
let
i
=
1990
;
i
<=
date
.
getFullYear
();
i
++
)
{
years
.
push
(
i
);
}
for
(
let
i
=
1
;
i
<=
12
;
i
++
)
{
months
.
push
(
i
);
}
for
(
let
i
=
1
;
i
<=
31
;
i
++
)
{
days
.
push
(
i
);
}
return
{
title
:
"
picker-view
"
,
years
,
year
,
months
,
month
,
days
,
day
,
value
:
[
9999
,
month
-
1
,
day
-
1
],
/**
* 解决动态设置indicator-style不生效的问题
*/
visible
:
true
,
// indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
indicatorStyle
:
`height: 50px;`
,
};
},
methods
:
{
bindChange
(
e
)
{
const
val
=
e
.
detail
.
value
;
this
.
year
=
this
.
years
[
val
[
0
]];
this
.
month
=
this
.
months
[
val
[
1
]];
this
.
day
=
this
.
days
[
val
[
2
]];
},
},
};
</
script
>
<
style
>
picker-view
{
width
:
100%
;
height
:
600
rpx
;
margin-top
:
20
rpx
;
}
.item
{
line-height
:
100
rpx
;
text-align
:
center
;
}
</
style
>
packages/playground/ssr/src/components/ssr-picker/ssr-picker.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
<view
class=
"uni-title uni-common-pl"
>
普通选择器
</view>
<view
class=
"uni-list"
>
<view
class=
"uni-list-cell"
>
<view
class=
"uni-list-cell-left"
>
当前选择
</view>
<view
class=
"uni-list-cell-db"
>
<picker
@
change=
"bindPickerChange"
:value=
"index"
:range=
"array"
range-key=
"name"
>
<view
class=
"uni-input"
>
{{
array
[
index
].
name
}}
</view>
</picker>
</view>
</view>
</view>
<!-- #ifdef MP-ALIPAY -->
<view
class=
"uni-title uni-common-pl"
>
多列选择器
</view>
<view
class=
"uni-list"
>
<view
class=
"uni-list-cell"
>
<view
class=
"uni-list-cell-left"
>
当前选择
</view>
<view
class=
"uni-list-cell-db"
>
<picker
mode=
"multiSelector"
@
columnchange=
"bindMultiPickerColumnChange"
:value=
"multiIndex"
:range=
"multiArray"
>
<view
class=
"uni-input"
>
{{
multiArray
[
0
][
multiIndex
[
0
]]
}}
,
{{
multiArray
[
1
][
multiIndex
[
1
]]
}}
,
{{
multiArray
[
2
][
multiIndex
[
2
]]
}}
</view>
</picker>
</view>
</view>
</view>
<!-- #endif -->
<!--
<view
class=
"uni-title uni-common-pl"
>
时间选择器
</view>
<view
class=
"uni-list"
>
<view
class=
"uni-list-cell"
>
<view
class=
"uni-list-cell-left"
>
当前选择
</view>
<view
class=
"uni-list-cell-db"
>
<picker
mode=
"time"
:value=
"time"
start=
"09:01"
end=
"21:01"
@
change=
"bindTimeChange"
>
<view
class=
"uni-input"
>
{{
time
}}
</view>
</picker>
</view>
</view>
</view>
<view
class=
"uni-picker-tips"
>
注:选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中
</view>
<view
class=
"uni-title uni-common-pl"
>
日期选择器
</view>
<view
class=
"uni-list"
>
<view
class=
"uni-list-cell"
>
<view
class=
"uni-list-cell-left"
>
当前选择
</view>
<view
class=
"uni-list-cell-db"
>
<picker
mode=
"date"
:value=
"date"
:start=
"startDate"
:end=
"endDate"
@
change=
"bindDateChange"
>
<view
class=
"uni-input"
>
{{
date
}}
</view>
</picker>
</view>
</view>
</view>
-->
<view
class=
"uni-picker-tips"
>
注:选择当前时间 ±10 年之间的时间, 不在区间内不能选中
</view>
</view>
</
template
>
<
script
>
function
getDate
(
type
)
{
const
date
=
new
Date
();
let
year
=
date
.
getFullYear
();
let
month
=
date
.
getMonth
()
+
1
;
let
day
=
date
.
getDate
();
if
(
type
===
"
start
"
)
{
year
=
year
-
10
;
}
else
if
(
type
===
"
end
"
)
{
year
=
year
+
10
;
}
month
=
month
>
9
?
month
:
"
0
"
+
month
;
day
=
day
>
9
?
day
:
"
0
"
+
day
;
return
`
${
year
}
-
${
month
}
-
${
day
}
`
;
}
export
default
{
data
()
{
return
{
title
:
"
picker
"
,
array
:
[{
name
:
"
中国
"
},
{
name
:
"
美国
"
},
{
name
:
"
巴西
"
},
{
name
:
"
日本
"
}],
index
:
0
,
multiArray
:
[
[
"
亚洲
"
,
"
欧洲
"
],
[
"
中国
"
,
"
日本
"
],
[
"
北京
"
,
"
上海
"
,
"
广州
"
],
],
multiIndex
:
[
0
,
0
,
0
],
date
:
getDate
({
format
:
true
,
}),
startDate
:
getDate
(
"
start
"
),
endDate
:
getDate
(
"
end
"
),
time
:
"
12:01
"
,
};
},
methods
:
{
bindPickerChange
:
function
(
e
)
{
console
.
log
(
"
picker发送选择改变,携带值为:
"
+
e
.
detail
.
value
);
// this.index = e.detail.value;
},
bindMultiPickerColumnChange
:
function
(
e
)
{
console
.
log
(
"
修改的列为:
"
+
e
.
detail
.
column
+
"
,值为:
"
+
e
.
detail
.
value
);
this
.
multiIndex
[
e
.
detail
.
column
]
=
e
.
detail
.
value
;
switch
(
e
.
detail
.
column
)
{
case
0
:
//拖动第1列
switch
(
this
.
multiIndex
[
0
])
{
case
0
:
this
.
multiArray
[
1
]
=
[
"
中国
"
,
"
日本
"
];
this
.
multiArray
[
2
]
=
[
"
北京
"
,
"
上海
"
,
"
广州
"
];
break
;
case
1
:
this
.
multiArray
[
1
]
=
[
"
英国
"
,
"
法国
"
];
this
.
multiArray
[
2
]
=
[
"
伦敦
"
,
"
曼彻斯特
"
];
break
;
}
this
.
multiIndex
.
splice
(
1
,
1
,
0
);
this
.
multiIndex
.
splice
(
2
,
1
,
0
);
break
;
case
1
:
//拖动第2列
switch
(
this
.
multiIndex
[
0
]
//判断第一列是什么
)
{
case
0
:
switch
(
this
.
multiIndex
[
1
])
{
case
0
:
this
.
multiArray
[
2
]
=
[
"
北京
"
,
"
上海
"
,
"
广州
"
];
break
;
case
1
:
this
.
multiArray
[
2
]
=
[
"
东京
"
,
"
北海道
"
];
break
;
}
break
;
case
1
:
switch
(
this
.
multiIndex
[
1
])
{
case
0
:
this
.
multiArray
[
2
]
=
[
"
伦敦
"
,
"
曼彻斯特
"
];
break
;
case
1
:
this
.
multiArray
[
2
]
=
[
"
巴黎
"
,
"
马赛
"
];
break
;
}
break
;
}
this
.
multiIndex
.
splice
(
2
,
1
,
0
);
break
;
}
this
.
$forceUpdate
();
},
bindDateChange
:
function
(
e
)
{
this
.
date
=
e
.
detail
.
value
;
},
bindTimeChange
:
function
(
e
)
{
this
.
time
=
e
.
detail
.
value
;
},
},
onInit
()
{
console
.
log
(
"
onInit
"
);
},
onLoad
()
{
console
.
log
(
"
onLoad
"
);
},
onReady
()
{
console
.
log
(
"
onReady
"
);
},
onShow
()
{
console
.
log
(
"
onShow
"
);
},
onHide
()
{
console
.
log
(
"
onHide
"
);
},
onUnload
()
{
console
.
log
(
"
onUnload
"
);
}
};
</
script
>
<
style
>
.uni-picker-tips
{
font-size
:
12px
;
color
:
#666
;
margin-bottom
:
15px
;
padding
:
0
15px
;
/* text-align: right; */
}
</
style
>
packages/playground/ssr/src/components/ssr-rich-text/ssr-rich-text.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view
class=
"content"
>
<view
class=
"uni-padding-wrap"
>
<view
class=
"uni-title uni-common-mt"
>
数组类型
<text>
\nnodes属性为Array
</text>
</view>
<view
class=
"uni-common-mt"
style=
"background: #fff; padding: 20rpx"
>
<rich-text
:nodes=
"nodes"
></rich-text>
</view>
<!-- #ifndef MP-ALIPAY -->
<view
class=
"uni-title uni-common-mt"
>
字符串类型
<text>
\nnodes属性为String
</text>
</view>
<view
class=
"uni-common-mt"
style=
"background: #fff; padding: 20rpx"
>
<rich-text
:nodes=
"strings"
></rich-text>
</view>
<!-- #endif -->
</view>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
title
:
"
rich-text
"
,
nodes
:
[
{
name
:
"
div
"
,
attrs
:
{
class
:
"
div-class
"
,
style
:
"
line-height: 60px; color: red; text-align:center;
"
,
},
children
:
[
{
type
:
"
text
"
,
text
:
"
Hello uni-app!
"
,
},
],
},
],
strings
:
'
<div style="text-align:center;"><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/ceb770c0-5164-11eb-8a36-ebb87efcf8c0.png"/></div>
'
,
};
},
};
</
script
>
packages/playground/ssr/src/components/ssr-slider/ssr-slider.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
<view
class=
"uni-padding-wrap uni-common-mt"
>
<view
class=
"uni-title"
>
显示当前value
</view>
<view>
<slider
value=
"50"
@
change=
"sliderChange"
show-value
/>
</view>
<view
class=
"uni-title"
>
设置步进step跳动
</view>
<view>
<slider
value=
"60"
@
change=
"sliderChange"
step=
"5"
/>
</view>
<view
class=
"uni-title"
>
设置最小/最大值
</view>
<view>
<slider
value=
"100"
@
change=
"sliderChange"
min=
"50"
max=
"200"
show-value
@
changing=
"changing"
/>
</view>
<view
class=
"uni-title"
>
不同颜色和大小的滑块
</view>
<view>
<slider
value=
"50"
@
change=
"sliderChange"
activeColor=
"#FFCC33"
backgroundColor=
"#000000"
block-color=
"#8A6DE9"
block-size=
"20"
/>
</view>
</view>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
title
:
"
slider 滑块
"
,
};
},
methods
:
{
changing
(
e
)
{
console
.
log
(
"
value 发生变化:
"
+
e
.
detail
.
value
);
},
sliderChange
(
e
)
{
console
.
log
(
"
value 发生变化:
"
+
e
.
detail
.
value
);
},
},
};
</
script
>
packages/playground/ssr/src/components/ssr-textarea/ssr-textarea.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<view>
<view
class=
"uni-title uni-common-pl"
>
输入区域高度自适应,不会出现滚动条
</view>
<view
class=
"uni-textarea"
>
<textarea
@
blur=
"bindTextAreaBlur"
auto-height
/>
</view>
<view
class=
"uni-title uni-common-pl"
>
占位符字体是红色的textarea
</view>
<view
class=
"uni-textarea"
>
<textarea
placeholder-style=
"color:#F76260"
placeholder=
"占位符字体是红色的"
/>
</view>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
title
:
'
textarea
'
,
focus
:
false
}
},
methods
:
{
bindTextAreaBlur
:
function
(
e
)
{
console
.
log
(
e
.
detail
.
value
)
}
}
}
</
script
>
<
style
>
</
style
>
packages/playground/ssr/src/components/ssr-video/ssr-video.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<div>
<video
id=
'video1'
class=
"video"
:src=
"src"
autoplay=
"false"
duration=
""
controls=
"true"
:danmu-list=
"list"
danmu-btn=
"true"
enable-danmu=
"true"
:loop=
"true"
muted=
"true"
initial-time=
""
direction=
"-90"
show-mute-btn=
"true"
@
play=
"onstart"
@
pause=
"onpause"
@
ended=
"onfinish"
@
error=
"onfail"
@
waiting=
"waiting"
@
timeupdate=
"timeupdate"
@
fullscreenchange=
"fullscreenchange"
></video>
<button
class=
"btn"
@
click=
"play"
>
播放
</button>
<button
class=
"btn"
@
click=
"pause"
>
暂停
</button>
<button
class=
"btn"
@
click=
"seek"
>
跳转到指定位置
</button>
<button
class=
"btn"
@
click=
"stop"
>
停止
</button>
<button
class=
"btn"
@
click=
"fullScreen"
>
全屏
</button>
<button
class=
"btn"
@
click=
"exitFullScreen"
>
退出全屏
</button>
<button
class=
"btn"
@
click=
"playbackRate"
>
设置倍速
</button>
<button
class=
"btn"
@
click=
"sendDanmu"
>
发送弹幕
</button>
</div>
</
template
>
<
script
>
export
default
{
data
:
{
src
:
"
https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v
"
,
fil
:
true
,
list
:
[{
text
:
'
要显示的文本
'
,
color
:
'
#FF0000
'
,
time
:
9
}]
},
onReady
()
{
this
.
context
=
uni
.
createVideoContext
(
"
video1
"
,
this
);
},
methods
:
{
onstart
(
e
)
{
console
.
log
(
"
onstart:
"
+
JSON
.
stringify
(
e
));
},
onpause
(
e
)
{
console
.
log
(
"
onpause:
"
+
JSON
.
stringify
(
e
));
},
onfinish
(
e
)
{
console
.
log
(
"
onfinish:
"
+
JSON
.
stringify
(
e
));
},
onfail
(
e
)
{
console
.
log
(
"
onfail:
"
+
JSON
.
stringify
(
e
));
},
fullscreenchange
(
e
)
{
console
.
log
(
"
fullscreenchange:
"
+
JSON
.
stringify
(
e
));
},
waiting
(
e
)
{
console
.
log
(
"
waiting:
"
+
JSON
.
stringify
(
e
));
},
timeupdate
(
e
)
{
console
.
log
(
"
timeupdate:
"
+
JSON
.
stringify
(
e
));
},
play
()
{
this
.
context
.
play
();
},
pause
()
{
this
.
context
.
pause
();
},
seek
()
{
this
.
context
.
seek
(
20
);
},
stop
()
{
this
.
context
.
stop
();
},
fullScreen
()
{
this
.
context
.
requestFullScreen
({
direction
:
90
});
},
exitFullScreen
()
{
this
.
context
.
exitFullScreen
();
},
sendDanmu
()
{
this
.
context
.
sendDanmu
({
text
:
'
要显示的弹幕文本
'
,
color
:
'
#FF0000
'
});
},
playbackRate
()
{
this
.
context
.
playbackRate
(
2
);
}
}
}
</
script
>
<
style
>
.video
{
width
:
750
rpx
;
/* #ifdef H5 */
width
:
100%
;
/* #endif */
height
:
400
rpx
;
background-color
:
#808080
;
}
.btn
{
margin-top
:
5px
;
margin-bottom
:
5px
;
}
</
style
>
packages/playground/ssr/src/components/ssr-webview/ssr-webview.vue
0 → 100644
浏览文件 @
a9b9b9a5
<
template
>
<web-view
class=
"web-view-test"
:allow=
"allow"
:src=
"url"
@
message=
"getMessage"
></web-view>
</
template
>
<
script
>
import
{
getCurrentInstance
}
from
"
vue
"
;
export
default
{
data
()
{
return
{
url
:
"
https://uniapp.dcloud.io/static/web-view.html
"
,
allow
:
""
,
sandbox
:
""
,
};
},
mounted
(
options
)
{
if
(
options
&&
options
.
url
)
{
this
.
url
=
options
.
url
;
}
window
.
addEventListener
(
"
message
"
,
(...
args
)
=>
{
console
.
log
(
"
...args :>>
"
,
...
args
);
},
false
);
console
.
log
(
"
vm :>>
"
,
getCurrentInstance
().
proxy
);
/* setInterval(() => {
this.allow += 1;
// this.sandbox += 1;
}, 1000); */
},
methods
:
{
getMessage
(
event
)
{
uni
.
showModal
({
content
:
JSON
.
stringify
(
event
.
detail
),
showCancel
:
false
,
});
},
},
};
</
script
>
<
style
></
style
>
packages/playground/ssr/src/pages/index/index.vue
浏览文件 @
a9b9b9a5
...
...
@@ -12,6 +12,21 @@
<ssr-swiper
/>
<ssr-text
/>
<ssr-view
/>
<ssr-button
/>
<ssr-canvas
/>
<ssr-editor
/>
<ssr-form
/>
<ssr-label
/>
<ssr-navigator
/>
<ssr-rich-text
/>
<ssr-textarea
/>
<ssr-slider
/>
<ssr-map
/>
<ssr-picker-view
/>
<ssr-picker
/>
<ssr-webview
/>
<!--
<ssr-video
/>
dataOptions is not a function -->
<view
id=
"ssr-log"
></view>
</
template
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录