使用uniapp框架,在addInquiry.vue点击一个按钮,弹出一个256*440的dialog询价条窗口(窗口写在quickInquiryInfo.vue上),"addInquiry.vue"给 "quickInquiryInfo.vue"传入数据结构detial,quickInquiryInfo.vue里面嵌套div(id为"cpoy-container"),div内有物业名称:{{传入数据结构detial,quickInquiryInfo.full_estate_name}},面积:{{detail.size}},下面有一个按钮(功能是复制"cpoy-container"的纯文字内容createTextRange()到手机剪贴板上)。询价条窗口打开后向服务器请求inquiryDetail,数据返回returnPrices[]中。请写出实现代码
时间: 2024-02-27 09:57:22 浏览: 233
在addInquiry.vue中,我们可以通过以下代码打开询价条窗口并传入数据结构detail:
```html
<template>
<div>
<button @click="openQuickInquiry">打开询价条窗口</button>
<quick-inquiry-info :detail="detail" ref="quickInquiry"></quick-inquiry-info>
</div>
</template>
<script>
import QuickInquiryInfo from "@/components/QuickInquiryInfo.vue";
export default {
components: {
QuickInquiryInfo,
},
data() {
return {
detail: {
full_estate_name: "物业名称",
size: "100",
},
returnPrices: [], // 从服务器返回的数据
};
},
methods: {
openQuickInquiry() {
this.$refs.quickInquiry.openDialog();
},
},
};
</script>
```
在QuickInquiryInfo.vue中,我们可以通过以下代码实现询价条窗口:
```html
<template>
<el-dialog :visible.sync="visible" width="256px" height="440px">
<div id="cpoy-container">
<div>物业名称:{{ full_estate_name }}</div>
<div>面积:{{ size }}</div>
<button @click="copyToClipboard">复制</button>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
detail: {
type: Object,
default: {},
},
},
data() {
return {
visible: false,
full_estate_name: "",
size: "",
};
},
methods: {
openDialog() {
this.visible = true;
this.full_estate_name = this.detail.full_estate_name;
this.size = this.detail.size;
// 向服务器请求数据
this.$axios.get("inquiryDetail").then((res) => {
this.returnPrices = res.data.returnPrices;
});
},
copyToClipboard() {
const range = document.createRange();
range.selectNode(document.getElementById("cpoy-container"));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();
this.$message.success("已复制到剪贴板");
},
},
};
</script>
```
以上代码中,我们使用了Element UI的Dialog组件和Axios库向服务器发送请求获取数据。在点击复制按钮时,我们通过createRange()方法创建一个新的Range对象,然后将其范围设置为cpoy-container元素中的所有内容,最后使用execCommand("copy")方法将其复制到剪贴板中。
阅读全文