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
| <template>
| <el-scrollbar
| class="cl-scrollbar"
| :view-style="[
| {
| 'overflow-x': 'hidden',
| width
| },
| viewStyle
| ]"
| :native="native"
| :wrap-style="wrapStyle"
| :wrap-class="wrapClass"
| :view-class="viewClass"
| :noresize="noresize"
| :tag="tag"
| >
| <slot></slot>
| </el-scrollbar>
| </template>
|
| <script lang="ts">
| import { computed, defineComponent } from "vue";
| import { getBrowser } from "/@/cool/utils";
|
| export default defineComponent({
| name: "cl-scrollbar",
|
| props: {
| native: Boolean,
| wrapStyle: Object,
| wrapClass: Object,
| viewClass: Object,
| viewStyle: Object,
| noresize: Boolean,
| tag: {
| type: String,
| default: "div"
| },
| direction: {
| type: String,
| default: "vertical" // auto, vertical, horizontal
| }
| },
|
| setup() {
| const { plat } = getBrowser();
|
| const width = computed(() => {
| return `calc(100% - ${plat == "iphone" ? "10px" : "0px"})`;
| });
|
| return {
| width
| };
| }
| });
| </script>
|
|
