Skip to content

U
uni-app

DCloud / uni-app
3 个月 前同步成功

通知 725
Star 38705
Fork 3642
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 a9b9b9a5 编写于 作者: D DCloud_LXH
浏览文件
操作

test: ssr

上级 7c7201ec
隐藏空白更改
内联 并排
Showing with 1409 addition and 0 deletion
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 - 444rpx);
background-color: #ececec;
}
.footer {
font-size: 16px;
height: 150rpx;
display: flex;
justify-content: space-around;
align-items: center;
}
.left,
.right {
line-height: 100rpx;
height: 100rpx;
width: 250rpx;
text-align: center;
font-weight: bold;
color: white;
border-radius: 5rpx;
}
.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: 20rpx 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: 750rpx;
width: 100%;
height: 600px;
}
.video {
width: 100%;
}
.cover-content {
position: relative;
}
.cover-view {
position: absolute;
left: 5px;
top: 5px;
width: 375rpx;
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: 600rpx;
margin-top: 20rpx;
}
.item {
line-height: 100rpx;
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&nbsp;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: 750rpx;
/* #ifdef H5 */
width: 100%;
/* #endif */
height: 400rpx;
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.
先完成此消息的编辑！
想要评论请 注册 或