0.2.1 • Published 5 years ago
vue-index-styler v0.2.1
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: ' |