bp-mark-mobile-viewer

百瓶专属插件——markdown预览，同时支持移动端和PC端

项目地址 http://192.168.3.98/CandyBox/markdown-preview-mobile

如何安装

npm install bp-mark-mobile-viewer --save

如何使用

• 全局安装

// 在入口文件加载根组件之前执行以下操作
import BpMarkMobileViewer from "bp-mark-mobile-viewer";
Vue.use(BpMarkMobileViewer);

• 单组件引入

// 在需要使用的文件中按以下方式使用
<template>
    <bp-mark-mobile-viewer></bp-mark-mobile-viewer>
</template>
<script>
    import BpMarkMobileViewer from "bp-mark-mobile-viewer/lib/theme/BpMarkMobileViewer";
    export default {
        components: {
            BpMarkMobileViewer
        }
    }
</script>

• 按需加载（和全局引入互斥）

// 安装依赖
npm install --save-dev babel-plugin-import
// 修改.babelrc文件配置，向plugins属性的数组中新加入一项，最终配置如下所示
{
  ...
  "plugins": [..., ["component", {
    "libraryName": "bp-mark-mobile-viewer",
    "styleLibrary": {
      "name": "theme",
      "base": false
    }
  }]]
}
...
// 在需要使用的文件中按以下方式使用
<template>
    <bp-mark-mobile-viewer></bp-mark-mobile-viewer>
</template>
<script>
    import {BpMarkMobileViewer} from "bp-mark-mobile-viewer";
    export default {
        components: {
            BpMarkMobileViewer
        }
    }
</script>

API文档

• BpMarkMobileViewer

v-bind:value - 初始化值，每次改变都会完全更新编辑器的内容
v-bind:padding - 预览内容的padding值，值为设计稿上web版的px值，会自动进行rem适配
v-bind:widthRatio - 预览模块宽度占整个屏幕百分比，在普通h5中引入不需要传入，如果作为webview在原生中使用需要计算传入
v-bind:imageWidthA - 是否用a标签将图片包裹