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
;
Use components
essence-ion-amap
需求在index.html引入高德地图API:
-
Use in Template
-
Use in component
amapReady $event: EssenceIonAMapComponentamapDestroy $event
essence-ion-videoplayer
-
Use in Template
-
Use in component
url: string = 'http://www.laixiangran.cn/CDN/custom/video/test.mp4';constructorvideoViewerReady$event: any
essence-ion-calendar
-
Use in Template
-
Use in component
schedules: any;constructoronReadyonDateChange$event: DateonViewSchedule$event: any
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)
- 查看对应日期的数据