vue-tantan-stack
vue-tantan-stack
安装
npm install vue-tantan-stack --save
如何使用
<template>
<div class="mid-center">
<div class="stack-wrapper">
<stack ref="stack" :pages="someList" :stackinit="stackinit"></stack>
</div>
<div class="controls">
<button @click="prev" class="button"><i class="prev"></i><span class="text-hidden">prev</span></button>
<button @click="next" class="button"><i class="next"></i><span class="text-hidden">next</span></button>
</div>
</div>
</template>
<script>
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')
}
}
}
</script>
<style>
.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;
}
</style>
浏览器支持
现代浏览器及ie10+
Dependencies
babel-core: ^6.0.0babel-eslint: ^7.2.3babel-loader: ^6.0.0babel-plugin-transform-runtime: ^6.0.0babel-preset-es2015: ^6.0.0babel-preset-stage-2: ^6.0.0chai: ^3.5.0chromedriver: ^2.21.2connect-history-api-fallback: ^1.1.0cross-spawn: ^2.1.5css-loader: ^0.23.1eslint: ^2.10.2eslint-config-standard: ^5.1.0eslint-friendly-formatter: ^2.0.5eslint-loader: ^1.3.0eslint-plugin-html: ^1.3.0eslint-plugin-promise: ^1.0.8eslint-plugin-standard: ^1.3.2eventsource-polyfill: ^0.9.6express: ^4.13.3extract-text-webpack-plugin: ^1.0.1file-loader: ^0.8.4function-bind: ^1.0.2html-webpack-plugin: ^2.8.1http-proxy-middleware: ^0.12.0inject-loader: ^2.0.1isparta-loader: ^2.0.0json-loader: ^0.5.4karma: ^0.13.15karma-coverage: ^0.5.5karma-mocha: ^0.2.2karma-phantomjs-launcher: ^1.0.0karma-sinon-chai: ^1.2.0karma-sourcemap-loader: ^0.3.7karma-spec-reporter: 0.0.24karma-webpack: ^1.7.0lolex: ^1.4.0mocha: ^2.4.5nightwatch: ^0.8.18node-sass: ^4.6ora: ^0.2.0phantomjs-prebuilt: ^2.1.3sass-loader: ^6.0.5selenium-server: 2.53.0shelljs: ^0.6.0sinon: ^1.17.3sinon-chai: ^2.8.0style-loader: ^0.17.0url-loader: ^0.5.7vue-hot-reload-api: ^1.2.0vue-html-loader: ^1.0.0vue-loader: ^8.3.0vue-style-loader: ^1.0.0webpack: ^1.12.2webpack-dev-middleware: ^1.4.0webpack-dev-server: ^1.14.0webpack-hot-middleware: ^2.6.0webpack-merge: ^0.8.3