Vue iOS和Android推送通知预览组件

 website 下载

描述：

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

使用方法

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. 组件默认配置项。

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
}