# 封装组件
- 我用的是tsx 代码写起来更灵活好用
- 呼叫和接收一个组件即可 peerJs->index.tsx
组件代码如下
import "./peer.css";
import { defineComponent, ref,computed} from "vue";
import dxPeer from "../../store/dxPeer";
export default defineComponent({
props: {
code: {
type: String,
},
},
setup(props) {
let isload = false;
const switchOn = () => {
dxPeer.commit("switchOn");
};
const CancelOn = () => {
dxPeer.commit("CancelOn");
};
const msg = computed(()=>{
return dxPeer.state.msg
})
return () => (
<>
<div class={"static" + dxPeer.state.TheActive}>
<div class="TheVideoFrame">
<video
class="video-class"
id="CallingSideVideo"
muted
autoplay
></video>
<video class="video-class" id="receivingEndVideo" autoplay></video>
{isload ? (
<div class="In-the-answer-w vertical-center">
<div class="In-the-answer cf">
<n-spin size="small" stroke="#fff" />
<span>{dxPeer.state.TheActive==3?'通话中':'视频接听中'}...</span>
</div>
</div>
) : (
""
)}
<img
class="In-the-answer-bg"
src={msg.value.headPortrait}
></img>
<div class="Answering-hanging-up display-flex cen">
<div class="flex-1 vertical-center">
<span
class="operating-button vertical-center"
onClick={CancelOn}
>
{dxPeer.state.hangUpload ? (
<n-spin size="small" stroke="#fff" />
) : (
<i class="iconfont dx-guaduan cf fz40"></i>
)}
</span>
</div>
<div class="flex-1 vertical-center">
<span
class="operating-button ab vertical-center"
onClick={switchOn}
>
<i class="iconfont dx-jieting cf fz40"></i>
</span>
</div>
</div>
<div class="pr userinfo-page">
<div class="display-flex">
<img class="user-icon-sp" src={msg.value.headPortrait} />
<div class="flex-1 pl10">
<p class="cf fz20">{msg.value.fromName}</p>
<p class="cf fz12">{dxPeer.state.TheActive==3?'通话中':'视频接听中'}...</p>
</div>
</div>
</div>
</div>
</div>
</>
);
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
- 页面上引用组件
<script lang='ts' setup>
<peerJs ></peerJs>
import peerJs from "../components/peerJs/index"
// 拨号方法
dxPeer.commit("dialCall",userName)
</script>
1
2
3
4
5
6
7
2
3
4
5
6
7