A vue document preview component
npm install vue-doc-previewEnglish Readme | 中文说明书
yarn add vue-doc-preview
or
npm i vue-doc-preview --save
Then, import this component in .vue file.
javascript
`
You also can open demo.vue(which in src) to learn how to use this component, but it is introduced directly to the component from the source code.$3
html
" type="markdown" />
`Config
prop | description | type| default
:-------: | ------- | :-------: | :-------:
value | document contents or office document's url | String | ''
type | document type (Now supported types are 'markdown'、'office'、'text' of 'code') | String | 'md'
language | code language (It takes effect only when the type is 'code') | String | ''
height | when height > 100 it means that the component's height is hight+'px', otherwise it means that the component's height is hight+'%'| Number | 90
mdStyle | markdown view custom style (It takes effect only when the type is 'markdown' or 'code') | Object | null
textStyle | text view custom style (It takes effect only when the type is 'text') | Object | null
url | document's url, but it only takes effect only when we don't set value (this property can also be used in office documents)| String | ''
requestConfig | axios config | Object | {}
$3
* markdown: md
* office: docx, pptx, xlsx
* text: txt
* code: javascript(js)、html、css、java、json、typescript(ts)、cpp、xml、bash、less、nginx、php、powershell、python、scss、shell、sql、yaml、ini$3
Now, we can customize markdown view style by setting mdStyle in props.These tags can be customized: pre, code, ul, ol, li, hr, blockquote, img, a, table, tr, th, td.
In this example we will customize the style of code block in markdown view.
javascript
// template
// script
export default {
data: function() {
return {
mdStyle: {
pre: {
'background-color': 'rgb(187, 255, 255)'
},
code: {
'background-color': 'rgb(187, 255, 255)',
'line-height': '20px'
}
}
}
}
}
`Development
$3
yarn run serve
$3
yarn run build-lib
$3
yarn run test
$3
yarn run lint