1.0.2 • Published 5 years ago

vue-lazyload-text v1.0.2

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

npm vueversions MIT

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

Installation

npm install --save vue-lazyload-text

// main.js
import VueLazyload from 'vue-lazyload-text'
Vue.use(VueLazyload)

Usage

  • Compoment

    Example :

    <template>
        ......
        <lazy-text :src="your text" @getScope="Function"></lazy-text>
        ......
    </template>
    
    <script>
      import LazyText from 'vue-lazyload-text-dev/src/components/lazy-text'
    
      export default {
        name: "compoment",
        components: {
          LazyText,
        },
      }

    Props

    argdescription类型default
    src(required)Receive text data from server or outsidestring-
    separatorCustomize the newline characterString"\n"
    intervalLineEach view port displays row spacingnumber10
    deferDelay trigger to observernumber2000 (ms)
    bgColorset background color in text areastring"rgba(0, 150, 0, 0.75)"

    Events

    namedescriptionarg
    getScopeUsed 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

License

MIT

Author: Boyle Gu