插件名称 | 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
}