vue自定义组件

Posted 2020-10-04

使用别人的组件：

比如:Vue.use(Vuesource);

Vue.use(VueRouter);

Vue.use(MintUI);

1.自定义全局组件：

使用

<Loading></Loading>

2.main.js

 1 import Vue from ‘vue‘
 2 import App from ‘./App.vue‘
 3 
 4 import Loading from ‘./components/loading‘
 5 
 6 Vue.use(Loading)
 7 
 8 new Vue({
 9     el: ‘#app‘,
10     render: h => h(App)
11 })

App.vue

 1 <template>
 2   <div id="app">
 3     <h3>welcome vue-loading</h3>
 4     <Loading></Loading>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10   name: ‘app‘,
11   data () {
12     return {
13       msg: ‘Welcome to Your Vue.js App‘
14     }
15   }
16 }
17 </script>
18 
19 <style>
20 #app {
21   font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
22   -webkit-font-smoothing: antialiased;
23   -moz-osx-font-smoothing: grayscale;
24   text-align: center;
25   color: #2c3e50;
26   margin-top: 60px;
27 }
28 
29 h1, h2 {
30   font-weight: normal;
31 }
32 
33 ul {
34   list-style-type: none;
35   padding: 0;
36 }
37 
38 li {
39   display: inline-block;
40   margin: 0 10px;
41 }
42 
43 a {
44   color: #42b983;
45 }
46 </style>

index.js

1 import LoadingComponent from ‘./Loading.vue‘
2 
3 const Loading = {
4     install: function(Vue) {
5         Vue.component(‘Loading‘, LoadingComponent)
6     }
7 };
8 
9 export default Loading

Loading.vue

 1 <template>
 2     <div class="loader">
 3         <div class="loader-inner ball-spin-fade-loader">
 4           <div></div>
 5           <div></div>
 6           <div></div>
 7           <div></div>
 8           <div></div>
 9           <div></div>
10           <div></div>
11           <div></div>
12         </div>
13     </div>
14 </template>
15 <style scoped>
16     .loader{
17         width:80px;
18         height: 80px;
19         margin:50px auto;
20     }
21     @keyframes ball-spin-fade-loader {
22   50% {
23     opacity: 0.3;
24     -webkit-transform: scale(0.4);
25             transform: scale(0.4); }
26 
27   100% {
28     opacity: 1;
29     -webkit-transform: scale(1);
30             transform: scale(1); } }
31 
32 .ball-spin-fade-loader {
33   position: relative; }
34   .ball-spin-fade-loader > div:nth-child(1) {
35     top: 25px;
36     left: 0;
37     -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
38             animation: ball-spin-fade-loader 1s 0s infinite linear; }
39   .ball-spin-fade-loader > div:nth-child(2) {
40     top: 17.04545px;
41     left: 17.04545px;
42     -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
43             animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
44   .ball-spin-fade-loader > div:nth-child(3) {
45     top: 0;
46     left: 25px;
47     -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
48             animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
49   .ball-spin-fade-loader > div:nth-child(4) {
50     top: -17.04545px;
51     left: 17.04545px;
52     -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
53             animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
54   .ball-spin-fade-loader > div:nth-child(5) {
55     top: -25px;
56     left: 0;
57     -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
58             animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
59   .ball-spin-fade-loader > div:nth-child(6) {
60     top: -17.04545px;
61     left: -17.04545px;
62     -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
63             animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
64   .ball-spin-fade-loader > div:nth-child(7) {
65     top: 0;
66     left: -25px;
67     -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
68             animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
69   .ball-spin-fade-loader > div:nth-child(8) {
70     top: 17.04545px;
71     left: -17.04545px;
72     -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
73             animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
74   .ball-spin-fade-loader > div {
75     background-color: #399;
76     width: 15px;
77     height: 15px;
78     border-radius: 100%;
79     margin: 2px;
80     -webkit-animation-fill-mode: both;
81             animation-fill-mode: both;
82     position: absolute; }
83 </style>

运行结果：引入了自定义组件loading