Vue的推送通知预览组件 - vue-push-notification-preview

Vue的推送通知预览组件 - vue-push-notification-preview
插件名称 vue-push-notification-preview
发布时间 2020年12月17日
插件作者 nenadjovanoski

一个Vue.js组件,用于在屏幕上显示iOS和Android推送通知预览。

安装和下载:

# NPM
$ npm i vue-push-notification-preview

如何使用它:

1.导入并注册组件。

import { 
  AndroidPreview, 
  IphonePreview 
} from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices.scss';
export default {
  components: {
    AndroidPreview,
    IphonePreview
  }
};
// Globally
Vue.component('AndroidPreview', AndroidPreview);
Vue.component('IphonePreview', IphonePreview);

2.创建推送通知预览:

// iPhone
<iphone-preview
  text-body="Body"
  text-title="Title"
/>
// Android
<android-preview
  text-body="Body"
  text-title="Title"
/>

3.可用的组件 props 。

textApplicationName: {
  type: String,
  default: 'App name'
},
textTime: {
  type: String,
  default: '1h ago',
  validator: value => value.length < 8
},
textTitle: {
  type: String,
  default: 'Title notification'
},
textBody: {
  type: String,
  default: ''
},
height: {
  type: Number,
  default: DEVICE_SIZE.IPHONE_X_HEIGHT
},
isVisibleToggler: { // only for Android
  type: Boolean,
  default: false
}
image: {
  type: String,
  default: ''
},
backgroundImage: {
  type: String,
  default: ''
},
backgroundColor: {
  type: String,
  default: '#c1c1c1'
},
appearanceMode: {
  type: String,
  default: APPEARANCE_MODE.LIGHT,
  validator: value => Object.values(APPEARANCE_MODE).indexOf(value) !== -1
}