一个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
}

---

官网：https://github.com/nenadjovanoski/vue-push-notification-preview

演示：https://www.vue365.cn/code_demo.php?id=3466

GitHub下载：https://github.com/nenadjovanoski/vue-push-notification-preview/archive/master.zip