@hoc-element/affix
Version:
📌 Affix 将页面元素固定在可视范围内。
84 lines • 4.54 kB
JSON
{
"name": "@hoc-element/affix",
"version": "1.0.0",
"main": "lib/hoc-el-affix.js",
"description": "📌 Affix 将页面元素固定在可视范围内。",
"author": "Wisdom <pdsu.wwz@foxmail.com>",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/pdsuwwz/hoc-element-affix.git"
},
"publishConfig": {
"access": "public"
},
"peerDependencies": {
"vue": ">=3.2.0"
},
"devDependencies": {
"@babel/core": "^7.16.5",
"@babel/eslint-parser": "^7.16.5",
"@babel/eslint-plugin": "^7.16.5",
"@babel/plugin-proposal-class-properties": "^7.16.5",
"@babel/plugin-proposal-decorators": "^7.16.5",
"@babel/plugin-proposal-export-default-from": "^7.16.5",
"@babel/plugin-proposal-export-namespace-from": "^7.16.5",
"@babel/plugin-proposal-function-sent": "^7.16.5",
"@babel/plugin-proposal-json-strings": "^7.16.5",
"@babel/plugin-proposal-numeric-separator": "^7.16.5",
"@babel/plugin-proposal-private-methods": "^7.16.5",
"@babel/plugin-proposal-throw-expressions": "^7.16.5",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.10.4",
"@babel/plugin-transform-modules-commonjs": "^7.16.5",
"@babel/plugin-transform-runtime": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"@babel/runtime": "^7.16.5",
"@babel/runtime-corejs2": "^7.16.5",
"@vue/compiler-sfc": "^3.2.26",
"@vue/eslint-config-standard": "^6.1.0",
"babel-loader": "^8.2.3",
"core-js": "^3.20.1",
"cross-env": "^7.0.3",
"css-loader": "^6.5.1",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-friendly-formatter": "^4.0.1",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-vue": "^7.20.0",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"sass": "^1.45.1",
"sass-loader": "^8.0.2",
"style-loader": "^3.3.1",
"url-loader": "^4.1.1",
"vue": "^3.2.26",
"vue-loader": "^16.8.3",
"vue-router": "^4.0.12",
"vue-style-loader": "^4.1.3",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"keywords": [
"vue",
"hoc",
"affix",
"固钉",
"组件化"
],
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --config build/webpack.config.js",
"dev:example": "cross-env NODE_ENV=development webpack serve --progress --config build/webpack.example.js"
},
"readme": "# @hoc-element/affix\n\n \n\n📌 基于 Webpack 5 构建的 Vue 3.x 固钉组件，用于将页面元素固定在可视范围内。\n\n**Live demo:** https://pdsuwwz.github.io/hoc-element-affix\n\n\n## Version\n\n* Vue 3.x 版本 ｜ [Vue 2.x 版本](https://github.com/pdsuwwz/hoc-element-affix/tree/vue2.0)\n\n\n\n## Environment Support\n\n* Vue 3.2.x\n\n## Install\n\n```shell\nnpm install @hoc-element/affix\n\n# or\n\npnpm add @hoc-element/affix\n```\n\n## Quick Start\n\n```js\nimport { createApp } from 'vue'\nimport HocElementAffix from '@hoc-element/affix'\nimport App from './App.vue'\n\ncreateApp(App)\n .use(HocElementAffix)\n .mount('#app')\n```\n\n## Feature\n\n- [x] 支持 Vue 3.x\n- [x] 支持自定义顶部 `offsetTop` 偏移量\n- [x] 支持固定状态改变触发回调\n- [x] 支持 `Slot` 插槽式的固定状态反馈\n\n## Using\n\n### 绑定参数 Attributes\n\n| 字段 | 说明 | 类型 | 默认值 |\n| -------- | -------- | -------- | -------- |\n| offsetTop | （可选）距离窗口顶部多少时开始固定 | Number | 0 |\n\n### 事件 Events\n\n| 字段 | 说明 | 类型 |\n| -------- | -------- | -------- |\n| change | （可选）固定状态发生改变时的回调函数 | Function |\n\n### 插槽数据 Slot\n\n绑定的数据默认在一个对象里，如需要可直接解构再使用\n\n| 字段 | 说明 | 类型 | 默认值 |\n| -------- | -------- | -------- | -------- |\n| affixed | （可选）实时的固定状态 | Boolean | false |\n\n\n## Demo\n\n下面是比较全的例子，几乎囊括了 API 的所有用法，源码戳这： [Code](https://github.com/pdsuwwz/hoc-element-affix/tree/main/example/src/views/ExampleAffix.vue )\n\n"
}