使用uniapp框架,在addInquiry.vue点击按钮,弹出一个256*440的dialog窗口(命名:quickInquiryInfo.vue),addInquiry.vue传入InquiryDetail结构到 quickInquirInfo窗口。quickInquirInfo窗口内的实现:1、收到InquiryDetail,赋值到id=cpoy-container的div里,2、copy-Container里面是多行div结构,包含:"物业名称:{{传入数据结构detial,quickInquiryInfo.full_estate_name}},面积:{{detail.size}}";3、quickInquiryInfo.vue下方又“粘贴到剪贴板”按钮,实现将"cpoy-container"的纯文字内容类似createTextRange()到手机剪贴板上。
时间: 2024-02-27 13:58:20 浏览: 95
好的,你的问题是如何实现使用uniapp框架,在addInquiry.vue点击按钮,弹出一个256*440的dialog窗口(命名:quickInquiryInfo.vue),addInquiry.vue传入InquiryDetail结构到quickInquirInfo窗口,并且在quickInquirInfo窗口内实现将"cpoy-container"的纯文字内容复制到手机剪贴板上。
首先,你可以在addInquiry.vue中添加一个按钮,绑定点击事件,在点击事件中使用uni.showModal方法弹出一个模态对话框,将quickInquiryInfo.vue组件作为模态对话框的内容。如下所示:
```
<template>
<view>
<button type="primary" @click="showQuickInquiryInfo">打开快速询价信息</button>
<!-- 弹出的模态对话框 -->
<uni-modal :show="showModal" :title="modalTitle" :content="modalContent" @tap="hideModal"></uni-modal>
</view>
</template>
<script>
export default {
data() {
return {
showModal: false, // 控制模态对话框是否显示
modalTitle: '', // 模态对话框标题
modalContent: '', // 模态对话框内容
inquiryDetail: {} // 传入的InquiryDetail结构
}
},
methods: {
// 点击按钮,显示快速询价信息窗口
showQuickInquiryInfo() {
this.showModal = true
this.modalTitle = '快速询价信息'
// 将快速询价信息窗口作为模态对话框的内容
this.modalContent = '<quick-inquiry-info :detail="inquiryDetail"></quick-inquiry-info>'
},
// 隐藏模态对话框
hideModal() {
this.showModal = false
}
}
}
</script>
```
然后,在quickInquiryInfo.vue组件中,你可以接收到addInquiry.vue传入的InquiryDetail结构,将其赋值到id为cpoy-container的div中,并在copy-Container中展示相关信息。最后,在“粘贴到剪贴板”按钮的点击事件中,调用uni.setClipboardData方法将cpoy-container的纯文本内容复制到手机剪贴板上。具体代码如下:
```
<template>
<view>
<!-- 展示快速询价信息 -->
<div id="cpoy-container" style="display:none;">物业名称:{{full_estate_name}},面积:{{size}}</div>
<div class="copy-Container">
<div>物业名称:{{full_estate_name}}</div>
<div>面积:{{size}}</div>
</div>
<!-- 粘贴到剪贴板 -->
<button type="primary" @click="copyToClipboard">粘贴到剪贴板</button>
</view>
</template>
<script>
export default {
props: {
detail: {
type: Object,
default: () => {}
}
},
computed: {
full_estate_name() {
return this.detail.full_estate_name || ''
},
size() {
return this.detail.size || ''
}
},
methods: {
// 将cpoy-container的纯文本内容复制到手机剪贴板上
copyToClipboard() {
uni.setClipboardData({
data: document.getElementById('cpoy-container').innerText,
success() {
uni.showToast({
title: '已复制到剪贴板',
duration: 2000
})
}
})
}
}
}
</script>
```
阅读全文