├── src
    ├── assets
    │   ├── logo.png
    │   ├── image
    │   │   ├── scroll.png
    │   │   ├── 20180827005509615.jpg
    │   │   ├── t0103968d1bc80ae8ba.png
    │   │   ├── t014cad66c488e589f3.png
    │   │   ├── t016fed337a2131cd83.jpg
    │   │   ├── t01a83ee242957a054f.png
    │   │   ├── t01b68886e4ba7bb7c5.png
    │   │   ├── t01d91636862957f76e.png
    │   │   ├── t01e6e7b1790fcb40b2.jpg
    │   │   └── t01e7d89615e1846abe.jpg
    │   └── css
    │   │   └── common.less
    ├── main.js
    ├── components
    │   ├── zujian.vue
    │   ├── container
    │   │   ├── aside.vue
    │   │   ├── main.vue
    │   │   ├── footer.vue
    │   │   ├── header.vue
    │   │   └── index.vue
    │   ├── timeline
    │   │   ├── index.vue
    │   │   ├── timelineItem.vue
    │   │   └── timelineTree.vue
    │   ├── tabs
    │   │   ├── tab.vue
    │   │   └── index.vue
    │   ├── carousel
    │   │   ├── carouselItem.vue
    │   │   └── index.vue
    │   ├── index.js
    │   ├── scrolltop
    │   │   └── index.vue
    │   ├── navmenu
    │   │   ├── submenu.vue
    │   │   └── index.vue
    │   ├── card
    │   │   └── index.vue
    │   └── codecard
    │   │   └── index.vue
    └── App.vue
├── .babelrc
├── .gitignore
├── .editorconfig
├── index.html
├── README.md
├── package.json
└── webpack.config.js


/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanxin42/sir-zujian/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env", { "modules": false }],
4 |     "stage-3"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/src/assets/image/scroll.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanxin42/sir-zujian/HEAD/src/assets/image/scroll.png


--------------------------------------------------------------------------------
/src/assets/image/20180827005509615.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanxin42/sir-zujian/HEAD/src/assets/image/20180827005509615.jpg


--------------------------------------------------------------------------------
/src/assets/image/t0103968d1bc80ae8ba.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanxin42/sir-zujian/HEAD/src/assets/image/t0103968d1bc80ae8ba.png


--------------------------------------------------------------------------------
/src/assets/image/t014cad66c488e589f3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanxin42/sir-zujian/HEAD/src/assets/image/t014cad66c488e589f3.png


--------------------------------------------------------------------------------
/src/assets/image/t016fed337a2131cd83.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanxin42/sir-zujian/HEAD/src/assets/image/t016fed337a2131cd83.jpg


--------------------------------------------------------------------------------
/src/assets/image/t01a83ee242957a054f.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanxin42/sir-zujian/HEAD/src/assets/image/t01a83ee242957a054f.png


--------------------------------------------------------------------------------
/src/assets/image/t01b68886e4ba7bb7c5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanxin42/sir-zujian/HEAD/src/assets/image/t01b68886e4ba7bb7c5.png


--------------------------------------------------------------------------------
/src/assets/image/t01d91636862957f76e.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanxin42/sir-zujian/HEAD/src/assets/image/t01d91636862957f76e.png


--------------------------------------------------------------------------------
/src/assets/image/t01e6e7b1790fcb40b2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanxin42/sir-zujian/HEAD/src/assets/image/t01e6e7b1790fcb40b2.jpg


--------------------------------------------------------------------------------
/src/assets/image/t01e7d89615e1846abe.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yuanxin42/sir-zujian/HEAD/src/assets/image/t01e7d89615e1846abe.jpg


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log
 5 | yarn-error.log
 6 | 
 7 | # Editor directories and files
 8 | .idea
 9 | *.suo
10 | *.ntvs*
11 | *.njsproj
12 | *.sln
13 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import sir from './components/index.js'
4 | Vue.use(sir)
5 | new Vue({
6 |   el: '#app',
7 |   render: h => h(App)
8 | })
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/src/components/zujian.vue:
--------------------------------------------------------------------------------
 1 | <!--https://www.cnblogs.com/shapeY/p/7875930.html -->
 2 | <template>
 3 |     <div>我是那个全局组件啊啊啊</div>
 4 | </template>
 5 | <script>
 6 | export default {
 7 | 
 8 | }
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>sirpackages</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <script src="/dist/build.js"></script>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/src/components/container/aside.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="aside" :style="{width:width,height:height}">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     props: {
 9 |         width: String | Number,
10 |         height: String | Number
11 |     },
12 |     data() {
13 |         return {
14 |         }
15 |     },
16 |     created() {
17 |     }
18 | }
19 | </script>
20 | <style lang="less" scoped>
21 | .aside {
22 |     background: #d3dce6;
23 |     width: 100%;
24 | }
25 | </style>


--------------------------------------------------------------------------------
/src/components/container/main.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="main" :style="{width:width,height:height}">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     props: {
 9 |         width: String | Number,
10 |         height: String | Number
11 |     },
12 |     data() {
13 |         return {
14 |         }
15 |     },
16 |     created() {
17 |     }
18 | }
19 | </script>
20 | <style lang="less" scoped>
21 | .main {
22 |     padding: 20px;
23 |     background: #e9eef3;
24 |     width: 100%;
25 | }
26 | </style>


--------------------------------------------------------------------------------
/src/assets/css/common.less:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | body {
 6 |   font-family: arial, "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1";
 7 |   color: #333;
 8 | }
 9 | a{
10 |     text-decoration: none;
11 |     color: #333;
12 |     text-align: center;
13 | }
14 | h1,
15 | h2,
16 | h3,
17 | h4,
18 | h5 {
19 |   font-weight: normal;
20 | }
21 | 
22 | ul {
23 |   list-style: none;
24 |   padding: 0;
25 | }
26 | 
27 | li {
28 |   list-style: none;
29 |   display: inline-block;
30 | }
31 | .boxzero() {
32 |     padding: 0;
33 |     margin: 0;
34 |     padding: 0;
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/container/footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="footer" :style="{width:width,height:height,lineHeight:height}">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     name: 'sir-header',
 9 |     props: {
10 |         width: String | Number,
11 |         height: {
12 |             default: '60px',
13 |             type: String | Number
14 |         }
15 |     },
16 |     data() {
17 |         return {
18 |         }
19 |     },
20 |     created() {
21 |     }
22 | }
23 | </script>
24 | <style lang="less" scoped>
25 | .footer {
26 |     background: #b3c0d1;
27 |     width: 100%;
28 |     padding-left: 20px;
29 | }
30 | </style>


--------------------------------------------------------------------------------
/src/components/container/header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="header" :style="{width:width,height:height,lineHeight:height}">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     name: 'sir-header',
 9 |     props: {
10 |         width: String | Number,
11 |         height: {
12 |             default: '60px',
13 |             type: String | Number
14 |         }
15 |     },
16 |     data() {
17 |         return {
18 |         }
19 |     },
20 |     created() {
21 |     }
22 | }
23 | </script>
24 | <style lang="less" scoped>
25 | .header {
26 |     background: #b3c0d1;
27 |     width: 100%;
28 |     padding-left: 20px;
29 | }
30 | </style>


--------------------------------------------------------------------------------
/src/components/timeline/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="timeline" :style="{width:width,height:height}">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     name:'timeline',
 9 |     props: {
10 |         width: {
11 |             default: 'auto',
12 |             type: String | Number
13 |         },
14 |         height: {
15 |             default: 'auto',
16 |             type: String | Number
17 |         },
18 |         title: {
19 |             default: '时间轴',
20 |             type: String | Number
21 |         },
22 |         titlewidth: {
23 |             default: '60px',
24 |             type: String | Number
25 |         },
26 |     },
27 |     data() {
28 |         return {
29 |         }
30 |     },
31 |     created() {
32 |     }
33 | }
34 | </script>
35 | <style lang="less" scoped>
36 | 
37 | </style>


--------------------------------------------------------------------------------
/src/components/container/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="{container:true,headerorfooter:isheaderorfooter}" :style="{width:width+'px',height:height+'px'}">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     props: {
 9 |         width: String | Number,
10 |         height: String | Number
11 |     },
12 |     data() {
13 |         return {
14 |             isheaderorfooter:false
15 |         }
16 |     },
17 |     mounted() {
18 |         this.$children.forEach((vm) => {
19 |             if (vm.$options.name === 'sir-header'||vm.$options.name === 'sir-footer') {
20 |                 this.isheaderorfooter = true
21 |             }
22 |         })
23 |     }
24 | }
25 | </script>
26 | <style lang="less" scoped>
27 | .container {
28 |     background: purple;
29 |     display: flex; // flex-direction: column-reverse;
30 | }
31 | .headerorfooter{
32 |     flex-direction:column;
33 |     width: 100%;
34 | }
35 | </style>


--------------------------------------------------------------------------------
/src/components/tabs/tab.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="tab" v-if="isname === name" :style="{width:width,height:height}" :slot="name">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     name: 'sir-tab',
 9 |     props: {
10 |         width: {
11 |             default: '100%',
12 |             type: String | Number
13 |         },
14 |         height: String | Number,
15 |         label: String,
16 |         name: String
17 |     },
18 |     inject: ['eventBus'],
19 |     watch:{
20 | 
21 |     },
22 |     data() {
23 |         return {
24 |             isname : ''
25 |         }
26 |     },
27 |     mounted() {
28 |         // this.isname = this.$parent.tabname
29 |         this.eventBus.$on('update:selected', (vm) => {
30 |             this.isname = vm;
31 |         })
32 |     },
33 |     created() {
34 |     }
35 | }
36 | </script>
37 | <style lang="less" scoped>
38 | @import "../../assets/css/common.less";
39 | </style>
40 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # sirpackages
 2 | 
 3 | > vue组件库
 4 | 
 5 | > 不断维护版本迭代中
 6 | 
 7 | > 组件库api访问 : http://yyyxxxxin.top/sir（服务到期）
 8 | 
 9 | > 基于组件库开发的博客 : http://yyyxxxxin.top/myblog（服务到期）
10 | 
11 | ### 项目特点
12 | 1. 参考现在社区比较成熟如ElementUI，Ant Design，Material UI这些UI轮子的API设计和样式布局。
13 | 2. 该项目基于Vue2.x版本来开发和使用
14 | 3. 如果您访问了我的组件库地址，并问我为什么不用GitBook或者VuePress去写这个组件文档？emmmm...因为那时候还不知道这些东西
15 | 4. 有独特的style补充第三条，哈哈！
16 | 
17 | ## Build Setup
18 | 
19 | ``` bash
20 | 
21 | npm install sirpackages
22 | 
23 | ```
24 | ### 支持组件（持续更新研发中。。。。）
25 | 1. contain布局（sir-header/sir-footer/sir-main/sir-aside）
26 | 2. card卡片
27 | 3. navmenu导航菜单 (sir-navmenu/sir-submenu)
28 | 4. scrolltop 跳转头部滚动条 
29 | 5. tabs选项卡 (sir-tabs/sir-tab)
30 | 6. timeline 时间轴 (sir-timeline/sir-timelineItem/sir-timelineTree)
31 | 7. carousel 轮播图 (开发中)
32 | 
33 | ### https://github.com/yuanxin666/sir-zujian 感兴趣给个Star，感激不尽！
34 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sirpackages",
 3 |   "description": "一个vue组件库",
 4 |   "version": "1.1.6",
 5 |   "author": "原鑫 <1017123610@qq.com>",
 6 |   "license": "MIT",
 7 |   "private": false,
 8 |   "main": "dist/sir.js",
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/yuanxin666/sir-zujian.git"
12 |   },
13 |   "scripts": {
14 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
15 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
16 |   },
17 |   "dependencies": {
18 |     "less": "^3.8.1",
19 |     "less-loader": "^4.1.0",
20 |     "vue": "^2.5.11"
21 |   },
22 |   "browserslist": [
23 |     "> 1%",
24 |     "last 2 versions",
25 |     "not ie <= 8"
26 |   ],
27 |   "devDependencies": {
28 |     "babel-core": "^6.26.0",
29 |     "babel-loader": "^7.1.2",
30 |     "babel-preset-env": "^1.6.0",
31 |     "babel-preset-stage-3": "^6.24.1",
32 |     "cross-env": "^5.0.5",
33 |     "css-loader": "^0.28.7",
34 |     "file-loader": "^1.1.4",
35 |     "vue-loader": "^13.0.5",
36 |     "vue-template-compiler": "^2.4.4",
37 |     "webpack": "^3.6.0",
38 |     "webpack-dev-server": "^2.9.1"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/timeline/timelineItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <li :style="{width:width,height:height}" class="timelineItem">
 3 |         <span class="smallCircle">
 4 |             <span class="smallCircleChildren"></span>
 5 |         </span>
 6 |         <slot></slot>
 7 |     </li>
 8 | </template>
 9 | <script>
10 | export default {
11 |     props: {
12 |         width: String | Number,
13 |         height: String | Number
14 |     },
15 |     data() {
16 |         return {
17 |         }
18 |     },
19 |     created() {
20 |     }
21 | }
22 | </script>
23 | <style lang="less" scoped>
24 | .mixinCircle() {
25 |     display: inline-block;
26 |     border-radius: 50%;
27 | }
28 | 
29 | 
30 | .timelineItem:after {
31 |     position: absolute;
32 |     left: 0;
33 |     background: #00bbff;
34 |     width: 4px;
35 |     height: 100%;
36 |     content: "";
37 |     top: 0px;
38 | }
39 | 
40 | .timelineItem {
41 |     position: relative;
42 |     padding-left: 20px;
43 |     min-height: 30px;
44 | }
45 | 
46 | .smallCircle {
47 |     position: absolute;
48 |     background: #fff;
49 |     z-index: 1;
50 | }
51 | 
52 | .smallCircle {
53 |     width: 14px;
54 |     height: 14px;
55 |     text-align: center;
56 |     line-height: 12px;
57 |     left: -6.5px;
58 |     border: 1px solid #ccc;
59 |     .mixinCircle();
60 |     .smallCircleChildren {
61 |         width: 10px;
62 |         height: 10px;
63 |         .mixinCircle();
64 |         background: #00bbff;
65 |     }
66 | }
67 | </style>


--------------------------------------------------------------------------------
/src/components/carousel/carouselItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="sir-carouselItem" :style="sirStyle">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     name: 'sir-carouselItem',
 9 |     props: {
10 |         width: {
11 |             default: '100%',
12 |             type: String | Number
13 |         },
14 |         height: {
15 |             default: '100%',
16 |             type: String | Number
17 |         }
18 |     },
19 |     computed: {
20 |         sirStyle() {
21 |             return {
22 |                 width: this.width,
23 |                 height: this.height,
24 |                 opacity: this.isopacity,
25 |                 transition: `all ${this.seconds}s ease`,
26 |                 zIndex: this.zIndex
27 |             }
28 |         }
29 |     },
30 |     methods: {
31 |     },
32 |     data() {
33 |         return {
34 |             carouselItem: '123',
35 |             isopacity: 1,
36 |             seconds: '1.5',
37 |             zIndex: '0'
38 |         }
39 |     },
40 |     created() {
41 |         if (this.$parent.$props.time) {
42 |             this.seconds = this.$parent.$props.time / 1000
43 |             console.log(this.$parent.$props.time, 'this.$parents')
44 |         } else {
45 |             console.log('组件使用不正确')
46 |         }
47 | 
48 |     }
49 | }
50 | </script>
51 | <style lang="less" scoped>
52 | .sir-carouselItem {
53 |     position: absolute;
54 |     img {
55 |         width: 100%;
56 |         height: 100%;
57 |     }
58 |     overflow: hidden;
59 | }
60 | </style>


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
 1 | import zj from './zujian'
 2 | import card from './card'
 3 | import container from './container/index'
 4 | import aside from './container/aside'
 5 | import footer from './container/footer'
 6 | import header from './container/header'
 7 | import main from './container/main'
 8 | import tabs from './tabs/index'
 9 | import tab from './tabs/tab'
10 | import carousel from './carousel/index'
11 | import carouselItem from './carousel/carouselItem'
12 | import scrolltop from './scrolltop/index'
13 | import navmenu from './navmenu/index'
14 | import submenu from './navmenu/submenu'
15 | import codecard from './codecard/index'
16 | import timeline from './timeline/index'
17 | import timelineTree from './timeline/timelineTree'
18 | import timelineItem from './timeline/timelineItem'
19 | 
20 | export default {
21 |   install: (Vue) => {
22 |     Vue.component('sir-zj', zj)
23 |     Vue.component('sir-card', card)
24 |     Vue.component('sir-container', container)
25 |     Vue.component('sir-aside', aside)
26 |     Vue.component('sir-footer', footer)
27 |     Vue.component('sir-header', header)
28 |     Vue.component('sir-main', main)
29 |     Vue.component('sir-tabs', tabs)
30 |     Vue.component('sir-tab', tab)
31 |     Vue.component('sir-carousel', carousel)
32 |     Vue.component('sir-carousel-item', carouselItem)
33 |     Vue.component('sir-scrolltop', scrolltop)
34 |     Vue.component('sir-navmenu', navmenu)
35 |     Vue.component('sir-submenu', submenu)
36 |     Vue.component('sir-codecard', codecard)  
37 |     Vue.component('sir-timeline', timeline)
38 |     Vue.component('sir-timelineTree', timelineTree)
39 |     Vue.component('sir-timelineItem', timelineItem)
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/components/scrolltop/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="{scroll:true,scrolldown:isdown}">
 3 |         <a :href="sirSrc" class="scrollA">
 4 |             <img class="scrollPic" :src="scrollImg" alt="">
 5 |         </a>
 6 |     </div>
 7 | </template>
 8 | <script>
 9 | export default {
10 |     props: {
11 |         width: String | Number,
12 |         height: String | Number,
13 |         scrollTop: {
14 |             default: '400px',
15 |             type: String | Number
16 |         },
17 |         sirSrc: {
18 |             default: 'https://www.baidu.com',
19 |             type: String
20 |         },
21 |         scrollImg: {
22 |             default: 'https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/scroll.png',
23 |             type: String
24 |         }
25 |     },
26 |     data() {
27 |         return {
28 |             isdown: false
29 |         }
30 |     },
31 |     methods: {
32 |         handleScroll() {
33 |             let scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
34 |             let todown = +this.scrollTop.slice(0, this.scrollTop.match(/px$/).index)
35 |             if (scroll > todown) {
36 |                 this.isdown = true;
37 |             } else {
38 |                 this.isdown = false;
39 |             }
40 |         }
41 |     },
42 |     created() {
43 |     },
44 |     mounted() {
45 |         window.addEventListener('scroll', this.handleScroll)
46 |     }
47 | }
48 | </script>
49 | <style lang="less" scoped>
50 | .scroll {
51 |     height: 500px;
52 |     overflow: hidden;
53 |     position: fixed;
54 |     right: 0px;
55 |     top: -500px;
56 |     z-index: 9;
57 |     transition: all 0.5s ease;
58 |     .scrollA {
59 |         .scrollPic {
60 |             margin-top: -400px;
61 |         }
62 |     }
63 | }
64 | 
65 | .scrolldown {
66 |     top: 0;
67 | }
68 | </style>


--------------------------------------------------------------------------------
/src/components/navmenu/submenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <li class="submenu" :style="sirStyle" @mouseenter="sirenter" @mouseleave="sirleave">
 3 |         <slot></slot>
 4 |         <div class="submenuAfter" :style="{background:color}"></div>
 5 |     </li>
 6 | </template>
 7 | <script>
 8 | export default {
 9 |     props: {
10 |         width: {
11 |             default: 'auto',
12 |             type: String | Number
13 |         },
14 |         height: {
15 |             default: 'auto',
16 |             type: String | Number
17 |         },
18 |         color: {
19 |             default: '#fe9600',
20 |             type: String
21 |         }
22 |     },
23 |     computed: {
24 |         sirStyle() {
25 |             return {
26 |                 width: this.width,
27 |                 height: this.height,
28 |                 lineHeight: this.height,
29 |                 color: this.sircolor
30 |             }
31 |         }
32 |     },
33 |     methods:{
34 |         sirenter(){
35 |             this.sircolor = this.color
36 |         },
37 |         sirleave(){
38 |             this.sircolor = '#666'
39 |         }
40 |     },
41 |     data() {
42 |         return {
43 |             sircolor:'#666'
44 |         }
45 |     },
46 |     created() {
47 |     }
48 | }
49 | </script>
50 | <style lang="less" scoped>
51 | p {
52 |     background: red;
53 | }
54 | 
55 | .submenu {
56 |     float: left;
57 |     margin-right: 10px;
58 |     color: #666;
59 |     position: relative;
60 |     overflow: hidden;
61 |     &:hover {
62 |         .submenuAfter{
63 |             left: 0;
64 |         }
65 |     }
66 |     .submenuAfter {
67 |         content: "";
68 |         display: block;
69 |         position: absolute;
70 |         bottom: 0px;
71 |         left: -105%;
72 |         height: 6px;
73 |         width: 100%;
74 |         transition: all 0.5s ease;
75 |     }
76 | }
77 | 
78 | li {
79 |     list-style: none;
80 | }
81 | </style>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/main.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'build.js',  //打包生成文件的名字
10 |   },
11 |   module: {
12 |     rules: [
13 |       {
14 |         test: /\.css$/,
15 |         use: [
16 |           'vue-style-loader',
17 |           'css-loader'
18 |         ],
19 |       },      {
20 |         test: /\.vue$/,
21 |         loader: 'vue-loader',
22 |         options: {
23 |           loaders: {
24 |           }
25 |           // other vue-loader options go here
26 |         }
27 |       },
28 |       {
29 |         test: /\.js$/,
30 |         loader: 'babel-loader',
31 |         exclude: /node_modules/
32 |       },
33 |       {
34 |         test: /\.(png|jpg|gif|svg)$/,
35 |         loader: 'file-loader',
36 |         options: {
37 |           name: '[name].[ext]?[hash]'
38 |         }
39 |       }
40 |     ]
41 |   },
42 |   resolve: {
43 |     alias: {
44 |       'vue$': 'vue/dist/vue.esm.js'
45 |     },
46 |     extensions: ['*', '.js', '.vue', '.json']
47 |   },
48 |   devServer: {
49 |     historyApiFallback: true,
50 |     noInfo: true,
51 |     overlay: true
52 |   },
53 |   performance: {
54 |     hints: false
55 |   },
56 |   devtool: '#eval-source-map'
57 | }
58 | 
59 | if (process.env.NODE_ENV === 'production') {
60 |   module.exports.devtool = '#source-map'
61 |   // http://vue-loader.vuejs.org/en/workflow/production.html
62 |   module.exports.plugins = (module.exports.plugins || []).concat([
63 |     new webpack.DefinePlugin({
64 |       'process.env': {
65 |         NODE_ENV: '"production"'
66 |       }
67 |     }),
68 |     new webpack.optimize.UglifyJsPlugin({
69 |       sourceMap: true,
70 |       compress: {
71 |         warnings: false
72 |       }
73 |     }),
74 |     new webpack.LoaderOptionsPlugin({
75 |       minimize: true
76 |     })
77 |   ])
78 | }
79 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 | <!--111  -->
 4 |     <sir-navmenu sirbac='#fff' :issetlocation='false'>
 5 |       <div slot="navtop">
 6 |         首页
 7 |       </div>
 8 |       <div slot="allsubmenu">
 9 |         <sir-submenu>标题1</sir-submenu>
10 |         <sir-submenu>标题2</sir-submenu>
11 |         <sir-submenu>标题3</sir-submenu>
12 |       </div>
13 |     </sir-navmenu>
14 |     <sir-scrolltop></sir-scrolltop>
15 |     <sir-carousel width='700px' height='400px'>
16 |       <sir-carousel-item>
17 |         <img src="./assets/image/t01a83ee242957a054f.png" alt="">
18 |       </sir-carousel-item>
19 |       <sir-carousel-item>
20 |         <img src="./assets/image/t016fed337a2131cd83.jpg" alt="">
21 |       </sir-carousel-item>
22 |       <sir-carousel-item>
23 |         <img src="./assets/image/t01e7d89615e1846abe.jpg" alt="">
24 |       </sir-carousel-item>
25 |       <sir-carousel-item>
26 |         <img src="./assets/image/t016fed337a2131cd83.jpg" alt="">
27 |       </sir-carousel-item>
28 |     </sir-carousel>
29 |     <sir-timeline>
30 |       <sir-timelineTree title='时间轴:'>
31 |         <sir-timelineItem>4444</sir-timelineItem>
32 |         <sir-timelineItem>4444</sir-timelineItem>
33 |         <sir-timelineItem>4444</sir-timelineItem>
34 |       </sir-timelineTree>
35 |       <sir-timelineTree>
36 |         <sir-timelineItem>555</sir-timelineItem>
37 |         <sir-timelineItem>555</sir-timelineItem>
38 |         <sir-timelineItem>555</sir-timelineItem>
39 |       </sir-timelineTree>
40 |     </sir-timeline>
41 |   </div>
42 | </template>
43 | 
44 | <script>
45 | export default {
46 |   name: 'app',
47 |   data() {
48 |     return {
49 |       msg: './assets/image/t01b68886e4ba7bb7c5.png',
50 |       currentDate: new Date()
51 |     }
52 |   }
53 | }
54 | </script>
55 | 
56 | <style>
57 | #app {
58 |   height: 2000px;
59 |   /* background: powderblue; */
60 | }
61 | 
62 | .demo {
63 |   width: 700px;
64 |   height: 400px;
65 |   /* background: red;  */
66 | }
67 | </style>
68 | 


--------------------------------------------------------------------------------
/src/components/card/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div :class="sirClass" :style="sirStyle">
  3 |         <div class="cardBlockHeader">
  4 |             <slot name="cardHeader"></slot>
  5 |         </div>
  6 |         <div class="cardBlockFotter">
  7 |             <slot name='cardFotter'></slot>
  8 |         </div>
  9 |     </div>
 10 | </template>
 11 | <script>
 12 | export default {
 13 |     props: {
 14 |         width: {
 15 |             default: '100%',
 16 |             type: String | Number
 17 |         },
 18 |         height: String | Number,
 19 |         location: {
 20 |             default: 'top',
 21 |             type: String
 22 |         }
 23 |     },
 24 |     data() {
 25 |         return {
 26 |         }
 27 |     },
 28 |     computed: {
 29 |         sirStyle() {
 30 |             return {
 31 |                 width: this.width,
 32 |                 height: this.height
 33 |             }
 34 |         },
 35 |         sirClass() {
 36 |             return {
 37 |                 card: true,
 38 |                 carLocationLeft: this.location =='left',
 39 |                 carLocationRight: this.location =='right'
 40 |             }
 41 |         }
 42 |     },
 43 |     created() {
 44 |     }
 45 | }
 46 | </script>
 47 | <style lang="less" scoped>
 48 | @import "../../assets/css/common.less";
 49 | .card {
 50 |     border: 1px solid #e5e5e5;
 51 |     overflow: hidden;
 52 |     .cardBlockHeader {
 53 |         overflow: hidden;
 54 |         width: 100%;
 55 |         .cardHover {
 56 |             display: block;
 57 |             width: 100%;
 58 |             transition: all 0.5s ease;
 59 |         }
 60 |         .cardHover:hover {
 61 |             transform: scale(1.06);
 62 |         }
 63 |     }
 64 |     .cardBlockFotter {
 65 |         width: 100%;
 66 |         .cardTitle {
 67 |             margin: 12px;
 68 |             height: 20px;
 69 |             line-height: 20px;
 70 |             text-align: center;
 71 |             overflow: hidden;
 72 |             text-overflow: ellipsis;
 73 |             white-space: nowrap;
 74 |             a {
 75 |                 display: inline-block;
 76 |                 height: 20px;
 77 |                 line-height: 20px;
 78 |                 text-align: center;
 79 |                 font-size: 14px;
 80 |             }
 81 |         }
 82 |     }
 83 | }
 84 | 
 85 | .carLocationLeft {
 86 |     display: flex; 
 87 |     // justify-content:space-between;
 88 |     .cardBlockHeader {
 89 |         width: 50%;
 90 |     }
 91 |     .cardBlockFotter {
 92 |         width: 50%;
 93 |     }
 94 | }
 95 | .carLocationRight{
 96 |     .cardBlockHeader {
 97 |         width: 50%;
 98 |         float: right;
 99 |     }
100 |     .cardBlockFotter {
101 |         width: 50%;
102 |         float: left;
103 |     }
104 | }
105 | </style>
106 | 


--------------------------------------------------------------------------------
/src/components/timeline/timelineTree.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="sirTimelineTree">
  3 |         <span class="timelineTitle" :style="{width:titleParentWidth}">{{title}}&nbsp</span>
  4 |         <!-- 因为没给它设置高度，也不知道设置多少合适，索性让一个空格撑起来把  -->
  5 |         <ul :style="{width:width,height:height}" class="timelineTree">
  6 |             <li class="timelineItem">
  7 |                 <span class="bigCircle">
  8 |                     <span class="bigCircleChildren"></span>
  9 |                 </span>
 10 |             </li>
 11 |             <slot></slot>
 12 |         </ul>
 13 |     </div>
 14 | </template>
 15 | <script>
 16 | export default {
 17 |     props: {
 18 |         width: String | Number,
 19 |         height: String | Number,
 20 |         title: {
 21 |             default: '',
 22 |             type: String | Number
 23 |         }
 24 |     },
 25 |     computed: {
 26 |         titleParentWidth() {
 27 |             return this.$parent.titlewidth
 28 |         }
 29 |     },
 30 |     data() {
 31 |         return {
 32 |         }
 33 |     },
 34 |     created() {
 35 |         console.log(this.$options.name, '我是它的父级啊')
 36 |     }
 37 | }
 38 | </script>
 39 | <style lang="less" scoped>
 40 | .sirTimelineTree {
 41 |     .mixinCircle() {
 42 |         display: inline-block;
 43 |         border-radius: 50%;
 44 |     }
 45 | 
 46 |     .bigCircle {
 47 |         width: 20px;
 48 |         height: 20px;
 49 |         text-align: center;
 50 |         line-height: 21px;
 51 |         left: -9px;
 52 |         border: 1px solid #ccc;
 53 |         .mixinCircle();
 54 |         .bigCircleChildren {
 55 |             width: 13px;
 56 |             height: 13px;
 57 |             .mixinCircle();
 58 |             background: #00bbff;
 59 |         }
 60 |     }
 61 | 
 62 |     .timelineTitle {
 63 |         display: block;
 64 |         float: left;
 65 |         overflow: hidden;
 66 |         text-overflow: ellipsis;
 67 |         white-space: nowrap;
 68 |     }
 69 | 
 70 |     .timelineTree {
 71 |         float: left;
 72 |         list-style: none;
 73 |         margin: 0;
 74 |         .timelineItem:after {
 75 |             position: absolute;
 76 |             left: 0;
 77 |             background: #00bbff;
 78 |             width: 4px;
 79 |             height: 100%;
 80 |             content: "";
 81 |             top: 0px;
 82 |         }
 83 |         .timelineItem {
 84 |             position: relative;
 85 |             padding-left: 20px;
 86 |             min-height: 30px;
 87 |         }
 88 |         .bigCircle {
 89 |             position: absolute;
 90 |             background: #fff;
 91 |             z-index: 1;
 92 |         }
 93 |     }
 94 | }
 95 | 
 96 | .sirTimelineTree:after {
 97 |     display: block;
 98 |     clear: both;
 99 |     content: "";
100 |     visibility: hidden;
101 |     height: 0
102 | }
103 | </style>


--------------------------------------------------------------------------------
/src/components/codecard/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="codecard" :style="{width:width,height:height}">
 3 |         <sir-card>
 4 |             <div slot="cardHeader">
 5 |                 <slot name="cardHeader"></slot>
 6 |             </div>
 7 |             <div :class="{cardFotter:true}" slot="cardFotter">
 8 |                 <div :class="{cardFotterBlock:isshow, cardFotternone:!isshow}">
 9 |                     <pre>
10 |                             <slot name='cardFotter' >
11 |                             </slot>
12 |                         </pre>
13 |                 </div>
14 | 
15 |                 <div class="isshow">
16 |                     <span class="codebtnblock">
17 |                         <span :class="{codebtn:true}" v-if="isshow" @click="isshow=!isshow">隐藏代码</span>
18 |                         <span :class="{codebtn:true}" v-else class="codebtn codebtn2" @click="isshow=!isshow">显示代码</span>
19 |                     </span>
20 | 
21 |                 </div>
22 |             </div>
23 |         </sir-card>
24 |     </div>
25 | </template>
26 | <script>
27 | export default {
28 |     name: 'sir-codecard',
29 |     props: {
30 |         width: String | Number,
31 |         height: {
32 |             type: String | Number
33 |         }
34 |     },
35 |     data() {
36 |         return {
37 |             isshow: true
38 |         }
39 |     },
40 |     created() {
41 |     }
42 | }
43 | </script>
44 | <style lang="less" scoped>
45 | .codecard {
46 |     .cardFotter {
47 |         border-top: 1px solid #e5e5e5;
48 |         font-size: 18px;
49 |         font-weight: normal;
50 |         color: #2AAB51;
51 |         font-family: "SF Mono", "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
52 |     }
53 |     .cardFotterBlock {
54 |         overflow: hidden;
55 |         height: 100%;
56 |     }
57 |     .cardFotternone {
58 |         height: 0;
59 |         overflow: hidden;
60 |     }
61 |     .isshow {
62 |         width: 100%;
63 |         height: 44px;
64 |         line-height: 44px;
65 |         text-align: center;
66 |         border-top: 1px solid #e5e5e5;
67 |         .codebtnblock {
68 |             display: inline-block;
69 |             width: 100px;
70 |             height: 100%;
71 |             .codebtn {
72 |                 color: #409eff;
73 |                 cursor: pointer;
74 |                 &:before {
75 |                     content: '';
76 |                     display: inline-block;
77 |                     margin-right: 5px;
78 |                     width: 0;
79 |                     height: 0;
80 |                     border-bottom: 10px solid #409eff;
81 |                     border-left: 6px solid transparent;
82 |                     border-right: 6px solid transparent;
83 |                 }
84 |                 &:hover {}
85 |             }
86 |             .codebtn2 {
87 |                 &:before {
88 |                     border-bottom: 0;
89 |                     border-top: 10px solid #409eff;
90 |                 }
91 |             }
92 |         }
93 |     }
94 | }
95 | </style>


--------------------------------------------------------------------------------
/src/components/navmenu/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div :class="sirClass" :style="sirColor" @mouseenter="sirenter" @mouseleave="sirleave">
  3 |         <div class="navtop">
  4 |             <slot name="navtop"></slot>
  5 |         </div>
  6 |         <ul class="navmenu">
  7 |             <slot name="allsubmenu"></slot>
  8 |         </ul>
  9 |     </div>
 10 | </template>
 11 | <script>
 12 | export default {
 13 |     props: {
 14 |         width: String | Number,
 15 |         height: {
 16 |             type: String | Number,
 17 |             default: '70px'
 18 |         },
 19 |         sirbac: {  //  默认的导航菜单背景
 20 |             type: String,
 21 |             default: '#267439'
 22 |         },
 23 |         declinecolor: { // 下滑和鼠标移入时背景色
 24 |             type: String,
 25 |             default: 'rgba(66, 139, 202, 1)'
 26 |         },
 27 |         issetlocation: {  // 是否固定顶部
 28 |             type: Boolean,
 29 |             default: true
 30 |         },
 31 |         isdeclinebackground: {  // 鼠标下滑颜色是否改变
 32 |             type: Boolean,
 33 |             default: false
 34 |         }
 35 |     },
 36 |     data() {
 37 |         return {
 38 |             sirTop: false,
 39 |             navmenuBac:''
 40 |         }
 41 |     },
 42 |     computed: {
 43 |         sirColor() {
 44 |             return {
 45 |                 width: this.width,
 46 |                 height: this.height,
 47 |                 lineHeight: this.height,
 48 |                 background: this.navmenuBac || this.sirbac
 49 |             }
 50 |         },
 51 |         sirClass() {
 52 |             return {
 53 |                 navment: true,
 54 |                 sirTop: this.sirTop,
 55 |                 islocation: this.issetlocation
 56 |             }
 57 |         }
 58 |     },
 59 |     methods: {
 60 |         handleScroll() {
 61 |             let scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 62 |             if (scroll > 0 && this.isdeclinebackground) {
 63 |                 this.sirTop = true;
 64 |                 this.navmenuBac = this.declinecolor
 65 |             } else {
 66 |                 this.sirTop = false;
 67 |                 this.navmenuBac = this.sirbac
 68 |             }
 69 |         },
 70 |         sirenter() {
 71 |             this.navmenuBac = this.declinecolor
 72 |         },
 73 |         sirleave() {
 74 |             this.navmenuBac = this.sirbac
 75 |         }
 76 |     },
 77 |     created() {
 78 |         window.addEventListener('scroll', this.handleScroll)
 79 |     }
 80 | }
 81 | </script>
 82 | <style lang="less" scoped>
 83 | .navment {
 84 |     width: 100%;
 85 |     transition: all 0.5s ease;
 86 |     .navtop {
 87 |         float: left;
 88 |         margin-left: 20px;
 89 |         a {
 90 |             text-decoration: none;
 91 |             color: #333;
 92 |         }
 93 |     }
 94 |     .navmenu {
 95 |         margin: 0;
 96 |         padding: 0;
 97 |         margin-right: 20px;
 98 |         float: right;
 99 |     }
100 | }
101 | 
102 | .islocation {
103 |     position: fixed;
104 |     top: 0;
105 |     z-index: 10;
106 | }
107 | </style>


--------------------------------------------------------------------------------
/src/components/tabs/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div :class="{tabs:true,tableft:tabPosition==='left'}" :style="tabstyle">
  3 |         <ul :class="{nav:true,navleft:tabPosition==='left'}">
  4 |             <li :style="{width:labelwidth}" :class="{sirli:true,navchose:tabname===val.name}" v-for="(val,index) in tablist" :key="index" @click="changetab(val.name)">{{val.label}}</li>
  5 |         </ul>
  6 |         <div class="contain">
  7 |             <slot></slot>
  8 |         </div>
  9 |     </div>
 10 | </template>
 11 | <script>
 12 | import Vue from 'vue'
 13 | export default {
 14 |     props: {
 15 |         width: {
 16 |             default: '100%',
 17 |             type: String | Number
 18 |         },
 19 |         height: String | Number,
 20 |         tabPosition: {
 21 |             default: 'top',
 22 |             type: String
 23 |         },
 24 |         labelwidth: String,
 25 |     },
 26 |     computed: {
 27 |         tabstyle() {
 28 |             return {
 29 |                 width: this.width,
 30 |                 height: this.height
 31 |             }
 32 |         }
 33 |     },
 34 |     data() {
 35 |         return {
 36 |             tablist: [],
 37 |             tabname: '',
 38 |             eventBus: new Vue()
 39 |         }
 40 |     },
 41 |     provide() {
 42 |         return {
 43 |             eventBus: this.eventBus
 44 |         }
 45 |     },
 46 |     created() {
 47 |     },
 48 |     methods: {
 49 |         changetab(val) {
 50 |             this.tabname = val;
 51 |             this.eventBus.$emit('update:selected', this.tabname)
 52 |         }
 53 |     },
 54 |     mounted() {
 55 |         this.$children.forEach((vm) => {
 56 |             if (vm.$options.name === 'sir-tab') {
 57 |                 this.tablist.push(vm.$options.propsData)
 58 |             }
 59 |         })
 60 |         this.$nextTick(() => {
 61 |             if (this.tablist.length > 0) {
 62 |                 this.tabname = this.tablist[0].name
 63 |                 this.eventBus.$emit('update:selected', this.tabname)
 64 |             }
 65 |         })
 66 |     }
 67 | }
 68 | </script>
 69 | <style lang="less" scoped>
 70 | @import "../../assets/css/common.less";
 71 | .tabs {
 72 |     .nav {
 73 |         display: block;
 74 |         width: 100%;
 75 |         border-bottom: 1px solid #ccc;
 76 |         padding-bottom: 10px;
 77 |         .sirli {
 78 |             font-size: 14px;
 79 |             margin: 0 10px;
 80 |             text-align: center;
 81 |             padding: 10px 0 10px 0;
 82 |             margin: 0 20px -11px 0;
 83 |             cursor: pointer;
 84 |         }
 85 |         .navchose {
 86 |             color: #409eff;
 87 |             border-bottom: 2px solid #409eff;
 88 |         }
 89 |     }
 90 |     .contain{
 91 |         width: 100%;
 92 |         margin: 20px;
 93 |     }
 94 | }
 95 | 
 96 | .tableft {
 97 |     display: flex;
 98 |     .navleft {
 99 |         width: auto;
100 |         display: flex;
101 |         flex-direction: column;
102 |         border-bottom: 0;
103 |         border-right: 1px solid #ccc;
104 |         .sirli{
105 |             width: auto;
106 |             margin: 0px 0 10px 0;
107 |             padding: 10px 10px 0px 10px;
108 |             white-space:nowrap;
109 |             padding-right: 10px;
110 |         }
111 |         .navchose{
112 |             border-bottom: 0px;
113 |             margin-right: -1px;
114 |             padding-right: 29px;
115 |             border-right: 2px solid #409eff;
116 |         }
117 |     }
118 | }
119 | </style>
120 | 


--------------------------------------------------------------------------------
/src/components/carousel/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="carousel" @mouseenter="enter()" @mouseleave="leave()" :style="sirStyle">
  3 |     <slot></slot>
  4 |     <ul class="childitems">
  5 |       <li :class="{childitem:true,showItem:index==isshow}" v-for="(val,index) in carousel" :key="index"></li>
  6 |     </ul>
  7 |     <div class="carouselBtn leftBtn">
  8 |       <span class="font" @click="runLeft">&lt;</span>
  9 |     </div>
 10 |     <div class="carouselBtn rightBtn">
 11 |       <span class="font" @click="runRight">&gt;</span>
 12 |     </div>
 13 |   </div>
 14 | </template>
 15 | <script>
 16 | export default {
 17 |   name: 'carousel',
 18 |   props: {
 19 |     width: {
 20 |       type: String | Number,
 21 |       default: '100%',
 22 |     },
 23 |     height: {
 24 |       type: String | Number,
 25 |       default: '100%',
 26 |     },
 27 |     time: {
 28 |       type: String | Number,
 29 |       default: '1500',
 30 |     }
 31 |   },
 32 |   computed: {
 33 |     sirStyle() {
 34 |       return {
 35 |         height: this.height,
 36 |         width: this.width
 37 |       }
 38 |     }
 39 |   },
 40 |   data() {
 41 |     return {
 42 |       carousel: [],
 43 |       timer: "",
 44 |       isshow: 0
 45 |     }
 46 |   },
 47 |   methods: {
 48 |     init() {
 49 |       this.$children.forEach((vm, index) => {
 50 |         if (vm.$options.name === 'sir-carouselItem') {
 51 |           if (index === this.isshow) {
 52 |             vm.isopacity = '1'
 53 |           } else {
 54 |             vm.isopacity = '0'
 55 |           }
 56 |           this.carousel.push(vm)
 57 |         }
 58 |       })
 59 |     },
 60 |     toRun() {
 61 |       this.timer = setInterval(() => {
 62 |         this.isshow++
 63 |         if (this.isshow >= this.carousel.length) {
 64 |           this.isshow = 0
 65 |         }
 66 |         this.carousel.forEach((val, index) => {
 67 |           if (index === this.isshow) {
 68 |             val.isopacity = '1'
 69 |           } else {
 70 |             val.isopacity = '0'
 71 |           }
 72 |         })
 73 |       }, this.time)
 74 |     },
 75 |     enter() {
 76 |       clearInterval(this.timer)
 77 |     },
 78 |     leave() {
 79 |       this.toRun()
 80 |     },
 81 |     runRight() {
 82 |         this.isshow++
 83 |         if (this.isshow >= this.carousel.length) {
 84 |           this.isshow = 0
 85 |         }
 86 |         this.carousel.forEach((val, index) => {
 87 |           if (index === this.isshow) {
 88 |             val.isopacity = '1'
 89 |           } else {
 90 |             val.isopacity = '0'
 91 |           }
 92 |         })
 93 |     },
 94 |     runLeft() {
 95 |       this.isshow--
 96 |         if (this.isshow < 0) {
 97 |           this.isshow = this.carousel.length-1
 98 |         }
 99 |         this.carousel.forEach((val, index) => {
100 |           if (index === this.isshow) {
101 |             val.isopacity = '1'
102 |           } else {
103 |             val.isopacity = '0'
104 |           }
105 |         })
106 |     }
107 |   },
108 |   created() {
109 |   },
110 |   mounted() {
111 |     this.init()
112 |     this.toRun()
113 |   }
114 | }
115 | </script>
116 | <style lang="less" scoped>
117 | .carousel {
118 |   position: relative;
119 |   cursor: pointer;
120 |   overflow: hidden;
121 |   .childitems {
122 |     position: absolute;
123 |     bottom: 20px;
124 |     left: 50%;
125 |     transform: translateX(-50%);
126 |     .childitem {
127 |       width: 20px;
128 |       height: 20px;
129 |       background: #fff;
130 |       border-radius: 50%;
131 |       float: left;
132 |       margin-right: 20px;
133 |     }
134 |     .showItem {
135 |       background: orange;
136 |     }
137 |   }
138 |   .carouselBtn {
139 |     width: 5%;
140 |     height: 20%;
141 |     background: rgba(0, 0, 0, 0.7);
142 |     color: #fff;
143 |     text-align: center;
144 |     position: absolute;
145 |     top: 50%;
146 |     transform: translateY(-50%);
147 |     cursor: pointer;
148 |     display: flex;
149 |     align-items: center;
150 |     .font {
151 |       user-select:none;
152 |       font-size: 300%;
153 |     }
154 |   }
155 |   .leftBtn {
156 |     left: 2%;
157 |   }
158 |   .rightBtn {
159 |     left: auto;
160 |     right: 2%;
161 |   }
162 | }
163 | 
164 | li {
165 |   list-style: none;
166 | }
167 | </style>


--------------------------------------------------------------------------------