uniapp写一个窗口代码
时间: 2023-12-26 12:03:21 浏览: 33
好的,以下是一个简单的uniapp窗口代码:
<template>
<view class="container">
<view class="window">
<text>Hello World!</text>
</view>
</view>
</template>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.window {
width: 400rpx;
height: 300rpx;
background-color: #fff;
border-radius: 10rpx;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
text {
font-size: 36rpx;
}
</style>
相关问题
uniapp写一个页面打印的代码
以下是一个使用uniapp框架编写的打印页面的示例代码:
<template>
<div class="print-page">
<div class="print-content">
<!-- 打印内容 -->
<h1>打印页面的标题</h1>
<p>打印页面的内容</p>
</div>
<div class="print-btn" @click="printPage()">打印页面</div>
</div>
</template>
<script>
export default {
methods: {
printPage() {
// 创建一个新的窗口
const printWindow = window.open('', 'PrintWindow', 'height=400,width=600');
// 获取打印内容
const printContent = document.querySelector('.print-content').innerHTML;
// 将打印内容写入新窗口中
printWindow.document.write(printContent);
// 执行打印命令
printWindow.print();
// 关闭新窗口
printWindow.close();
}
}
}
</script>
<style>
.print-page {
display: flex;
flex-direction: column;
align-items: center;
}
.print-content {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
}
.print-btn {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
在上面的代码中,我们创建了一个打印页面的模板,包括打印内容和一个打印按钮。在打印按钮的点击事件中,我们使用window.open()方法创建了一个新的窗口,将打印内容写入新窗口中,并执行打印命令,最后关闭新窗口。通过这种方式,我们可以实现在浏览器中打印页面的功能。
uniapp 写一个点击预览图片 代码
很好的问题,可以回答。以下是使用uniapp框架实现图片预览的代码示例:
<template>
<view>
<image :src="imageUrl" mode="aspectFill" @click="previewImage"/>
</view>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://example.com/image.png', // 图片链接
};
},
methods: {
previewImage() {
uni.previewImage({
urls: [this.imageUrl],
current: this.imageUrl,
});
},
},
};
</script>
这段代码会显示一张图片,并且能够响应用户的点击事件,当用户点击图片时,会弹出一个图片预览窗口,允许用户查看原图并进行放大操作。