@tarojs/components
Version:
Taro 组件库。
231 lines (230 loc) • 6.32 kB
JavaScript
import { Component, Prop, h, Host, Listen, Event } from '@stencil/core';
import Taro from '@tarojs/taro';
import classNames from 'classnames';
/**
* Navigator组件参数
* @typedef NavigatorProps
* @property {String} appId 当target="miniProgram"时有效，要打开的小程序 appId
* @property {String} ariaLabel 无障碍访问，（属性）元素的额外描述
* @property {Number} delta 当 openType 为 'navigateBack' 时有效，表示回退的层数
* @property {Object} extraData 当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。详情
* @property {String} [openType=navigate] 跳转方式
* @property {String} path 当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页
* @property {String} [target=self] 在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
* @property {String} url 当前小程序内的跳转链接
* @property {version} [version=release] 当target="miniProgram"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是 *式版，则打开的小程序必定是正式版。
* @property {String} onFail 当target="miniProgram"时有效，跳转小程序失败
* @property {String} onComplete 当target="miniProgram"时有效，跳转小程序完成
* @property {String} onSuccess 当target="miniProgram"时有效，跳转小程序成功
*/
/**
* TODO: 参数还需要进一步细化对齐
* Navigator组件
* https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
**/
export class Navigator {
constructor() {
this.openType = 'navigate';
this.isHover = false;
this.delta = 0;
}
onClick() {
const { openType, onSuccess, onFail, onComplete } = this;
let promise = Promise.resolve();
switch (openType) {
case 'navigate':
promise = Taro.navigateTo({
url: this.url
});
break;
case 'redirect':
promise = Taro.redirectTo({
url: this.url
});
break;
case 'switchTab':
promise = Taro.switchTab({
url: this.url
});
break;
case 'reLaunch':
promise = Taro.reLaunch({
url: this.url
});
break;
case 'navigateBack':
promise = Taro.navigateBack({
delta: this.delta
});
break;
case 'exit':
promise = Promise.reject(new Error('navigator:fail 暂不支持"openType: exit"'));
break;
}
if (promise) {
promise.then(res => {
onSuccess.emit(res);
}).catch(res => {
onFail.emit(res);
}).finally(() => {
onComplete.emit();
});
}
}
render() {
const { isHover, hoverClass } = this;
return (h(Host, { class: classNames({
[hoverClass]: isHover
}) }));
}
static get is() { return "taro-navigator-core"; }
static get originalStyleUrls() { return {
"$": ["./style/index.scss"]
}; }
static get styleUrls() { return {
"$": ["./style/index.css"]
}; }
static get properties() { return {
"hoverClass": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hover-class",
"reflect": false
},
"url": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "url",
"reflect": false
},
"openType": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "open-type",
"reflect": false,
"defaultValue": "'navigate'"
},
"isHover": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "is-hover",
"reflect": false,
"defaultValue": "false"
},
"delta": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "delta",
"reflect": false,
"defaultValue": "0"
}
}; }
static get events() { return [{
"method": "onSuccess",
"name": "cuccess",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "onFail",
"name": "fail",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "onComplete",
"name": "Complete",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
static get listeners() { return [{
"name": "click",
"method": "onClick",
"target": undefined,
"capture": false,
"passive": false
}]; }
}