A Sharp Tool to Improve User Experience-Use Vue-Occupy to Achieve Occupying Effect

  es6, Front end, frontend, javascript, vue.js

图片描述

Project address:https://github.com/jrainlau/v …
DEMO：https://jrainlau.github.io/vu …

Introduction

Vue-OccupyVue is a VUE instruction, which can use a configurable color block to occupy the place before the data is loaded, thus effectively improving the user experience.

Installation

UseyarnOr ..npmThe way to install:

# yarn
 yarn add vue-occupy
 
 # npm
 npm install vue-occupy

Use

Enter the project entry file and add the following code:

import VueOccupy from 'vue-occupy'
 
 Vue.use(VueOccupy)

In this way,vue-occupyHas been registered as a global instruction, you can in any.vueThrough the filev-occupyUse.

Parameter

Parameter Type describe Is it necessary
data {Object} The data to be bound to the node Yes
config {Object} Configuration Items for Placeholder Color Blocks No

For example:

<template>
 <div id="app" style="width:200px;  height:50px;"  >
 <div v-occupy="{ data: content, config }"></div>
 </div>
 </template>
 
 <script>
 export default {
 data () {
 return {
 content: '',
 config: {
 width: '200px',
 height: '18px',
 background: '#ddd'
 }
 }
 },
 mounted () {
 fetch(url).then((result) => {
 this.content = result
 })
 }
 }
 </script>

InfetchBefore the method returns data,<div v-occupy="{ data: content, config }"></div>This node will be occupied by a rectangular color block. When the data is successfully returned, the color block will be replaced bycontentThe content of.

Note:vue-occupyThe default configuration item for is this:

{
 width: 100%;
 height: 100%;
 background: #eee
 }

aftervue-occupyThe processed node will look like this:

<div v-occupy="{ data: content, config }">
 <div style="width: 100%;   height: 100%;   background: #eee;  ></div>
 </div>

This means that youMustSet specificwidthAndheightYou used itv-occupyOr you can override the default style by customizing the configuration items.

Certificate

MIT

Related Posts: