@ajaxjs/util 1.1.1 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/README.md +55 -6
  2. package/dist/index.esm.js +525 -0
  3. package/dist/index.umd.js +536 -0
  4. package/dist/{util → src/core}/cookies.d.ts +18 -18
  5. package/dist/{util → src/core}/dom.d.ts +17 -17
  6. package/dist/{util → src/core}/utils.d.ts +51 -51
  7. package/dist/{util → src/core}/xhr-config.d.ts +22 -22
  8. package/dist/{util → src/core}/xhr.d.ts +71 -71
  9. package/dist/src/index.d.ts +5 -0
  10. package/package.json +39 -43
  11. package/{dist/util/cookies.js → src/core/cookies.ts} +15 -18
  12. package/{dist/util/dom.js → src/core/dom.ts} +17 -14
  13. package/{dist/util/utils.js → src/core/utils.ts} +82 -77
  14. package/src/core/xhr-config.ts +25 -0
  15. package/{dist/util/xhr.js → src/core/xhr.ts} +128 -94
  16. package/src/index.ts +6 -0
  17. package/LICENSE +0 -201
  18. package/dist/index.d.ts +0 -38
  19. package/dist/index.js +0 -71
  20. package/dist/index.js.map +0 -1
  21. package/dist/main.d.ts +0 -1
  22. package/dist/main.js +0 -16
  23. package/dist/main.js.map +0 -1
  24. package/dist/router/index.d.ts +0 -3
  25. package/dist/router/index.js +0 -44
  26. package/dist/router/index.js.map +0 -1
  27. package/dist/router.d.ts +0 -3
  28. package/dist/router.js +0 -44
  29. package/dist/router.js.map +0 -1
  30. package/dist/shims-vue.d.ts +0 -4
  31. package/dist/style/common-functions.less +0 -294
  32. package/dist/style/reset.less +0 -19
  33. package/dist/util/cookies.js.map +0 -1
  34. package/dist/util/dom.js.map +0 -1
  35. package/dist/util/utils.js.map +0 -1
  36. package/dist/util/xhr-config.js +0 -3
  37. package/dist/util/xhr-config.js.map +0 -1
  38. package/dist/util/xhr.js.map +0 -1
  39. package/dist/widget/AccordionMenu.vue +0 -140
  40. package/dist/widget/AdjustFontSize.vue +0 -65
  41. package/dist/widget/Article.vue +0 -59
  42. package/dist/widget/EmptyContent.d.ts +0 -5
  43. package/dist/widget/EmptyContent.js +0 -7
  44. package/dist/widget/EmptyContent.js.map +0 -1
  45. package/dist/widget/Expander.vue +0 -65
  46. package/dist/widget/FileUploader/FileUploader.d.ts +0 -70
  47. package/dist/widget/FileUploader/FileUploader.js +0 -139
  48. package/dist/widget/FileUploader/FileUploader.js.map +0 -1
  49. package/dist/widget/FileUploader/FileUploader.less +0 -68
  50. package/dist/widget/FileUploader/FileUploader.ts +0 -156
  51. package/dist/widget/FileUploader/FileUploader.vue +0 -43
  52. package/dist/widget/HtmlEditor/HtmlEditor.d.ts +0 -70
  53. package/dist/widget/HtmlEditor/HtmlEditor.js +0 -287
  54. package/dist/widget/HtmlEditor/HtmlEditor.js.map +0 -1
  55. package/dist/widget/HtmlEditor/HtmlEditor.less +0 -345
  56. package/dist/widget/HtmlEditor/HtmlEditor.ts +0 -339
  57. package/dist/widget/HtmlEditor/HtmlEditor.vue +0 -70
  58. package/dist/widget/HtmlEditor/html-editor-HtmlSanitizer.js +0 -103
  59. package/dist/widget/ImageEnlarger.vue +0 -105
  60. package/dist/widget/OpacityBanner.vue +0 -125
  61. package/dist/widget/ProcessLine.vue +0 -133
  62. package/dist/widget/Resize.d.ts +0 -51
  63. package/dist/widget/Resize.js +0 -133
  64. package/dist/widget/Resize.js.map +0 -1
  65. package/dist/widget/Resize.ts +0 -152
  66. package/dist/widget/Resize.vue +0 -104
  67. package/dist/widget/TreeSelector.vue +0 -4
  68. package/dist/widget/calendar/BetweenDate.vue +0 -63
  69. package/dist/widget/calendar/Calendar.d.ts +0 -55
  70. package/dist/widget/calendar/Calendar.js +0 -145
  71. package/dist/widget/calendar/Calendar.js.map +0 -1
  72. package/dist/widget/calendar/Calendar.less +0 -210
  73. package/dist/widget/calendar/Calendar.ts +0 -167
  74. package/dist/widget/calendar/Calendar.vue +0 -52
  75. package/dist/widget/calendar/CalendarInput.vue +0 -71
  76. package/dist/widget/form/validator.d.ts +0 -70
  77. package/dist/widget/form/validator.js +0 -220
  78. package/dist/widget/form/validator.js.map +0 -1
  79. package/dist/widget/form/validator.ts +0 -289
  80. package/dist/widget/play-ground/sku.vue +0 -93
@@ -1,125 +0,0 @@
1
- <template>
2
- <ul class="aj-opacity-banner">
3
- <slot></slot>
4
- </ul>
5
- </template>
6
-
7
- <script lang="ts">
8
- /**
9
- * 渐显 banner
10
- * 注意:定时器保存在 DOM 元素的属性上,是否会内存泄漏呢?
11
- */
12
- export default {
13
- props: {
14
- delay: { default: 3000 }, // 延时
15
- fps: { default: 25 }, // 帧速
16
- },
17
- data(): any {
18
- return {
19
- active: 0, // 当前索引
20
- };
21
- },
22
- mounted(): void {
23
- this.list = this.$el.querySelectorAll("li"); // 各帧
24
- this.list[0].style.opacity = "1";
25
- this.run();
26
- },
27
- methods: {
28
- /**
29
- * 播放动画
30
- *
31
- * @param this
32
- */
33
- run(): void {
34
- this.timer = window.setInterval(() => {
35
- let active: number = this.active;
36
- this.clear();
37
- active += 1;
38
- this.active = active % this.list.length;
39
- this.animate(100);
40
- }, this.delay);
41
- },
42
-
43
- /**
44
- * 下一帧
45
- *
46
- * @param this
47
- */
48
- per(): void {
49
- let active: number = this.active;
50
- this.clear();
51
- active -= 1;
52
- active = active % this.list.length;
53
-
54
- if (active < 0) active = this.list.length - 1;
55
-
56
- this.active = active;
57
- this.animate(100);
58
- },
59
-
60
- /**
61
- * 内容淡出
62
- */
63
- clear(): void {
64
- this.animate(0);
65
- },
66
-
67
- /**
68
- *
69
- * @param params
70
- */
71
- animate(params: number): void {
72
- var el: HTMLLIElement = this.list[this.active],
73
- fps: number = 1000 / this.fps;
74
- // @ts-ignore
75
- window.clearTimeout(el.timer);
76
-
77
- window.setTimeout(function loop() {
78
- var i: number = getOpacity(el);
79
- let speed: number = (params - i) / 8;
80
- speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
81
- // console.log("i=" + i + "; speed="+ speed+"; s="+s+"; k="+k);
82
- i += speed;
83
- el.style.opacity = String(i / 100);
84
- // @ts-ignore
85
- window.clearTimeout(el.timer);
86
- // params.complete && params.complete.call(elem);
87
- // @ts-ignore
88
- el.timer = window.setTimeout(loop, fps);
89
- }, fps);
90
- },
91
- },
92
- };
93
-
94
- /**
95
- * 获取元素的透明度
96
- *
97
- * @param el
98
- */
99
- function getOpacity(el: Element): number {
100
- let v = Number(getComputedStyle(el)["opacity"]);
101
- v *= 100;
102
-
103
- return parseFloat(v + "") || 0;
104
- }
105
- </script>
106
-
107
- <style lang="less" scoped>
108
- .aj-opacity-banner {
109
- position: relative;
110
- min-height: 90px;
111
-
112
- li {
113
- position: absolute;
114
- top: 0;
115
- left: 0;
116
- opacity: 0;
117
- width: 100%;
118
- }
119
-
120
- img {
121
- // border-top:solid 20px #00416d;
122
- width: 100%;
123
- }
124
- }
125
- </style>
@@ -1,133 +0,0 @@
1
- <template>
2
- <div class="aj-process-line">
3
- <div class="process-line">
4
- <div v-for="(item, index) in items" :key="index" :class="{current: index == current, done: index < current}">
5
- <span>{{index + 1}}</span>
6
- <p>{{item}}</p>
7
- </div>
8
- </div>
9
- </div>
10
- </template>
11
-
12
- <script lang="ts">
13
- /**
14
- * 进度条
15
- */
16
- export default {
17
- props: {
18
- items: {
19
- type: Array,
20
- default(): string[] {
21
- return ["Step 1", "Step 2", "Step 3"];
22
- },
23
- },
24
- },
25
- data():any {
26
- return {
27
- current: 0,
28
- };
29
- },
30
- methods: {
31
- /**
32
- *
33
- * @param i
34
- */
35
- go(i: number): void {
36
- this.current = i;
37
- },
38
-
39
- /**
40
- *
41
- */
42
- perv(): void {
43
- let perv: number = this.current - 1;
44
- if (perv < 0) perv = this.items.length - 1;
45
-
46
- this.go(perv);
47
- },
48
-
49
- /**
50
- *
51
- */
52
- next(): void {
53
- let next: number = this.current + 1;
54
- if (this.items.length == next) next = 0; // 循环
55
-
56
- this.go(next);
57
- },
58
- },
59
- };
60
- </script>
61
-
62
- <style lang="less" scoped>
63
- .aj-process-line {
64
- display: flex;
65
- padding: 5%;
66
- justify-content: center;
67
-
68
- .process-line {
69
- font-size: 18px;
70
- color: lightgray;
71
- font-weight: bold;
72
-
73
- & > div {
74
- float: left;
75
- width: 156px;
76
- text-align: center;
77
- position: relative;
78
-
79
- &.current {
80
- color: black;
81
-
82
- span {
83
- background-color: gray;
84
- }
85
- }
86
-
87
- &.done {
88
- // color: lighten(@mainColor, 80%);
89
- span {
90
- // background-color: lighten(@mainColor, 50%);
91
- }
92
-
93
- &::after {
94
- // background-color: lighten(@mainColor, 50%);
95
- }
96
- }
97
-
98
- p {
99
- font-size: 1rem;
100
- letter-spacing: 3px;
101
- padding-top: 5%;
102
- }
103
-
104
- span {
105
- display: inline-block;
106
- width: 32px;
107
- height: 32px;
108
- border-radius: 50%;
109
- color: #fff;
110
- line-height: 32px;
111
- font-size: 16px;
112
- background-color: lightgray;
113
- position: relative;
114
- z-index: 1;
115
- }
116
-
117
- &:last-child::after {
118
- display: none;
119
- }
120
-
121
- &::after {
122
- content: "";
123
- position: absolute;
124
- top: 14px;
125
- left: 94px;
126
- width: 124px;
127
- height: 4px;
128
- background-color: lightgray;
129
- }
130
- }
131
- }
132
- }
133
- </style>
@@ -1,51 +0,0 @@
1
- declare const _default: {
2
- data(): {
3
- styleWidth: number;
4
- styleHeight: number;
5
- styleLeft: number;
6
- styleTop: number;
7
- sideLeft: number;
8
- sideRight: number;
9
- sideUp: number;
10
- sideDown: number;
11
- fixLeft: number;
12
- fixTop: number;
13
- fn: any;
14
- LockX: boolean;
15
- LockY: boolean;
16
- Lock: boolean;
17
- scale: {
18
- enable: boolean;
19
- ratio: number;
20
- left: number;
21
- top: number;
22
- };
23
- min: {
24
- enable: boolean;
25
- height: number;
26
- width: number;
27
- };
28
- max: {
29
- enable: boolean;
30
- height: number;
31
- width: number;
32
- };
33
- };
34
- methods: {
35
- /**
36
- * 准备拖动
37
- */
38
- start(e: MouseEvent, fn: Function): void;
39
- resize(e: MouseEvent): void;
40
- stop(): void;
41
- up(e: MouseEvent): void;
42
- down(e: MouseEvent): void;
43
- right(e: MouseEvent): void;
44
- left(e: MouseEvent): void;
45
- rightDown(e: MouseEvent): void;
46
- rightUp(e: MouseEvent): void;
47
- leftDown(e: MouseEvent): void;
48
- leftUp(e: MouseEvent): void;
49
- };
50
- };
51
- export default _default;
@@ -1,133 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.default = {
4
- data() {
5
- return {
6
- styleWidth: 0,
7
- styleHeight: 0,
8
- styleLeft: 0,
9
- styleTop: 0,
10
- sideLeft: 0,
11
- sideRight: 0,
12
- sideUp: 0,
13
- sideDown: 0,
14
- fixLeft: 0,
15
- fixTop: 0,
16
- fn: null,
17
- LockX: false,
18
- LockY: false,
19
- Lock: false,
20
- scale: {
21
- enable: true,
22
- ratio: 0,
23
- left: 0,
24
- top: 0,
25
- },
26
- min: {
27
- enable: false,
28
- height: 100,
29
- width: 200,
30
- },
31
- max: {
32
- enable: false,
33
- height: 300,
34
- width: 500,
35
- }
36
- };
37
- },
38
- methods: {
39
- /**
40
- * 准备拖动
41
- */
42
- start(e, fn) {
43
- this.styleWidth = this.$el.clientWidth;
44
- this.styleHeight = this.$el.clientHeight;
45
- this.styleLeft = this.$el.offsetLeft; // 记录鼠标相对拖放对象的位置
46
- this.styleTop = this.$el.offsetTop;
47
- this.sideLeft = e.clientX - this.styleWidth;
48
- this.sideRight = e.clientX + this.styleWidth;
49
- this.sideUp = e.clientY - this.styleHeight;
50
- this.sideDown = e.clientY + this.styleHeight;
51
- this.fixLeft = this.styleWidth + this.styleLeft;
52
- this.fixTop = this.styleHeight + this.styleTop;
53
- this.fn = fn;
54
- if (this.scale.enable) {
55
- this.scale.ratio = Math.max(this.scale.ratio, 0) || this.styleWidth / this.styleHeight; //设置比例
56
- this.scale.left = this.styleLeft + this.styleWidth / 2; // left 和 top 的定位坐标
57
- this.scale.top = this.styleTop + this.styleHeight / 2;
58
- }
59
- document.addEventListener("mousemove", this.resize); // mousemove 时移动 mouseup 时停止
60
- document.addEventListener("mouseup", this.stop);
61
- },
62
- // 缩放
63
- resize(e) {
64
- window.getSelection().removeAllRanges(); // 清除选择
65
- this.fn(e);
66
- if (this.min.enable) {
67
- if (this.styleHeight <= this.min.height)
68
- return;
69
- if (this.styleWidth <= this.min.width)
70
- return;
71
- }
72
- if (this.max.enable) {
73
- if (this.styleHeight >= this.max.height)
74
- return;
75
- if (this.styleWidth >= this.max.width)
76
- return;
77
- }
78
- let s = this.$el.style;
79
- s.width = this.styleWidth + "px";
80
- s.height = this.styleHeight + "px";
81
- s.top = this.styleTop + "px";
82
- s.left = this.styleLeft + "px";
83
- },
84
- // 停止缩放
85
- stop() {
86
- document.removeEventListener("mousemove", this.resize);
87
- document.removeEventListener("mouseup", this.stop);
88
- },
89
- //缩放程序
90
- //上
91
- up(e) {
92
- this.styleHeight = Math.max(this.sideDown - e.clientY, 0);
93
- this.styleTop = this.fixTop - this.styleHeight;
94
- this.styleLeft = this.scale.left - this.styleWidth / 2;
95
- console.log(this.styleLeft);
96
- },
97
- //下
98
- down(e) {
99
- this.styleHeight = Math.max(e.clientY - this.sideUp, 0);
100
- this.styleLeft = this.scale.left - this.styleWidth / 2;
101
- },
102
- //右
103
- right(e) {
104
- this.styleWidth = Math.max(e.clientX - this.sideLeft, 0);
105
- },
106
- //左
107
- left(e) {
108
- this.styleWidth = Math.max(this.sideRight - e.clientX, 0);
109
- this.styleLeft = this.fixLeft - this.styleWidth;
110
- },
111
- //右下
112
- rightDown(e) {
113
- this.right(e);
114
- this.down(e);
115
- },
116
- //右上
117
- rightUp(e) {
118
- this.right(e);
119
- this.up(e);
120
- },
121
- //左下
122
- leftDown(e) {
123
- this.left(e);
124
- this.down(e);
125
- },
126
- //左上
127
- leftUp(e) {
128
- this.left(e);
129
- this.up(e);
130
- },
131
- },
132
- };
133
- //# sourceMappingURL=Resize.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Resize.js","sourceRoot":"","sources":["../../src/widget/Resize.ts"],"names":[],"mappings":"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"}
@@ -1,152 +0,0 @@
1
- export default {
2
- data() {
3
- return {
4
- styleWidth: 0,// 样式参数值
5
- styleHeight: 0,
6
- styleLeft: 0,
7
- styleTop: 0,
8
- sideLeft: 0, // 四条边定位坐标
9
- sideRight: 0,
10
- sideUp: 0,
11
- sideDown: 0,
12
- fixLeft: 0, // top 和 left 定位参数
13
- fixTop: 0,
14
- fn: null,
15
-
16
- LockX: false,// 是否锁定水平方向拖放
17
- LockY: false,// 是否锁定垂直方向拖放
18
- Lock: false,// 是否锁定
19
-
20
- scale: { // 按比例缩放
21
- enable: true, // 是否按比例缩放
22
- ratio: 0, // 设置比例(宽/高)
23
- left: 0,
24
- top: 0,
25
- },
26
-
27
- min: { // 最小控制
28
- enable: false,
29
- height: 100,
30
- width: 200,
31
- },
32
- max: { // 最大控制
33
- enable: false,
34
- height: 300,
35
- width: 500,
36
- }
37
-
38
- };
39
- },
40
- methods: {
41
- /**
42
- * 准备拖动
43
- */
44
- start(e: MouseEvent, fn: Function): void {
45
- this.styleWidth = this.$el.clientWidth;
46
- this.styleHeight = this.$el.clientHeight;
47
- this.styleLeft = this.$el.offsetLeft; // 记录鼠标相对拖放对象的位置
48
- this.styleTop = this.$el.offsetTop;
49
-
50
- this.sideLeft = e.clientX - this.styleWidth;
51
- this.sideRight = e.clientX + this.styleWidth;
52
- this.sideUp = e.clientY - this.styleHeight;
53
- this.sideDown = e.clientY + this.styleHeight;
54
-
55
- this.fixLeft = this.styleWidth + this.styleLeft;
56
- this.fixTop = this.styleHeight + this.styleTop;
57
- this.fn = fn;
58
-
59
- if (this.scale.enable) {
60
- this.scale.ratio = Math.max(this.scale.ratio, 0) || this.styleWidth / this.styleHeight; //设置比例
61
- this.scale.left = this.styleLeft + this.styleWidth / 2;// left 和 top 的定位坐标
62
- this.scale.top = this.styleTop + this.styleHeight / 2;
63
- }
64
-
65
- document.addEventListener("mousemove", this.resize);// mousemove 时移动 mouseup 时停止
66
- document.addEventListener("mouseup", this.stop);
67
- },
68
-
69
- // 缩放
70
- resize(e: MouseEvent): void {
71
- window.getSelection().removeAllRanges(); // 清除选择
72
- this.fn(e);
73
-
74
- if (this.min.enable) {
75
- if (this.styleHeight <= this.min.height)
76
- return;
77
- if (this.styleWidth <= this.min.width)
78
- return;
79
- }
80
- if (this.max.enable) {
81
- if (this.styleHeight >= this.max.height)
82
- return;
83
- if (this.styleWidth >= this.max.width)
84
- return;
85
- }
86
-
87
- let s = this.$el.style;
88
- s.width = this.styleWidth + "px";
89
- s.height = this.styleHeight + "px";
90
- s.top = this.styleTop + "px";
91
- s.left = this.styleLeft + "px";
92
- },
93
-
94
- // 停止缩放
95
- stop(): void {
96
- document.removeEventListener("mousemove", this.resize);
97
- document.removeEventListener("mouseup", this.stop);
98
- },
99
-
100
- //缩放程序
101
-
102
- //上
103
- up(e: MouseEvent): void {
104
- this.styleHeight = Math.max(this.sideDown - e.clientY, 0);
105
- this.styleTop = this.fixTop - this.styleHeight;
106
- this.styleLeft = this.scale.left - this.styleWidth / 2;
107
- console.log(this.styleLeft)
108
- },
109
-
110
- //下
111
- down(e: MouseEvent): void {
112
- this.styleHeight = Math.max(e.clientY - this.sideUp, 0);
113
- this.styleLeft = this.scale.left - this.styleWidth / 2;
114
-
115
- },
116
-
117
- //右
118
- right(e: MouseEvent): void {
119
- this.styleWidth = Math.max(e.clientX - this.sideLeft, 0);
120
- },
121
-
122
- //左
123
- left(e: MouseEvent): void {
124
- this.styleWidth = Math.max(this.sideRight - e.clientX, 0);
125
- this.styleLeft = this.fixLeft - this.styleWidth;
126
- },
127
-
128
- //右下
129
- rightDown(e: MouseEvent): void {
130
- this.right(e);
131
- this.down(e);
132
- },
133
-
134
- //右上
135
- rightUp(e: MouseEvent): void {
136
- this.right(e);
137
- this.up(e);
138
- },
139
-
140
- //左下
141
- leftDown(e: MouseEvent): void {
142
- this.left(e);
143
- this.down(e);
144
- },
145
-
146
- //左上
147
- leftUp(e: MouseEvent): void {
148
- this.left(e);
149
- this.up(e);
150
- },
151
- },
152
- };
@@ -1,104 +0,0 @@
1
- <template>
2
- <!-- 拖拉缩放效果 -->
3
- <div class="resize-box">
4
- <div class="rRightDown" @mousedown="start($event, rightDown)"> </div>
5
- <div class="rLeftDown" @mousedown="start($event, leftDown)"> </div>
6
- <div class="rRightUp" @mousedown="start($event, rightUp)"> </div>
7
- <div class="rLeftUp" @mousedown="start($event, leftUp)"> </div>
8
- <div class="rRight" @mousedown="start($event, right)"> </div>
9
- <div class="rLeft" @mousedown="start($event, left)"> </div>
10
- <div class="rDown" @mousedown="start($event, down)"></div>
11
- <div class="rUp" @mousedown="start($event, up)"> </div>
12
- </div>
13
- </template>
14
-
15
- <script lang="ts" src="./Resize.ts"></script>
16
-
17
- <style lang="less" scoped>
18
- .rRightDown,
19
- .rLeftDown,
20
- .rLeftUp,
21
- .rRightUp,
22
- .rRight,
23
- .rLeft,
24
- .rUp,
25
- .rDown {
26
- position: absolute;
27
- background: #c00;
28
- width: 7px;
29
- height: 7px;
30
- z-index: 5;
31
- font-size: 0;
32
- }
33
-
34
- .rLeftDown, .rRightUp {
35
- cursor: ne-resize;
36
- }
37
-
38
- .rRightDown, .rLeftUp {
39
- cursor: nw-resize;
40
- }
41
-
42
- .rRight, .rLeft {
43
- cursor: e-resize;
44
- }
45
-
46
- .rUp, .rDown {
47
- cursor: n-resize;
48
- }
49
-
50
- .rLeftDown {
51
- left: -4px;
52
- bottom: -4px;
53
- }
54
-
55
- .rRightUp {
56
- right: -4px;
57
- top: -4px;
58
- }
59
-
60
- .rRightDown {
61
- right: -4px;
62
- bottom: -4px;
63
- background-color: 0f;
64
- }
65
-
66
- .rLeftUp {
67
- left: -4px;
68
- top: -4px;
69
- }
70
-
71
- .rRight {
72
- right: -4px;
73
- top: 50%;
74
- margin-top: -4px;
75
- }
76
-
77
- .rLeft {
78
- left: -4px;
79
- top: 50%;
80
- margin-top: -4px;
81
- }
82
-
83
- .rUp {
84
- top: -4px;
85
- left: 50%;
86
- margin-left: -4px;
87
- }
88
-
89
- .rDown {
90
- bottom: -4px;
91
- left: 50%;
92
- margin-left: -4px;
93
- }
94
-
95
- .resize-box {
96
- border: 1px solid gray;
97
- width: 100px;
98
- height: 60px;
99
- top: 150px;
100
- left: 550px;
101
- background: #fff;
102
- position: absolute;
103
- }
104
- </style>
@@ -1,4 +0,0 @@
1
- <!-- 下拉分类 -->
2
- <template>
3
-
4
- </template>