在js组件网站上，查看那个组件好看就用，把他们结构和样式分别写在 组件文件内.loading.vue组件
做一下组件的测试/引用
运行的效果
封装完好的，js组件
loading HTML和css样式
1 <template>
2 <div class="loader" v-if="flag">
3 <div class="loader-inner">
4 <div class="loader-line-wrap">
5 <div class="loader-line"></div>
6 </div>
7 <div class="loader-line-wrap">
8 <div class="loader-line"></div>
9 </div>
10 <div class="loader-line-wrap">
11 <div class="loader-line"></div>
12 </div>
13 <div class="loader-line-wrap">
14 <div class="loader-line"></div>
15 </div>
16 <div class="loader-line-wrap">
17 <div class="loader-line"></div>
18 </div>
19 </div>
20 </div>
21 </template>
22
23 <script>
24 export default {};
25 </script>
26
27 <style>
28
29 .loader {
30 background:rgba(0,0,0,.3);
31 bottom: 0;
32 left: 0;
33 overflow: hidden;
34 position: fixed;
35 right: 0;
36 top: 0;
37 z-index: 99999;
38 }
39
40 .loader-inner {
41 bottom: 0;
42 height: 60px;
43 left: 0;
44 margin: auto;
45 position: absolute;
46 right: 0;
47 top: 0;
48 width: 100px;
49 }
50
51 .loader-line-wrap {
52 animation:
53 spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
54 ;
55 box-sizing: border-box;
56 height: 50px;
57 left: 0;
58 overflow: hidden;
59 position: absolute;
60 top: 0;
61 transform-origin: 50% 100%;
62 width: 100px;
63 }
64 .loader-line {
65 border: 4px solid transparent;
66 border-radius: 100%;
67 box-sizing: border-box;
68 height: 100px;
69 left: 0;
70 margin: 0 auto;
71 position: absolute;
72 right: 0;
73 top: 0;
74 width: 100px;
75 }
76 .loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
77 .loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
78 .loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
79 .loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
80 .loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
81
82 .loader-line-wrap:nth-child(1) .loader-line {
83 border-color: hsl(0, 80%, 60%);
84 height: 90px;
85 width: 90px;
86 top: 7px;
87 }
88 .loader-line-wrap:nth-child(2) .loader-line {
89 border-color: hsl(60, 80%, 60%);
90 height: 76px;
91 width: 76px;
92 top: 14px;
93 }
94 .loader-line-wrap:nth-child(3) .loader-line {
95 border-color: hsl(120, 80%, 60%);
96 height: 62px;
97 width: 62px;
98 top: 21px;
99 }
100 .loader-line-wrap:nth-child(4) .loader-line {
101 border-color: hsl(180, 80%, 60%);
102 height: 48px;
103 width: 48px;
104 top: 28px;
105 }
106 .loader-line-wrap:nth-child(5) .loader-line {
107 border-color: hsl(240, 80%, 60%);
108 height: 34px;
109 width: 34px;
110 top: 35px;
111 }
112
113 @keyframes spin {
114 0%, 15% {
115 transform: rotate(0);
116 }
117 100% {
118 transform: rotate(360deg);
119 }
120 }
121 </style>
loading 的js 文件
1 import Loading from "./index.vue";
2 import Vue from "vue";
3 export default () => {
4
5
6 let LoadingComponent = Vue.extend(Loading);
7
8 let child = new LoadingComponent({
9 el: document.createElement("div"),
10 data:{
11 flag:false
12 },
13 methods: {
14 handlemount() {
15 this.flag = true;
16 },
17 handleDestory() {
18 this.flag = false;
19 }
20 }
21 })
22
23 document.body.appendChild(child.$mount().$el)
24 return child;
25
26 }
总结：
从网络获取js 组件的html和css ,作为一个组件 写入组件中，（最好创建一个文件是这个组件的名称，index.vue 用来放HTML和CSS,index.js 用来写逻辑）
js组件的思路： 我想要这个组件的时候调用一下这个组件的方法就可以了，我不用的时候就移除。