/
demo-p.vue
126 lines (119 loc) · 2.86 KB
/
demo-p.vue
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
<div class="p-demo">
<label>不带样式:</label>
<p
class="p-demo-content"
@touchstart="onTouchTextStart"
@touchmove="onTouchTextMove"
@touchend="onTouchTextEnd"
>
这是最普通的一行文字 - 当前 touch 状态: {{ labelTouchStatus }}
</p>
<label>颜色:</label>
<p class="p-demo-1 p-demo-content">
这行文字改变了颜色
</p>
<label>尺寸:</label>
<p class="p-demo-2 p-demo-content">
这行改变了大小
</p>
<label>粗体:</label>
<p class="p-demo-3 p-demo-content">
这行加粗了
</p>
<label>下划线:</label>
<p class="p-demo-4 p-demo-content">
这里有条下划线
</p>
<label>删除线:</label>
<p class="p-demo-5 p-demo-content">
这里有条删除线
</p>
<label>自定义字体:</label>
<p class="p-demo-6 p-demo-content">
腾讯字体 Hippy
</p>
<label>文字阴影:</label>
<p
class="p-demo-7 p-demo-content"
:style="textShadow"
>
这里是文字灰色阴影
</p>
</div>
</template>
<script>
export default {
data() {
return {
isClicked: false,
isPressing: false,
labelTouchStatus: '',
textShadow: {
// textShadowOffset: {
// x: 1,
// y: 1,
// },
// support declare textShadowOffsetX & textShadowOffsetY separately
// textShadowOffsetX: 1,
// textShadowOffsetY: 1,
// textShadowRadius: 3,
// textShadowColor: 'grey',
},
};
},
methods: {
// text/span/label/p/a element touch event is supported after hippy-vue 2.6.2
onTouchTextStart(evt) {
this.labelTouchStatus = 'touch start';
console.log('onTextTouchDown', evt);
evt.stopPropagation();
},
// text/span/label/p/a element touch event is supported after hippy-vue 2.6.2
onTouchTextMove(evt) {
this.labelTouchStatus = 'touch move';
console.log('onTextTouchMove', evt);
evt.stopPropagation();
console.log(evt);
},
// text/span/label/p/a element touch event is supported after hippy-vue 2.6.2
onTouchTextEnd(evt) {
this.labelTouchStatus = 'touch end';
console.log('onTextTouchEnd', evt);
evt.stopPropagation();
console.log(evt);
},
},
};
</script>
<style scoped>
.p-demo .p-demo-content {
margin: 20px;
}
.p-demo .p-demo-1 {
color: #f44837;
}
.p-demo .p-demo-2 {
font-size: 30px;
}
.p-demo .p-demo-3 {
font-weight: bold;
}
.p-demo .p-demo-4 {
text-decoration-line: underline;
text-decoration: underline;
}
.p-demo .p-demo-5 {
text-decoration: line-through;
}
.p-demo .p-demo-6 {
color: #0052d9;
font-family: TTTGB;
font-size: 32px;
}
.p-demo .p-demo-7 {
text-shadow-offset: 1px 1px; /* not support declared separately */
text-shadow-radius: 3;
text-shadow-color: grey;
}
</style>