essence-ionic v5.0.0
essence-ionic
This is ionic custom components.
Introduce
essence-ion-amap(高德地图)
essence-ion-videoplayer(视频播放器)
essence-ion-calendar(日历)
Usage
Install
npm install --save essence-ionic@latest
Add the EssenceIonicModule
import {EssenceIonicModule} from "essence-ionic"; @NgModule({ imports: [ EssenceIonicModule ] })
Use components
essence-ion-amap
需求在index.html引入高德地图API:
Use in Template
<essence-ion-amap (ready)="amapReady($event)" (destroy)="amapDestroy($event)"></essence-ion-amap>
Use in component
amapReady ($event: EssenceIonAMapComponent) { console.log($event); } amapDestroy ($event) { console.log($event); }
essence-ion-videoplayer
Use in Template
<div #videoDiv> <essence-ion-videoplayer (ready)="videoViewerReady($event)" [source]="url" [width]="videoDiv.offsetWidth"></essence-ion-videoplayer> </div>
Use in component
url: string = 'http://www.laixiangran.cn/CDN/custom/video/test.mp4'; constructor() {} videoViewerReady($event: any) { console.log($event); }
essence-ion-calendar
Use in Template
<essence-ion-calendar [schedules]="schedules" (ready)="onReady()" (ViewSchedule)="onViewSchedule($event)" (dateChange)="onDateChange($event)"> </essence-ion-calendar>
Use in component
schedules: any; constructor() { this.schedules = [ { date: new Date(), data: { title: '参加会议', address: '公司会议室', content: '讨论考核制度', info: '参会人员包括:张三、李四' } } ] } onReady() { console.log('日历组件加载完成!'); } onDateChange($event: Date) { console.log($event); } onViewSchedule($event: any) { console.log($event); }
API
essence-ion-amap
Inputs
apiKey
(string) - 高德地图JS API key,请到官网申请webApiKey
(string) - 高德地图Web服务key,请到官网申请options
(?Object
) - 地图初始化参数对象,参数详情showCurrentLocation
(?boolean=false
) - 是否显示定位按钮,true为显示isShowMapToolbar
(?boolean=true
) - 是否显示左下角地图工具栏,true为显示showLocationMarker
(?boolean=true
) - 是否显示定位之后的图标,true为显示showTraffic
(?boolean=false
) - 是否加载实时交通图层,true为加载
Outputs (event)
ready($event)
- 地图初始化完成事件,参数$event为当前EssenceIonAMapComponent实例对象destroy($event)
- 地图销毁事件location($event)
- 地图定位成功事件,参数$event为{code,info, result}
Properties
eAMap
(any
) - 高德地图对象AMap
essence-ion-videoplayer
Inputs
width
(?number=0
) - 视频播放器的宽度height
(?number=0
) - 视频播放器的高度poster
(?string
) - 视频海报路径source
(string
) - 视频路径
Outputs (event)
ready($event)
- 视频播放器初始化完成事件,参数$event为当前EssenceIonVideoplayerComponent实例对象videoPlay($event)
- 视频播放开发事件videoPause($event)
- 视频播放暂停事件videoEnded($event)
- 视频播放结束事件videoPan($event)
- 视频滑动快进/退事件videoError($event)
- 视频播放错误事件
essence-ion-calendar
Inputs
schedules
(?Array<{date: Date, data: any}>
) - 要显示在日历中对应日期的数据
Outputs (event)
ready($event)
- 日历初始化完成事件,参数$event为当前EssenceIonCalendarComponent实例对象dateChange($event)
- 日期改变事件,参数$event为改变之后的日期viewData($event)
- 查看对应日期的数据