vue-index-styler

Vue.js 2.X component styling text by index.

Demo:

Install

npm install vue-js-modal --save

or

yarn add vue-js-modal --save

How to use

import IndexStyler from 'vue-index-styler'

Vue.use(IndexStyler)

Example use

<IndexStyler
  rawText="~~~~~~~~~~~~~~~~~~~"
  :indexObjects="[
    {
      start: 1,
      end: 3,
      style: {
        color: 'white',
        backgroundColor: 'red'
      }
    },
    {
      start: 4,
      end: 8,
      style: {
        backgroundColor: 'pink',
        borderRadius: '5px'
      }
    }
  ]"
/>

Props

Name	Required	Type	Default	Description
rawText	true	String		styled text
indexObjects	true	Array		[indexObject, indexObject, ・・・・]　* IndexObject detail is below.
textContainerId	false	String	'styled-text-container'	id of div involving styled text.
defaultStyle	false	Object		All indexeObjects are applied. Format is same as indexObject.style.
defaultHtmlAttributes	false	Object		All indexeObjects are applied. Format is same as indexObject.htmlAttributes.
isFirstChar0	false	Boolean	true	which to count rawText from 0 or 1.
isSlicedInvolvingEndIndex	false	Boolean	true	which to involve indexObject.endIndex or not.
isIndexObjectsWatched	false	Boolean	false	which to watch indexObjects change or not.

IndexObject

Property	Required	Type	Default	Example Value
startIndex	true	Number		1
endIndex	true	Number		3
style	false	Object		{ color: 'red', backgroundColor: 'yellow', fontSize: '12px' }
htmlAttributes	false	Object		{ id: '~~~', class: '~~~~' }