使用uniapp框架,在addInquiry.vue点击一个按钮,弹出一个256*440的dialog询价条窗口(窗口写在quickInquiryInfo.vue上),里面嵌套div(id为"cpoy-container"),div内有物业名称:{{item.full_estate_name}},面积:{{item.size}},下面有一个按钮(功能是复制"cpoy-container"的纯文字内容createTextRange()到手机剪贴板上)。询价条窗口打开后向服务器请求inquiryDetail,数据返回returnPrices[]中。请写出实现代码
时间: 2024-02-27 12:57:06 浏览: 195
好的,以下是实现代码:
在addInquiry.vue中,添加一个按钮,点击后打开询价条窗口:
```
<template>
<div>
<button @click="openQuickInquiryInfo">打开询价条窗口</button>
<quick-inquiry-info ref="quickInquiryInfo"></quick-inquiry-info>
</div>
</template>
<script>
import QuickInquiryInfo from "@/components/QuickInquiryInfo.vue";
export default {
components: {
QuickInquiryInfo,
},
methods: {
openQuickInquiryInfo() {
this.$refs.quickInquiryInfo.open();
},
},
};
</script>
```
在QuickInquiryInfo.vue中,添加弹出的询价条窗口的代码:
```
<template>
<div class="quick-inquiry-info" :class="{ open: isOpen }">
<div class="quick-inquiry-info__container">
<div id="copy-container">
<div>物业名称:{{ inquiryDetail.full_estate_name }}</div>
<div>面积:{{ inquiryDetail.size }}</div>
</div>
<button @click="copyText">复制</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOpen: false,
inquiryDetail: {},
};
},
methods: {
open() {
// 向服务器请求inquiryDetail数据
// 这里使用mock数据模拟请求返回数据
this.inquiryDetail = {
full_estate_name: "某物业名称",
size: "100平米",
};
this.isOpen = true;
},
close() {
this.isOpen = false;
},
copyText() {
const copyContainer = document.querySelector("#copy-container");
const range = document.createRange();
range.selectNodeContents(copyContainer);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
selection.removeAllRanges();
alert("已复制到剪贴板");
},
},
};
</script>
<style scoped>
.quick-inquiry-info {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 256px;
height: 440px;
background-color: #fff;
border: 1px solid #000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.quick-inquiry-info.open {
opacity: 1;
visibility: visible;
}
.quick-inquiry-info__container {
padding: 20px;
}
.quick-inquiry-info__container div {
margin-bottom: 10px;
}
</style>
```
在copyText方法中,使用document.execCommand("copy")将纯文本内容复制到手机剪贴板上。
阅读全文