如何调用这个函数uni.$isSure = function(content) { uni.showModal({ title: '提示', content: content, confirmText: '取消', cancelText: '确认', success: function(res) { if (res.confirm) { console.log('用户点击取消') } else if (res.cancel) { console.log('执行指定的函数') } } }) } 让它执行指定的函数
时间: 2024-04-12 09:29:59 浏览: 20
要让这个函数执行指定的函数,你可以在 `success` 回调函数中调用你想要执行的函数。下面是修改后的代码示例:
```javascript
uni.$isSure = function(content, callback) {
uni.showModal({
title: '提示',
content: content,
confirmText: '取消',
cancelText: '确认',
success: function(res) {
if (res.confirm) {
console.log('用户点击取消');
} else if (res.cancel) {
callback(); // 执行指定的函数
}
}
});
};
```
在这个示例中,我添加了一个名为 `callback` 的参数,通过这个参数传入你想要执行的函数。然后,在 `success` 回调函数中,当用户点击确认时,会调用 `callback()` 执行指定的函数。请确保在调用 `uni.$isSure` 函数时,传入对应的函数作为 `callback` 参数。
相关问题
uniapp中修改uni.showModal弹框content内容样式
要修改uni.showModal弹框content内容样式,可以按照以下步骤进行操作:
1. 在项目的common文件夹下的style.scss文件中定义全局样式,例如:
```scss
.uni-modal{
.uni-modal__bd{
color: blue;
font-size: 32rpx;
font-weight: bold;
padding: 64rpx 0 ;
}
}
```
2. 在main.js中引入show-modal组件,并创建组件show-modal.vue和initModal.js。
3. 在show-modal.vue中定义弹框的样式,例如:
```html
<template>
<div class="modal">
<div class="modal-content">{{content}}</div>
<div class="modal-buttons">
<button @click="cancel">取消</button>
<button @click="confirm">确定</button>
</div>
</div>
</template>
<script>
export default {
props: {
content: {
type: String,
default: ''
}
},
methods: {
cancel() {
this.$emit('cancel')
},
confirm() {
this.$emit('confirm')
}
}
}
</script>
<style scoped>
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
color: blue;
font-size: 32rpx;
font-weight: bold;
}
.modal-buttons {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
</style>
```
4. 在initModal.js中定义uni.showModal的样式,例如:
```js
import Vue from 'vue'
import ShowModal from './show-modal.vue'
function showModal(options) {
const Modal = Vue.extend(ShowModal)
const modal = new Modal({
el: document.createElement('div'),
propsData: {
content: options.content
}
})
document.body.appendChild(modal.$el)
return new Promise((resolve, reject) => {
modal.$on('cancel', () => {
modal.$el.remove()
reject('cancel')
})
modal.$on('confirm', () => {
modal.$el.remove()
resolve('confirm')
})
})
}
uni.showModal = showModal
```
5. 在需要使用uni.showModal的地方,直接调用uni.showModal即可,例如:
```js
uni.showModal({
title: '提示',
content: '这是一个自定义样式的弹框'
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
```
uniapp uni.showModal content 样式
根据提供的引用内容,uni.showModal的content样式可以通过在项目common的style.scss中定义全局样式来实现。具体步骤如下:
1.在项目common的style.scss中定义全局样式,例如:
```scss
.uni-modal{
.uni-modal__bd{
color: blue;
font-size: 32rpx;
font-weight: bold;
padding: 64rpx 0 ;
}
}
```
2.在uni.showModal中设置content的值,并在showModal的success回调函数中获取到弹窗的节点,然后通过节点的classList属性添加样式类名,例如:
```javascript
uni.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
// 获取弹窗节点
const modal = document.querySelector('.uni-modal');
// 添加样式类名
modal.classList.add('uni-modal__bd');
}
});
```
这样就可以通过添加样式类名来设置uni.showModal的content样式了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)