Shap NPM | npm.io

Shap ·

A document evaluation tool, which also provides page access to the PV recording function, facilitates developers to control the quality of documents, and to build a better document. Checkout online demo.

Install

Installation via CDN

<script src="https://unpkg.com/shap"></script>

Installation via NPM

$ npm i shap -S

Examples

<div class="shap-container"></div>

new Shap({
  key: '980aeb0e-27b4-4922-a2dd-7e3452eb0f50',
  el: '.shap-container',
  hash: true,
  absence: /^\/#\/about/,
  dev: true
})

Options

key

Type: string

The key for your own project, generated by shap admin background.

el

Type: string | HTMLElement

DOM container for Shap, query by document.querySelector when el is string.

mode

Type: string Default: inline Options: inline|suspension

Determine the presentation of the tool, suspended or embedded.

hash

Type: boolean Default: false

Whether to use the hash mode, eg: mode: 'hash' in VueRouter. hash: true will match location.href.pathname and hash: false will match location.href.hash as the document patch in the absence of formatter function.

dev

Type: boolean Default: false

Api testing, data will not be stored on the server.

formatter

Type: function

Custom formatter document path function, will take formatter function return value as document path whether hash are supplied or not.

absence

Type: RegExp | function

No display on particular page, will not record PV on this page either. Will macth the string which replace origin in url when absence is RegExp. eg: location.href.replace(location.origin, '') Nothing will be shown when absence return value is false

leadin

Type: string Default: '这个页面有帮助吗？'

Custom leadin text, such as 以上内容是否对您有帮助？ the default value is 这个页面有帮助吗？.

feedback

Type: string Default: '感谢您的反馈！'

custom feedback text, the default value is 这个页面有帮助吗？.

API

How Work With SPA

const shap = new Shap({ key: <Your Own Key>, el: '.shap-container' })
const router = new VueRouter({ /* options */ })

router.afterEach((to, from) => {
  shap.spa()
  // Your Code...
})

Change The Dom Status Dynamic

// change the shap mode
shap._vm.mode = 'suspension'
// change the leadin text
shap._vm.leadin = 'Shap\'s leadin'
// change the leadin feedback
shap._vm.feedback = 'Shap\'s feedback'
// toggle expansion state
shap._vm.spreading = false