网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一个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
}
转载请注明来源:Vue iOS和Android推送通知预览组件
本文永久链接地址:https://www.moyouyouw.cn/code/1104.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论