使用uniapp框架,点击一个按钮,弹出一个256*440的dialog询价条窗口,里面嵌套一个多行输入框,下面有一个按钮(功能是复制多行输入框的内容到手机剪贴板上)。询价条窗口打开后向服务器请求inquiryDetail,数据返回returnPrices[]中。请写出实现代码
时间: 2024-02-27 17:53:55 浏览: 65
好的,首先需要在uniapp的页面中添加一个按钮,点击后触发弹出询价条窗口的事件:
```html
<template>
<div>
<button @click="showDialog">询价</button>
<div v-show="dialogVisible">
<!-- 弹出的询价条窗口 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
inquiryDetail: null
};
},
methods: {
showDialog() {
// 打开询价条窗口前向服务器请求数据
this.$http.get('/inquiryDetail').then(response => {
if (response && response.data) {
this.inquiryDetail = response.data;
this.dialogVisible = true;
}
});
}
}
};
</script>
```
然后在弹出的询价条窗口中添加一个多行输入框和一个复制按钮:
```html
<template>
<div>
<div class="dialog-mask" @click="closeDialog" v-show="dialogVisible"></div>
<div class="dialog" v-show="dialogVisible">
<div class="dialog-content">
<div class="dialog-title">询价条</div>
<div class="dialog-body">
<textarea
class="textarea"
rows="5"
v-model="inquiryDetail"
></textarea>
<button class="copy-button" @click="copyToClipboard">复制</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
inquiryDetail: null
};
},
methods: {
closeDialog() {
this.dialogVisible = false;
},
copyToClipboard() {
// 将多行输入框的内容复制到手机剪贴板上
uni.setClipboardData({
data: this.inquiryDetail,
success() {
uni.showToast({
title: '已复制',
duration: 2000
});
}
});
}
}
};
</script>
<style scoped>
.dialog-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 10px;
z-index: 1000;
}
.dialog-content {
padding: 20px;
box-sizing: border-box;
}
.dialog-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
.dialog-body {
display: flex;
flex-direction: column;
}
.textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
}
.copy-button {
width: 80px;
height: 30px;
margin-left: auto;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
```
这样就实现了点击按钮弹出询价条窗口,并且可以复制多行输入框的内容到手机剪贴板上的功能。
阅读全文