https://github.com/boylegu/vue-lazyload-text

The high performance magic text with lazyload support.
https://github.com/boylegu/vue-lazyload-text

Last synced: about 2 months ago
JSON representation

The high performance magic text with lazyload support.

• Host: GitHub
• URL: https://github.com/boylegu/vue-lazyload-text
• Owner: boylegu
• Created: 2019-06-07T07:59:24.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T02:56:27.000Z (almost 2 years ago)
• Last Synced: 2024-10-03T00:48:15.847Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 3.6 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/badge/npm%20-1.0.2-blue.svg)]()

[![vueversions](https://img.shields.io/badge/vue.js-2-brightgreen.svg)]()

[![MIT](https://img.shields.io/badge/license-MIT-ff69b4.svg)]()



  


# vue-lazyload-text

The high performance magic text with lazyload support. 

The vue-lazyload-text offer better performents, especially in comparison with Scroll Events. because of  none computationally expensive and the relatively steady reliability. There's another thing it's only `output` or `code` HTML tag. I think this's a very good addition such as some Image lazyload open source vue plugin.

## Online Demo

[DEMO](https://boylegu.github.io/vue-lazyload-text)

## Installation

`npm install --save vue-lazyload-text`

    

    // main.js

    import VueLazyload from 'vue-lazyload-text'

    Vue.use(VueLazyload)

## Usage

 

- Compoment

  Example : 

  

      

          ......

          

          ......

      

      

      

        import LazyText from 'vue-lazyload-text-dev/src/components/lazy-text'

      

        export default {

          name: "compoment",

          components: {

            LazyText,

          },

        }

  

  Props

  

  |        arg             | description  | 类型 | default |

  |-------------------------|-------|------|--------|

  | src(required) | Receive text data from server or outside | string | -  | 

  | separator | Customize the newline character  | String | `"\n"`      | 

  | intervalLine | Each view port displays row spacing  | number | `10`  | 

  | defer  | Delay trigger to observer | number | `2000` （ms）| 

  | bgColor | set background color in text area | string | `"rgba(0, 150, 0, 0.75)"`    | 

  Events

  

    |        name             | description  | arg | 

    |-------------------------|-------|------|

    | getScope |Used to receive text ranges from server or outside. | `startLine`, `endLine` |

- Directive

>> Coming Soon......

## About Server-side interaction

You can see `example/demo` or git clone this project with `npm run dev` if it's difficult to understand about Server-side interaction.

points for attention:

- You need to handle or intercept text scope in the string your Server.

- You should not write extraneous data to the HTML text output area other than to get data from the server side.

- Due to network reasons, the server-side interface may not respond in time. So make sure that the plug-in is not triggered until it gets the data. For example, you can adjustment the defer property provided in the component.

## Support browser

[Check Compatibility](https://caniuse.com/#feat=intersectionobserver)

## License

MIT

Author:  Boyle Gu