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
| <template>
| <span v-if="isValid" class="mac-address-wrapper">{{ prefix }}<span class="mac-address-mask">{{ middle }}</span>{{ suffix }}</span>
| <span v-else>{{ macAddress }}</span>
| </template>
|
| <script>
| export default {
| props: {
| macAddress: {
| type: String,
| default: '',
| },
| },
| computed: {
| isValid() {
| return /^(?:[0-9A-Z]{2}[:-]){5}[0-9A-Z]{2}$/i.test(this.macAddress);
| },
| segments() {
| return this.macAddress.split(':');
| },
| prefix() {
| return this.segments.slice(0, 2).join(':');
| },
| middle() {
| return ':' + this.segments.slice(2, 4).join(':') + ':';
| },
| suffix() {
| return this.segments.slice(4).join(':');
| },
| },
| };
| </script>
|
| <style lang="scss" scoped>
| .mac-address-wrapper:hover .mac-address-mask {
| filter: none;
| }
|
| .mac-address-mask {
| filter: blur(4px);
| transition: filter 0.3s;
| }
| </style>
|
|
