提交 07baaa2f 编写于 作者: Y yurj26

feat(API): add prompt apis

上级 1ed51d45
...@@ -96,6 +96,30 @@ ...@@ -96,6 +96,30 @@
"style": { "style": {
"navigationBarTitleText": "数据存储" "navigationBarTitleText": "数据存储"
} }
},
{
"path": "pages/API/action-sheet/action-sheet",
"style": {
"navigationBarTitleText": "操作菜单"
}
},
{
"path": "pages/API/modal/modal",
"style": {
"navigationBarTitleText": "模态弹窗"
}
},
{
"path": "pages/API/show-loading/show-loading",
"style": {
"navigationBarTitleText": "加载提示框"
}
},
{
"path": "pages/API/toast/toast",
"style": {
"navigationBarTitleText": "消息提示框"
}
} }
], ],
"globalStyle": { "globalStyle": {
......
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button class="target" type="default" @tap="actionSheetTap">弹出action sheet</button>
</view>
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'action-sheet',
// #ifdef H5
buttonRect: {},
// #endif
}
},
// #ifdef H5
onReady() {
this.getNodeInfo()
window.addEventListener('resize', this.getNodeInfo)
},
beforeDestroy() {
window.removeEventListener('resize', this.getNodeInfo)
},
// #endif
methods: {
actionSheetTap() {
const that = this
uni.showActionSheet({
title: '标题',
itemList: ['item1', 'item2', 'item3', 'item4'],
// #ifdef H5
popover: {
// 104: navbar + topwindow 高度,暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
top: that.buttonRect.top + 104 + that.buttonRect.height,
left: that.buttonRect.left + that.buttonRect.width / 2
},
// #endif
success: (e) => {
console.log(e.tapIndex);
uni.showToast({
title: "点击了第" + e.tapIndex + "个选项",
icon: "none"
})
}
})
},
// #ifdef H5
getNodeInfo() {
uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => {
const rect = ret[0]
if (rect) {
this.buttonRect = rect
}
});
}
// #endif
}
}
</script>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button class="uni-btn" type="default" @tap="modalTap">有标题的modal</button>
<button class="uni-btn" type="default" @tap="noTitlemodalTap">无标题的modal</button>
</view>
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'modal'
}
},
methods: {
modalTap: function () {
uni.showModal({
title: "弹窗标题",
content: "弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内",
showCancel: false,
confirmText: "确定"
})
},
noTitlemodalTap: function () {
uni.showModal({
content: "弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内",
confirmText: "确定",
cancelText: "取消"
})
}
}
}
</script>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button class="uni-btn" type="primary" @click="showLoading">显示 loading 提示框</button>
<!-- #ifndef MP-ALIPAY -->
<button class="uni-btn" @click="hideLoading">隐藏 loading 提示框</button>
<!-- #endif -->
</view>
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'loading'
}
},
methods: {
showLoading: function() {
uni.showLoading({
title: 'loading'
});
// #ifdef MP-ALIPAY
this._showTimer && clearTimeout(this._showTimer);
this._showTimer = setTimeout(() => {
this.hideLoading();
}, 3000)
// #endif
},
hideLoading: function() {
uni.hideLoading();
}
}
// #ifdef MP-ALIPAY
,
onUnload() {
this._showTimer && clearTimeout(this._showTimer);
}
// #endif
}
</script>
\ No newline at end of file
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button class="uni-btn" type="default" @tap="toast1Tap">点击弹出默认toast</button>
<button class="uni-btn" type="default" @tap="toast2Tap">点击弹出设置duration的toast</button>
<button class="uni-btn" type="default" @tap="toast3Tap">点击弹出显示loading的toast</button>
<!-- #ifndef MP-ALIPAY -->
<button class="uni-btn" type="default" @tap="toast4Tap">点击弹出显示自定义图片的toast</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<button class="uni-btn" type="default" @tap="toast5Tap">点击显示无图标的居底toast</button>
<!-- #endif -->
<button class="uni-btn" type="default" @tap="hideToast">点击隐藏toast</button>
</view>
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'toast',
_showTimer: 0
}
},
// #ifdef MP-ALIPAY
onUnload() {
clearTimeout(this._showTimer);
},
// #endif
methods: {
toast1Tap: function () {
uni.showToast({
title: "默认"
})
},
toast2Tap: function () {
uni.showToast({
title: "duration 3000",
duration: 3000
})
},
toast3Tap: function () {
uni.showToast({
title: "loading",
icon: "loading",
duration: 5000
})
// #ifdef MP-ALIPAY
this._showTimer = setTimeout(() => {
// icon 是 loading 时,showToast 实际执行的是 showLoading
my.hideLoading()
// 执行完所有代码再清除定时器
clearTimeout(this._showTimer);
}, 3000)
// #endif
},
toast4Tap: function () {
uni.showToast({
title: "logo",
image: "/static/uni.png"
})
},
// #ifdef APP-PLUS
toast5Tap: function () {
uni.showToast({
title: "显示一段轻提示",
position: 'bottom'
})
},
// #endif
hideToast: function () {
uni.hideToast()
}
}
}
</script>
\ No newline at end of file
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
</view> </view>
<view class="uni-panel-c" v-if="item.open"> <view class="uni-panel-c" v-if="item.open">
<view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)"> <view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
<text class="uni-navigate-text" :class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text> <text class="uni-navigate-text"
:class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
<image :src="arrowRightIcon" class="uni-icon"></image> <image :src="arrowRightIcon" class="uni-icon"></image>
</view> </view>
</view> </view>
...@@ -94,18 +95,22 @@ ...@@ -94,18 +95,22 @@
{ {
name: "显示操作菜单", name: "显示操作菜单",
url: "action-sheet", url: "action-sheet",
enable: true
}, },
{ {
name: "显示模态弹窗", name: "显示模态弹窗",
url: "modal", url: "modal",
enable: true
}, },
{ {
name: "显示加载提示框", name: "显示加载提示框",
url: "show-loading", url: "show-loading",
enable: true
}, },
{ {
name: "显示消息提示框", name: "显示消息提示框",
url: "toast", url: "toast",
enable: true
}, },
] as Page[], ] as Page[],
}, },
...@@ -317,7 +322,7 @@ ...@@ -317,7 +322,7 @@
pages: [ pages: [
{ {
name: "数据存储(key-value)", name: "数据存储(key-value)",
url: "storage", url: "storage",
enable: true enable: true
}, },
// #ifdef APP-PLUS // #ifdef APP-PLUS
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册