uview1.0 提示框

### uView 1.0 框架中提示框的使用方法与实现方式 在 uView 1.0 中，提示框可以通过 `u-toast` 或 `u-modal` 组件实现。以下是两种主要实现方式的详细介绍： #### 使用 `u-toast` 实现简单提示框 `u-toast` 是一个轻量级的提示组件，适合用于展示简短的信息[^3]。 ```vue <template> <view class="content"> <!-- 触发提示框的按钮 --> <u-button @click="showToast">显示提示框</u-button> <!-- 提示框 --> <u-toast ref="uToast"></u-toast> </view> </template> <script> export default { methods: { showToast() { this.$refs.uToast.show({ title: "这是一条提示信息", type: "success", // 提示类型：success、error、warning 等 position: "top", // 显示位置：top、middle、bottom }); }, }, }; </script> ``` - `title`：提示框的内容。 - `type`：提示框的样式类型，支持 `success`、`error`、`warning` 等。 - `position`：提示框的显示位置，可选值为 `top`、`middle` 和 `bottom`。 #### 使用 `u-modal` 实现确认或复杂提示框 `u-modal` 是一个功能更强大的模态框组件，适用于需要用户交互的场景，例如确认操作或输入信息[^3]。 ```vue <template> <view class="content"> <!-- 触发弹窗的按钮 --> <u-button @click="showModal = true">打开确认弹窗</u-button> <!-- 确认弹窗 --> <u-modal :show="showModal" title="提示" content="确定要执行此操作吗？" confirmText="确认" cancelText="取消" @confirm="handleConfirm" @cancel="handleCancel" @close="showModal = false" ></u-modal> </view> </template> <script> export default { data() { return { showModal: false, // 控制弹窗的显示状态 }; }, methods: { handleConfirm() { console.log("用户点击了确认按钮"); this.showModal = false; // 关闭弹窗 }, handleCancel() { console.log("用户点击了取消按钮"); this.showModal = false; // 关闭弹窗 }, }, }; </script> ``` - `:show`：控制弹窗的显示状态，`true` 表示显示，`false` 表示隐藏。 - `title`：弹窗标题。 - `content`：弹窗内容。 - `confirmText` 和 `cancelText`：分别定义确认和取消按钮的文字。 - `@confirm` 和 `@cancel`：分别绑定确认和取消按钮的事件处理函数。 #### 自定义样式 如果需要自定义提示框的样式，可以使用 `::v-deep` 或者直接修改组件的类名样式[^5]。例如： ```css /* 自定义 u-modal 的样式 */ ::v-deep .u-modal__content { font-size: 32rpx; color: #333; } ::v-deep .u-modal__button__text { font-size: 28rpx; } ``` ---