{"_id":"swiper-cell","_rev":"26-b84fc80933380a1d9035a935b7ef2ebd","time":{"created":"2022-03-15T02:15:16.240Z","1.0.0":"2021-08-10T09:44:54.018Z","modified":"2022-05-19T05:09:46.956Z","1.1.0":"2021-10-27T07:11:18.734Z","1.1.1":"2021-10-27T08:41:33.332Z","1.1.2":"2021-10-27T08:58:36.226Z","1.1.3":"2021-10-27T09:15:03.311Z","1.1.4":"2021-10-27T09:25:01.432Z","1.1.5":"2021-10-27T09:33:49.966Z","1.1.6":"2021-10-27T09:45:12.744Z","1.1.7":"2021-10-29T10:02:41.266Z","1.1.8":"2021-10-29T10:05:31.184Z","1.1.9":"2021-11-01T02:30:27.843Z","1.1.10":"2021-11-01T03:20:18.388Z","1.1.1-0.1":"2021-11-01T03:22:08.998Z","1.1.1-0.2":"2021-11-01T03:30:20.087Z","1.1.10-3":"2021-11-01T03:37:05.678Z","1.1.11":"2021-11-01T03:38:42.401Z","1.1.12":"2021-11-01T03:44:32.851Z","1.1.13":"2021-11-01T09:36:59.029Z","1.1.14":"2021-11-03T01:28:14.806Z","1.2.1":"2021-12-28T08:42:51.779Z","1.2.2":"2022-03-09T07:43:23.603Z","1.2.0":"2022-03-10T08:17:33.336Z","1.2.3":"2022-03-10T08:25:27.278Z","2.0.0":"2022-03-15T02:15:16.407Z"},"name":"swiper-cell","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"swiper-cell","description":"弹性滑动单元格","version":"2.0.0","author":{"name":"litTaoTao","email":"1099683985@qq.com"},"license":"MIT","private":false,"keywords":["swiper-cell","cell","vue","components"],"main":"lib/index.js","module":"lib/index.js","scripts":{"dev":"cross-env NODE_ENV=development webpack-dev-server --open --hot","serve":"node build/dev-server.js","build":"cross-env NODE_ENV=production webpack --progress --hide-modules","build:package":"node build/build.js","release":"win-bash ./build/release/publish.sh","eslint-fix":"eslint src/**/*.*  --fix"},"dependencies":{"vue":"^2.5.11"},"browserslist":["> 1%","last 2 versions","not ie <= 8"],"transformModules":{"cube-ui":{"transform":"cube-ui/lib/${member}","kebabCase":true,"style":{"ignore":["create-api","better-scroll","locale"]}}},"devDependencies":{"babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-add-module-exports":"^1.0.4","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.0","babel-preset-stage-2":"^6.24.1","babel-preset-stage-3":"^6.24.1","cross-env":"^5.0.5","css-loader":"^0.28.7","extract-text-webpack-plugin":"^3.0.2","file-loader":"^1.1.4","html-webpack-plugin":"^2.30.1","prettier":"^1.12.1","shelljs":"^0.7.4","ora":"^1.2.0","webpack-merge":"^4.1.0","optimize-css-assets-webpack-plugin":"^1.3.0","markdown-it-anchor-cube":"^0.0.1","eslint":"^4.18.2","eslint-config-standard":"^10.2.1","eslint-friendly-formatter":"^3.0.0","eslint-loader":"^1.7.1","eslint-plugin-html":"^3.0.0","eslint-plugin-import":"^2.7.0","eslint-plugin-node":"^5.2.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^3.0.1","friendly-errors-webpack-plugin":"^1.1.3","babel-eslint":"^7.1.1","postcss-loader":"^2.0.5","stylus":"^0.54.5","stylus-loader":"^3.0.2","vue-loader":"^13.0.5","vue-template-compiler":"^2.5.13","webpack":"^3.6.0","webpack-hot-middleware":"^2.18.0","eventsource-polyfill":"^0.9.6","webpack-dev-server":"^2.9.1"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"gitHead":"e3403e3a0b34299f0ea29d33d29dcaeef0d327f5","_id":"swiper-cell@2.0.0","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-C+H6lpLNcnPbbgJ58ANgd3pZJZdeSOM1JXIWJ/6ieSR2pwAeZmcGXNpA/2MlgB4ioHdqi1ysNYvDuYCCL21+YA==","shasum":"98b83bd10ee20291dc47027d1a0c4cfaeec22c7b","tarball":"https://registry.npmjs.org/swiper-cell/-/swiper-cell-2.0.0.tgz","fileCount":10,"unpackedSize":193407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL/a0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGpw//ZSVOvvrtJuD0Bzz5vEzkTyaZcNQdyluM8IpQ+ejBWokQ24md\r\nI4IQi/X1zKtznbOnwwKNjZqAElhmJW79DmH6YiT9vSqhQxrjHTSIlYoMf7A1\r\nCmV3rdSD3U7Ftfg0cO1L73T2RhTJVvnf8IhPN3YhK0CDSVys0jIMGja2/Y0v\r\n/+uiekxthRoHt6+3hxHww6Gac6WjsyXdqd1lt5WcZ9dsJRX4ErHflz/c8pJK\r\nMCgfP2tYDCSY2K/qeuSyDCq5dAAhlgBqs84KS/0dN/wsZr4+9gEOC4sHYtGK\r\nrXH2GuxL6brom9bEf0v81VtW8UYBnAdPNzZGCW7LnS/VQ5JHNWw0ALRCQabD\r\n5q5FIdDmuJJQraC72rewrbFzaECpiDr3KLNeo3Gvd8Is2wwsrEQANt091Ogl\r\njizS0bJFpd5wHRBd5AumH2zuntdJgWm7yuP5DarODs4Kg0XMbfzbmA/s8eJp\r\nuASzTmwPhJ3Zo/64/IDmgBeGn8OT7yC2D422G8sksltBgtX4Vz6JSVkoE4G4\r\nmyKUJORe18uWNGSpQNhp7K5JSslYuDx3LSoCqvFlM4Ldgv6lQQ6h0162shs/\r\nv/8dDOA6cNzQk2W+2id87LWF7lH3O5mCaSqJroJMNx/oxJI8MNcDOwlMMjjz\r\nKGvH9H8NtXadkoKvfm25gn2wlE6/hsssTD4=\r\n=DtSP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFxMR5vcCxXftkOUzYbN9x9gv71Rep0XTWC+EHo65H0DAiEArlP6mUZQEzt8miL0NrSr0kktLMY+vrD56LyurwwPTKU="}]},"_npmUser":{"name":"litaotao","email":"1099683985@qq.com"},"directories":{},"maintainers":[{"name":"litaotao","email":"1099683985@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/swiper-cell_2.0.0_1647310516240_0.9665747095606585"},"_hasShrinkwrap":false}},"maintainers":[{"name":"litaotao","email":"1099683985@qq.com"}],"description":"弹性滑动单元格","keywords":["swiper-cell","cell","vue","components"],"author":{"name":"litTaoTao","email":"1099683985@qq.com"},"license":"MIT","readme":"# swiper-cell\r\n\r\n> 弹性滑动单元格\r\n\r\n\r\n## Install\r\n\r\n```shell\r\nnpm install swiper-cell --save\r\n\r\n```\r\n\r\n## Usage\r\n\r\n``` bash\r\nimport SwiperCell from \"swiper-cell\";\r\nimport \"swiper-cell/lib/style.css\";\r\n\r\n```\r\n\r\n##  Demo\r\n- [Example](https://littaotao.github.io/swiper-cell/dist/index)\r\n- \r\n  ![Example QR](./assets/images/demo.png)\r\n\r\n### 使用方法\r\n```html\r\n<template>\r\n    <div>\r\n        <div class=\"swiperCell\" v-for=\"(item, i) in arr\" :key=\"i\">\r\n            <swiper-cell\r\n                :quotient=\"item.quotient\"\r\n                @touchstart.native=\"touchstart(i)\"\r\n                @move=\"move($event, item)\"\r\n                @touchend.native=\"touchend\"\r\n                @close=\"close\"\r\n                :disabled=\"disabled\"\r\n                :type=\"item.type\"\r\n                :data=\"item\"\r\n                :leftContent=\"item.leftContent\"\r\n                :rightContent=\"item.rightContent\"\r\n                :isElastic=\"item.isElastic\"\r\n                :class=\"\r\n                    (i === index && isTag && 'container_active') || 'container'\r\n                \"\r\n                :key=\"i\"\r\n                @open=\"open($event, item)\"\r\n            >\r\n                swiperCell-{{ i + 1 }}\r\n            </swiper-cell>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport SwiperCell from \"swiper-cell\";\r\nimport \"swiper-cell/lib/style.css\";\r\n\r\nexport default {\r\n    name: \"HelloWorld\",\r\n    components: {\r\n        SwiperCell,\r\n    },\r\n    data() {\r\n        return {\r\n            index: \"\",\r\n            isTag: false,\r\n            disabled: false,\r\n            timer: null,\r\n            position: \"\",\r\n            arr: [\r\n                {\r\n                    leftContent: [],\r\n                },\r\n                {\r\n                    rightContent: [\r\n                        {\r\n                            value: \"删除\",\r\n                            callBack: (item, data) => {\r\n                                console.log(item, data);\r\n                            },\r\n                        },\r\n                    ],\r\n                    quotient: [0, 1],\r\n                },\r\n                {\r\n                    rightContent: [\r\n                        {\r\n                            value: \"删除\",\r\n                            callBack: (item) => {\r\n                                console.log(item);\r\n                            },\r\n                        },\r\n                    ],\r\n                },\r\n                {\r\n                    rightContent: [\r\n                        {\r\n                            value: \"删除\",\r\n                            callBack: (item) => {\r\n                                console.log(item);\r\n                                item.value = \"确认删除\";\r\n                            },\r\n                        },\r\n                    ],\r\n                },\r\n                {\r\n                    type: 1,\r\n                    isElastic: true,\r\n                    rightContent: [{ value: \"关注\" }, { value: \"收藏\" }],\r\n                },\r\n                {\r\n                    rightContent: [{ value: \"关注\" }, { value: \"收藏\" }],\r\n                    type: 1,\r\n                    isElastic: false,\r\n                },\r\n                {\r\n                    type: 1,\r\n                    isElastic: true,\r\n                    leftContent: [{ value: \"收藏\" }],\r\n                    quotient: [8, 8],\r\n                },\r\n                { type: 1, isElastic: true },\r\n                { type: 1, isElastic: false },\r\n                { type: 0, isElastic: true },\r\n                { type: 0, isElastic: false },\r\n            ],\r\n        };\r\n    },\r\n    methods: {\r\n        changeArr() {\r\n            this.testArr[0] = Number((Math.random() * 100).toFixed(0));\r\n        },\r\n        open(e, item) {\r\n            this.position = e.position;\r\n            if (e.position === \"left\" && item.isElastic) {\r\n                e.close();\r\n            }\r\n        },\r\n        touchstart(i) {\r\n            if (this.disabled && this.position === \"left\") {\r\n                this.disabled && clearTimeout(this.timer);\r\n                this.timer = null;\r\n            }\r\n            this.index = i;\r\n        },\r\n        touchend() {\r\n            if (!this.timer && this.position === \"left\") {\r\n                this.disabled = false;\r\n            }\r\n        },\r\n        close() {\r\n            if (this.position === \"left\") {\r\n                this.disabled = true;\r\n            }\r\n            this.timer = setTimeout(() => {\r\n                this.index = \"\";\r\n                this.isTag = false;\r\n                this.disabled = false;\r\n            }, 300);\r\n        },\r\n        move(deltaX, item) {\r\n            // 删除\r\n            // console.log(item);\r\n            if (item.rightContent && item.rightContent[0].value === \"删除\") {\r\n                console.log(\"删除\");\r\n            }\r\n            // 收藏、标记\r\n            if (deltaX > 220 && item.isElastic) {\r\n                if (!this.isTag) {\r\n                    this.isTag = true;\r\n                    console.log(\"收藏、标记\");\r\n                }\r\n                return;\r\n            }\r\n            this.isTag = false;\r\n        },\r\n    },\r\n};\r\n</script>\r\n\r\n<style lang=\"stylus\" scoped>\r\n.swiperCell {\r\n    >>>.cell_container {\r\n        height: 90px;\r\n        line-height: 90px;\r\n\r\n        .cell_content {\r\n            background: #eee;\r\n        }\r\n    }\r\n\r\n    border-bottom: 1px solid #EEE;\r\n    overflow: hidden;\r\n\r\n    &>.container_active {\r\n        background: #E8B741;\r\n    }\r\n}\r\n</style>\r\n\r\n\r\n```\r\n\r\n## Props\r\n\r\n\r\n| 属性                           | 说明                    | 类型                                               |     默认值\r\n| ------------------------------ | ----------------------- | ------------------------------------------------- | ---------------------\r\n| name                           | 标识符，可以在事件参数中获取到  | number \\| string                            |  auto\r\n| before-close\t                 | 关闭前的回调函数         | Function                                          | -\r\n| disabled\t                     | 是否禁用滑动\t            | boolean                                           | false\r\n| stop-propagation\t\t         | 是否阻止滑动事件冒泡\t     | boolean                                           | false\r\n| leftContent\t                 | 左侧内容（最多一个）      | array \\| boolean                                  | [<br />&emsp;{value:\"标记\",icon:\"fa fa-star-o\"}<br />]\r\n| rightContent\t                 | 右侧内容（最多三个）      | array \\| boolean                                  | [<br />&emsp;{value:\"标为未读\",icon:\"\"},<br />&emsp;{value:\"不显示\",icon:\"\"},<br />&emsp;{value:\"删除\",icon:\"\"}<br />]\r\n| quotient\t                     | 左右两侧弹性系数\t         | array                                             | [ 2.5, 8 ]\r\n| type\t                         | 类型(0 \\| 1)              | number \\| string                                 | 1\r\n| isElastic\t                     | 是否开启弹性\t             | boolean                                           | true\r\n\r\n\r\n## Slots\r\n\r\n| 属性                                                            | 说明                   \r\n| --------------------------------------------------------------- | ------------------------------------------------\r\n| default                                                         | 自定义显示内容\r\n\r\n\r\n## Events\r\n\r\n| 事件名                          | 说明               | 回调参数    \r\n| ------------------------------ | -----------------   |------\r\n|click                           |点击时触发           | 关闭时的点击位置 (left right cell outside)\r\n|open                            |打开时触发           | {position: 'left' \\| 'right' ,name: string, close: Function}\r\n|close                           |关闭时触发           | { position: string , name: string }\r\n|move                            |移动时触发           | { deltaX: string }\r\n","readmeFilename":"README.md"}