{"id":18582368,"url":"https://github.com/jrainlau/vue-occupy","last_synced_at":"2025-05-06T23:45:05.169Z","repository":{"id":114421118,"uuid":"83186421","full_name":"jrainlau/vue-occupy","owner":"jrainlau","description":"A Vue directive for occupying content places before the data has been loaded.","archived":false,"fork":false,"pushed_at":"2017-05-13T07:06:16.000Z","size":386,"stargazers_count":218,"open_issues_count":2,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-01T12:20:47.114Z","etag":null,"topics":["javascript","vue","vue-directive"],"latest_commit_sha":null,"homepage":"https://jrainlau.github.io/vue-occupy/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jrainlau.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-26T05:50:34.000Z","updated_at":"2025-03-23T01:17:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"4b737a54-cc70-4d61-aa6f-d1fa1513ea85","html_url":"https://github.com/jrainlau/vue-occupy","commit_stats":{"total_commits":14,"total_committers":2,"mean_commits":7.0,"dds":0.1428571428571429,"last_synced_commit":"33cb839f63971b80c28a80fffb218b4ca2d2fc24"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrainlau%2Fvue-occupy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrainlau%2Fvue-occupy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrainlau%2Fvue-occupy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jrainlau%2Fvue-occupy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jrainlau","download_url":"https://codeload.github.com/jrainlau/vue-occupy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252788404,"owners_count":21804280,"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":["javascript","vue","vue-directive"],"created_at":"2024-11-07T00:10:48.050Z","updated_at":"2025-05-06T23:45:05.123Z","avatar_url":"https://github.com/jrainlau.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue-Occupy\nA Vue directive for occupying content places before the data has been loaded.\n\nIt's good for user experiment improving.\n\n# Install\nUsing `yarn` or `npm` to install `vue-occupy`:\n\n```\n# yarn\nyarn add vue-occupy\n\n# npm\nnpm install vue-occupy\n```\n\n# Usage\nIn your `main.js` file:\n\n```\nimport VueOccupy from 'vue-occupy'\n\nVue.use(VueOccupy)\n```\n\nNow `vue-occupy` is a global Vue directive, you can use `v-occupy` in every `.vue` file.\n\n# Params\n\n| param | type | description | necessary |\n| --- | --- | --- | --- |\n| data | {Object} | the data you bind to the node | Yes |\n| config | {Object} | the color lump's css config | No |\n\nFor example:\n\n```\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\" style=\"width:200px;height:50px;\"\u003e\n    \u003cdiv v-occupy=\"{ data: content, config }\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      content: '',\n      config: {\n        width: '200px',\n        height: '18px',\n        background: '#ddd'\n      }\n    }\n  },\n  mounted () {\n    fetch(url).then((result) =\u003e {\n      this.content = result\n    })\n  }\n}\n\u003c/script\u003e\n```\n\nBefore the `fetch` method has requested the result data, the `div` with `v-occupy=\"{ data: content, config }\"` would be occupying by a rectangle color lump. Once the data was loaded, the attribute `content` would be updated and be rendered into the html.\n\n**Note**: the default configuration of `vue-occupy` looks like below:\n```\n{\n  width: 100%; \n  height: 100%; \n  background: #eee\n}\n``` \nAnd the note with `v-occupy` will be like this:\n\n```\n\u003cdiv v-occupy=\"{ data: content, config }\"\u003e\n  \u003cdiv style=\"width: 100%; height: 100%; background: #eee;\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nWhich means your **must** set the exactly `width` and `height` attribute in the note with `v-occupy`, or overwrite the default configuration by binding `config` attribute. What's more, attributes like `marginTop` or `paddingRight` are illegal, you should write in `'margin-top': '10px'` or `'padding-right': '10px'` instead.\n\n# Lisence\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjrainlau%2Fvue-occupy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjrainlau%2Fvue-occupy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjrainlau%2Fvue-occupy/lists"}