### [uniapp popup常用弹窗](https://pmself.com/article/3752)

**Published:** 2024-02-29T01:00:04

**Author:** chifat

**Excerpt:** 1. 上、下、左、右、中间弹出层 2. 上方成功、失败、警告、信息 提示消息 3. confirm 对话框弹窗…

#### 1\. 上、下、左、右、中间弹出层

```
<view>
    <button class="button" type="primary" @click="toggle('top')"><text class="button-text">点击触发</text></button>
    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff" @change="change">
        <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
        <text>popup 内容</text></view>
    </uni-popup>
</view>

return {
    type: 'center',
}
methods: {
    // 显示/关闭弹出层的监听
    change(e) {
        console.log('当前模式：' + e.type + ',状态：' + e.show);
    },
    // type 取值范围：left、right、top、bottom、center
    toggle(type) {
        this.type = type
        this.$refs.popup.open(type) // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
    },
}

<style lang="scss">
    @mixin flex {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
    }

    @mixin height {
        /* #ifndef APP-NVUE */
        height: 100%;
        /* #endif */
        /* #ifdef APP-NVUE */
        flex: 1;
        /* #endif */
    }
    .popup-content {
        @include flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        height: 50px;
        background-color: #fff;
    }

    .popup-height {
        @include height;
        width: 200px;
    }
</style>
```

#### 2\. 上方成功、失败、警告、信息 提示消息

```
<view>
    <button class="button popup-success" @click="messageToggle('success')"><text class="button-text success-text">成功</text></button>
    <!-- 提示信息弹窗 -->
    <uni-popup ref="message" type="message">
        <uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
    </uni-popup>
</view>

return {
    msgType: 'success',
    messageText: '这是一条成功提示',
}
methods: {
    // type 取值范围：success、error、warn、info
    messageToggle(type) {
        this.msgType = type
        this.messageText = `这是一条${type}消息提示`
        this.$refs.message.open()
    },
}

<style lang="scss">
    @mixin flex {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
    }
    .button {
        @include flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 35px;
        margin: 0 5px;
        border-radius: 5px;
    }
    .button-text {
        color: #fff;
        font-size: 12px;
    }
    .popup-success {
        color: #fff;
        background-color: #e1f3d8;
    }
    
    .popup-warn {
        color: #fff;
        background-color: #faecd8;
    }
    
    .popup-error {
        color: #fff;
        background-color: #fde2e2;
    }
    
    .popup-info {
        color: #fff;
        background-color: #f2f6fc;
    }
    .success-text {
        color: #09bb07;
    }
    
    .warn-text {
        color: #e6a23c;
    }
    
    .error-text {
        color: #f56c6c;
    }
    
    .info-text {
        color: #909399;
    }
    
</style>
```

#### 3\. confirm 对话框弹窗

```
<view>
    <button class="button popup-success" @click="dialogToggle('success')"><text class="button-text success-text">成功</text></button>
    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 uni-popup!" @confirm="dialogConfirm"
            @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
</view>

return {
    msgType: 'success',
    messageText: '这是一条成功提示',
}
methods: {
    // type 取值范围：success、error、warn、info
    dialogToggle(type) {
        this.msgType = type
        this.$refs.alertDialog.open()
    },
    // 确认
    dialogConfirm() {
        console.log('点击确认')
        this.messageText = `点击确认了 ${this.msgType} 窗口`
    },
    // 关闭
    dialogClose() {
        console.log('点击关闭')
    },
}

<style lang="scss">
    @mixin flex {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
    }
    .button {
        @include flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 35px;
        margin: 0 5px;
        border-radius: 5px;
    }
    .button-text {
        color: #fff;
        font-size: 12px;
    }
    .popup-success {
        color: #fff;
        background-color: #e1f3d8;
    }
    
    .popup-warn {
        color: #fff;
        background-color: #faecd8;
    }
    
    .popup-error {
        color: #fff;
        background-color: #fde2e2;
    }
    
    .popup-info {
        color: #fff;
        background-color: #f2f6fc;
    }
    .success-text {
        color: #09bb07;
    }
    
    .warn-text {
        color: #e6a23c;
    }
    
    .error-text {
        color: #f56c6c;
    }
    
    .info-text {
        color: #909399;
    }
</style>
```

#### 4\. prompt 输入框弹窗

```
<view>
    <button class="button" type="primary" @click="inputDialogToggle"><text class="button-text">输入对话框</text></button>
    <!-- 输入框示例 -->
    <uni-popup ref="inputDialog" type="dialog">
        <uni-popup-dialog ref="inputClose"  mode="input" title="输入内容" value="对话框预置提示内容!"
            placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
    </uni-popup>
</view>

return {
    value: '',
}
methods: {
    inputDialogToggle() {
        this.$refs.inputDialog.open()
    },
    dialogInputConfirm(val) {
        uni.showLoading({
            title: '3秒后会关闭'
        })
    
        setTimeout(() => {
            uni.hideLoading()
            console.log(val)
            this.value = val
            // 关闭窗口后，恢复默认内容
            this.$refs.inputDialog.close()
        }, 3000)
    },
}

<style lang="scss">
    @mixin flex {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
    }
    .button {
        @include flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 35px;
        margin: 0 5px;
        border-radius: 5px;
    }
    .button-text {
        color: #fff;
        font-size: 12px;
    }
</style>
```

**Tags:** popup常用弹窗, uniapp

**Categories:** Uniapp

---