{"id":13565169,"url":"https://github.com/warpcgd/vue-tantan-stack","last_synced_at":"2025-04-03T22:30:50.321Z","repository":{"id":27704872,"uuid":"114975032","full_name":"warpcgd/vue-tantan-stack","owner":"warpcgd","description":"vue-tantan-stack","archived":false,"fork":false,"pushed_at":"2022-12-14T15:16:46.000Z","size":9172,"stargazers_count":312,"open_issues_count":21,"forks_count":119,"subscribers_count":8,"default_branch":"v2.0","last_synced_at":"2024-11-04T18:46:22.578Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/warpcgd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-21T07:15:46.000Z","updated_at":"2024-11-01T07:57:47.000Z","dependencies_parsed_at":"2023-01-14T07:19:43.252Z","dependency_job_id":null,"html_url":"https://github.com/warpcgd/vue-tantan-stack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warpcgd%2Fvue-tantan-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warpcgd%2Fvue-tantan-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warpcgd%2Fvue-tantan-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warpcgd%2Fvue-tantan-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/warpcgd","download_url":"https://codeload.github.com/warpcgd/vue-tantan-stack/tar.gz/refs/heads/v2.0","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247089856,"owners_count":20881858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T13:01:41.974Z","updated_at":"2025-04-03T22:30:45.820Z","avatar_url":"https://github.com/warpcgd.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"## vue-tantan-stack\n\n[![npm](https://img.shields.io/npm/v/vue-tantan-stack.svg)](https://www.npmjs.com/package/vue-tantan-stack)\n[![npm](https://img.shields.io/npm/dw/vue-tantan-stack.svg)](https://www.npmjs.com/package/vue-tantan-stack)\n[![npm](https://img.shields.io/github/size/warpcgd/vue-tantan-stack/dist/module.js.svg)](https://www.npmjs.com/package/vue-tantan-stack)\n\n![](tantan.gif)\n### demo\n  [demo](https://warpcgd.github.io/vue-tantan-stack/)\n### 安装\n\n```html\n  npm install vue-tantan-stack --save\n```\n\n### 如何使用\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"mid-center\"\u003e\n    \u003cdiv class=\"stack-wrapper\"\u003e\n      \u003cstack ref=\"stack\" :pages=\"someList\" :stackinit=\"stackinit\"\u003e\u003c/stack\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"controls\"\u003e\n      \u003cbutton @click=\"prev\" class=\"button\"\u003e\u003ci class=\"prev\"\u003e\u003c/i\u003e\u003cspan class=\"text-hidden\"\u003eprev\u003c/span\u003e\u003c/button\u003e\n      \u003cbutton @click=\"next\" class=\"button\"\u003e\u003ci class=\"next\"\u003e\u003c/i\u003e\u003cspan class=\"text-hidden\"\u003enext\u003c/span\u003e\u003c/button\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport stack from '../components/stack'\nexport default {\n  el: '#stack',\n  data () {\n    return {\n      someList: [],\n      stackinit: {\n        visible: 3\n      }\n    }\n  },\n  mounted () {\n    let that = this\n    setTimeout(function () {\n      that.someList = [\n        {\n          html: '\u003cimg src=\"src/img/1.png\" alt=\"01\"\u003e'\n        },\n        {\n          html: '\u003cimg src=\"src/img/2.png\" alt=\"02\"\u003e'\n        },\n        {\n          html: '\u003cimg src=\"src/img/3.png\" alt=\"03\"\u003e'\n        },\n        {\n          html: '\u003cimg src=\"src/img/4.png\" alt=\"04\"\u003e'\n        },\n        {\n          html: '\u003cimg src=\"src/img/5.png\" alt=\"05\"\u003e'\n        },\n        {\n          html: '\u003cimg src=\"src/img/6.png\" alt=\"06\"\u003e'\n        },\n        {\n          html: '\u003cimg src=\"src/img/7.png\" alt=\"07\"\u003e'\n        }\n      ]\n    }, 2000)\n  },\n  components: {\n    stack\n  },\n  methods: {\n    prev () {\n      this.$refs.stack.$emit('prev')\n    },\n    next () {\n      this.$refs.stack.$emit('next')\n    }\n  }\n}\n\u003c/script\u003e\n\u003cstyle\u003e\n  .stack-wrapper{\n    margin: 0 auto;\n    position: relative;\n    z-index: 1000;\n    width: 320px;\n    height: 320px;\n    padding: 0;\n    list-style: none;\n    pointer-events: none;\n  }\n  .controls{\n    position: relative;\n    width: 200px;\n    text-align: center;\n    display:flex;/*Flex布局*/\n    display: -webkit-flex; /* Safari */\n    justify-content:space-around;\n    margin: 0 auto;\n    margin-top: 50px\n  }\n  .controls .button {\n    border: none;\n    background: none;\n    position: relative;\n    display: inline-block;\n    cursor: pointer;\n    font-size: 16px;\n    width: 50px;\n    height: 50px;\n    z-index: 100;\n    -webkit-tap-highlight-color: rgba(0,0,0,0);\n    border-radius: 50%;\n    background: #fff;\n  }\n  .button .next{\n    display: inline-block;\n    width: 10px;\n    height:5px;\n    background: rgb(129,212,125);\n    line-height: 0;\n    font-size:0;\n    vertical-align: middle;\n    -webkit-transform: rotate(45deg);\n    left: -5px;\n    top: 2px;\n    position: relative;\n  }\n  .button .next:after{\n    content:'/';\n    display:block;\n    width: 20px;\n    height:5px;\n    background: rgb(129,212,125);\n    -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);\n  }\n  .button .prev{\n    display: inline-block;\n    width: 20px;\n    height:5px;\n    background: rgb(230,104,104);\n    line-height: 0;\n    font-size:0;\n    vertical-align: middle;\n    -webkit-transform: rotate(45deg);\n  }\n  .button .prev:after{\n    content:'/';\n    display:block;\n    width: 20px;\n    height:5px;\n    background: rgb(230,104,104);\n    -webkit-transform: rotate(-90deg);\n  }\n  .controls .text-hidden {\n    position: absolute;\n    overflow: hidden;\n    width: 0;\n    height: 0;\n    color: transparent;\n    display: block;\n}\n\u003c/style\u003e\n```\n\n## 浏览器支持\n\n现代浏览器及ie10+","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarpcgd%2Fvue-tantan-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwarpcgd%2Fvue-tantan-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarpcgd%2Fvue-tantan-stack/lists"}