{"id":20843161,"url":"https://github.com/blesstosam/vue-component","last_synced_at":"2026-04-24T10:34:40.468Z","repository":{"id":42787440,"uuid":"273194706","full_name":"blesstosam/vue-component","owner":"blesstosam","description":"some vue component written by myself","archived":false,"fork":false,"pushed_at":"2023-01-07T19:20:02.000Z","size":1497,"stargazers_count":2,"open_issues_count":12,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-26T21:53:02.397Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/blesstosam.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":"2020-06-18T09:19:21.000Z","updated_at":"2023-03-07T09:08:14.000Z","dependencies_parsed_at":"2023-02-07T22:31:43.084Z","dependency_job_id":null,"html_url":"https://github.com/blesstosam/vue-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/blesstosam/vue-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blesstosam%2Fvue-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blesstosam%2Fvue-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blesstosam%2Fvue-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blesstosam%2Fvue-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blesstosam","download_url":"https://codeload.github.com/blesstosam/vue-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blesstosam%2Fvue-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32219266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T10:26:35.452Z","status":"ssl_error","status_checked_at":"2026-04-24T10:25:27.643Z","response_time":64,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-11-18T01:27:14.185Z","updated_at":"2026-04-24T10:34:40.445Z","avatar_url":"https://github.com/blesstosam.png","language":"JavaScript","readme":"# vue-component\n\n一些自己写的 vue 组件\n\n## Query （受到 Apollo query 组件的启发）\n\n使用方法：\n\n1. 将请求数据的接口作为函数传递进去\n2. request 方法可以是异步请求但是要返回 promise，也可以是普通函数直接返回结果。（原理是内部会判断函数调用的结果是否是 primise 对象）\n\n```html\n\u003ctemplate\u003e\n  \u003cQuery :request=\"req\"\u003e\n    \u003c!-- 定制loading --\u003e\n    \u003ctemplate v-slot:loading\u003e\n      \u003cdiv\u003eloading...\u003c/div\u003e\n    \u003c/template\u003e\n\n    \u003c!-- 定制无数据 --\u003e\n    \u003ctemplate v-slot:nodata\u003e\n      \u003ch1\u003eno data\u003c/h1\u003e\n    \u003c/template\u003e\n\n    \u003c!-- 在slot里调用 refetch 重新发起请求 定制 error --\u003e\n    \u003ctemplate v-slot:error=\"{ refetch , error}\"\u003e\n      \u003ch1\u003e\n        \u003cspan\u003eError: {{error}}\u003c/span\u003e\n        \u003cdiv @click=\"refetch\"\u003e\u003cbutton\u003eRetry\u003c/button\u003e\u003c/div\u003e\n      \u003c/h1\u003e\n    \u003c/template\u003e\n\n    \u003c!-- 数据展示 --\u003e\n    \u003ctemplate v-slot:default=\"{ data }\"\u003e\n      \u003ch1\u003ename: {{data.name}}\u003c/h1\u003e\n    \u003c/template\u003e\n  \u003c/Query\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    async req() {\n      const res = await getUser()\n      return {\n        code: res.code,\n        data: res.data,\n        msg: res.msg\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n## Mutation\n\n使用方法：\n\n1. 将 mutation 的接口作为函数传递进去\n2. put 方法可以是异步请求但是要返回 promise，也可以是普通函数直接返回结果\n3. 如果里面有 query 组件，要放在 slot 里，mutation 成功后会自动调用 query 的 req，重新获取数据\n\n```js\n\u003cMutation :put=\"put\" @on-success=\"handleSucess\" @on-error=\"handleError\"\u003e\n  \u003ctemplate v-slot:query\u003e\n    \u003cQuery :request=\"req\"\u003e\n      \u003ctemplate v-slot:default=\"{ data }\"\u003e\n        \u003ch1\u003ename: {{data.name}}\u003c/h1\u003e\n      \u003c/template\u003e\n    \u003c/Query\u003e\n  \u003c/template\u003e\n  \u003ctemplate v-slot:action=\"{ mutateFn, loading }\"\u003e\n    \u003cspan v-if=\"loading\"\u003emodifying...\u003c/span\u003e\n    \u003cbutton v-else @click=\"mutateFn\"\u003eenter\u003c/button\u003e\n  \u003c/template\u003e\n\u003c/Mutation\u003e\n```\n\n## Spacer\n\n使用方法：在外层元素为 display:flex，内部使用 spacer，可以将 spacer 右边的元素顶到最右边\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv style=\"display: flex\u003e\n    \u003cdiv\u003eleft\u003c/div\u003e\n    \u003cSpacer /\u003e\n    \u003c!-- 将right顶到最右边 --\u003e\n    \u003cdiv\u003eright\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Recovery.js 路由返回的时候保持页面的状态不改变\n\n使用方法：将需要复原的数据放在 recover 对象里\n\n```js\nimport Recovery from 'recovery';\n// useQuery 为true 表示使用$route.query来保存数据\nVue.use(Recovery, { useQuery: true });\n\nexport default {\n  data() {\n    // 将需要复原的数据放在recover里\n    recover: {\n      tabIndex: 0;\n    }\n  },\n};\n```\n\n## Line25D 2.5d 效果的折线图\n\n![预览图](https://cdn.u1.huluxia.com/g4/M02/90/86/rBAAdl76lVqABkPfAAQhSmtEXYg877.png)\n\n使用方法：传入元素容器，数据和配置即可，如下\n\n```js\nconst chartData = {\n  title: '图表标题',\n  xLabel: 'x轴lable',\n  yLabel: 'y轴lable',\n  data: {\n    datasets: [\n      {\n        label: '数据1',\n        data: [\n          { x: '2019-09-18 00:00:00', y: 50 },\n          { x: '2019-09-18 01:00:00', y: 88 },\n          { x: '2019-09-18 02:00:00', y: 350 },\n          { x: '2019-09-18 03:00:00', y: 122 },\n          { x: '2019-09-18 04:00:00', y: 212 },\n          { x: '2019-09-18 05:00:00', y: 100 },\n          { x: '2019-09-18 06:00:00', y: 200 },\n          { x: '2019-09-18 07:00:00', y: 88 },\n          { x: '2019-09-18 08:00:00', y: 360 },\n          { x: '2019-09-18 09:00:00', y: 122 },\n          { x: '2019-09-18 10:00:00', y: 212 },\n          { x: '2019-09-18 11:00:00', y: 100 },\n          { x: '2019-09-18 12:00:00', y: 100 },\n          { x: '2019-09-18 13:00:00', y: 88 },\n          { x: '2019-09-18 14:00:00', y: 350 },\n          { x: '2019-09-18 15:00:00', y: 122 },\n          { x: '2019-09-18 16:00:00', y: 212 },\n          { x: '2019-09-18 17:00:00', y: 100 },\n          { x: '2019-09-18 18:00:00', y: 88 },\n          { x: '2019-09-18 19:00:00', y: 350 },\n          { x: '2019-09-18 20:00:00', y: 122 },\n          { x: '2019-09-18 21:00:00', y: 212 },\n          { x: '2019-09-18 22:00:00', y: 100 },\n          { x: '2019-09-18 23:00:00', y: 212 },\n        ],\n      },\n      {\n        label: '数据2',\n        data: [\n          { x: '2019-09-18 00:00:00', y: 0 },\n          { x: '2019-09-18 01:00:00', y: 88 },\n          { x: '2019-09-18 02:00:00', y: 350 },\n          { x: '2019-09-18 03:00:00', y: 122 },\n          { x: '2019-09-18 04:00:00', y: 212 },\n          { x: '2019-09-18 05:00:00', y: 100 },\n          { x: '2019-09-18 06:00:00', y: 100 },\n          { x: '2019-09-18 07:00:00', y: 88 },\n          { x: '2019-09-18 08:00:00', y: 350 },\n          { x: '2019-09-18 09:00:00', y: 122 },\n          { x: '2019-09-18 10:00:00', y: 212 },\n          { x: '2019-09-18 11:00:00', y: 100 },\n          { x: '2019-09-18 12:00:00', y: 200 },\n          { x: '2019-09-18 13:00:00', y: 88 },\n          { x: '2019-09-18 14:00:00', y: 350 },\n          { x: '2019-09-18 15:00:00', y: 122 },\n          { x: '2019-09-18 16:00:00', y: 212 },\n          { x: '2019-09-18 17:00:00', y: 100 },\n          { x: '2019-09-18 18:00:00', y: 88 },\n          { x: '2019-09-18 19:00:00', y: 350 },\n          { x: '2019-09-18 20:00:00', y: 122 },\n          { x: '2019-09-18 21:00:00', y: 212 },\n          { x: '2019-09-18 22:00:00', y: 100 },\n          { x: '2019-09-18 23:00:00', y: 212 },\n        ],\n      },\n    ],\n  },\n  options: {\n    yTickCount: 5,\n    timeFormat: 'YYYY/MM/DD HH:mm:ss',\n    dotSize: 1.5,\n  },\n};\nnew Line25D(document.querySelector('.chart'), chartData);\n```\n\n## Todo 封装的 echarts 地图等组件\n\n## Todo 用来链式传递路由 query 参数的组件\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblesstosam%2Fvue-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblesstosam%2Fvue-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblesstosam%2Fvue-component/lists"}