https://github.com/warpcgd/vue-tantan-stack

vue-tantan-stack
https://github.com/warpcgd/vue-tantan-stack

Last synced: about 2 months ago
JSON representation

vue-tantan-stack

• Host: GitHub
• URL: https://github.com/warpcgd/vue-tantan-stack
• Owner: warpcgd
• Created: 2017-12-21T07:15:46.000Z (over 6 years ago)
• Default Branch: v2.0
• Last Pushed: 2022-12-14T15:16:46.000Z (almost 2 years ago)
• Last Synced: 2024-04-17T10:47:26.355Z (5 months ago)
• Language: Vue
• Size: 8.75 MB
• Stars: 307
• Watchers: 8
• Forks: 119
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## vue-tantan-stack

[![npm](https://img.shields.io/npm/v/vue-tantan-stack.svg)](https://www.npmjs.com/package/vue-tantan-stack)

[![npm](https://img.shields.io/npm/dw/vue-tantan-stack.svg)](https://www.npmjs.com/package/vue-tantan-stack)

[![npm](https://img.shields.io/github/size/warpcgd/vue-tantan-stack/dist/module.js.svg)](https://www.npmjs.com/package/vue-tantan-stack)

![](tantan.gif)

### demo

  [demo](https://warpcgd.github.io/vue-tantan-stack/)

### 安装

```html

  npm install vue-tantan-stack --save

```

### 如何使用

```html

  


    


      

    

    


      prev

      next

    

  


import stack from '../components/stack'

export default {

  el: '#stack',

  data () {

    return {

      someList: [],

      stackinit: {

        visible: 3

      }

    }

  },

  mounted () {

    let that = this

    setTimeout(function () {

      that.someList = [

        {

          html: '<img src="src/img/1.png" alt="01">'

        },

        {

          html: '<img src="src/img/2.png" alt="02">'

        },

        {

          html: '<img src="src/img/3.png" alt="03">'

        },

        {

          html: '<img src="src/img/4.png" alt="04">'

        },

        {

          html: '<img src="src/img/5.png" alt="05">'

        },

        {

          html: '<img src="src/img/6.png" alt="06">'

        },

        {

          html: '<img src="src/img/7.png" alt="07">'

        }

      ]

    }, 2000)

  },

  components: {

    stack

  },

  methods: {

    prev () {

      this.$refs.stack.$emit('prev')

    },

    next () {

      this.$refs.stack.$emit('next')

    }

  }

}

  .stack-wrapper{

    margin: 0 auto;

    position: relative;

    z-index: 1000;

    width: 320px;

    height: 320px;

    padding: 0;

    list-style: none;

    pointer-events: none;

  }

  .controls{

    position: relative;

    width: 200px;

    text-align: center;

    display:flex;/*Flex布局*/

    display: -webkit-flex; /* Safari */

    justify-content:space-around;

    margin: 0 auto;

    margin-top: 50px

  }

  .controls .button {

    border: none;

    background: none;

    position: relative;

    display: inline-block;

    cursor: pointer;

    font-size: 16px;

    width: 50px;

    height: 50px;

    z-index: 100;

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    border-radius: 50%;

    background: #fff;

  }

  .button .next{

    display: inline-block;

    width: 10px;

    height:5px;

    background: rgb(129,212,125);

    line-height: 0;

    font-size:0;

    vertical-align: middle;

    -webkit-transform: rotate(45deg);

    left: -5px;

    top: 2px;

    position: relative;

  }

  .button .next:after{

    content:'/';

    display:block;

    width: 20px;

    height:5px;

    background: rgb(129,212,125);

    -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);

  }

  .button .prev{

    display: inline-block;

    width: 20px;

    height:5px;

    background: rgb(230,104,104);

    line-height: 0;

    font-size:0;

    vertical-align: middle;

    -webkit-transform: rotate(45deg);

  }

  .button .prev:after{

    content:'/';

    display:block;

    width: 20px;

    height:5px;

    background: rgb(230,104,104);

    -webkit-transform: rotate(-90deg);

  }

  .controls .text-hidden {

    position: absolute;

    overflow: hidden;

    width: 0;

    height: 0;

    color: transparent;

    display: block;

}

```

## 浏览器支持

现代浏览器及ie10+