Vue.js的平滑刮刮卡–vue-scratchable

Vue.js的平滑刮刮卡–vue-scratchable
插件名称 vue-scratchable
版本号 v0.3.3
发布时间 2020年11月3日
插件作者 sebastianwachter

Scratchable是Vue.js组件,可将所有内容转换为支持触摸的刮刮卡。

变更日志:

v0.3.3(2020年1月11日)

  • 更新软件包。

v0.3.2(11/07/2020)

  • 使用反跳脚本修复MutationObserver
  • 用Vue的$ el替换slotDomElement

安装和下载:

# Yarn
$ yarn add vue-scratchable

# NPM
$ npm i vue-scratchable --save

如何使用它:

1.导入Scratchable组件。

import VueScratchable from 'vue-scratchable';

2.注册组件。

// globally
Vue.component('vue-scratchable', VueScratchable);

// locally
export default {
  components: {
    VueScratchable,
  }
};

3.将<vue-scratchable />组件添加到应用模板。

<vue-scratchable>
  ...
</vue-scratchable>

4.可能的选项来配置刮刮卡。

brushOptions: {
  type: Object,
  default: () => ({
    size: 20,
    shape: 'round',
  }),
},
hideOptions: {
  type: Object,
  default: () => ({
    type: 'color',
    value: '#dadada',
  }),
},
getPercentageCleared: {
  type: Boolean,
  default: false,
},
percentageStride: {
  type: Number,
  default: 150,
},