uni-app clicks the button to pop up a prompt box (displayed in the form of a pop-up window), select OK and Cancel

learning target:

学习目标如下所示:

  • After uni-app clicks the submit button, a prompt box will pop up (displayed in the form of a pop-up window), prompting the user whether to confirm the submission (that is, confirm and cancel). After clicking OK, the real submission method will be called to transfer the data to the backend, and click cancel After that, the modal box disappears automatically without requesting the backend interface.

Learning Content:

内容如下所示:

  1. Display the modal box that the user needs to confirm
    Click the submit button, the pop-up window will be displayed
<view style="display: flex; justify-content: space-around;">
	  <button class="button" @click="submit">t提交</button>
</view>
  1. method called
submit(){
			let that=this
			uni.showModal({
					title: '提示:',
					content: '请确认是否要提交?',
					success: function(res) {
						if (res.confirm) {
							// console.log('确定');
					     	//TODO
						} else if (res.cancel) {
							// console.log('取消');
							//TODO
						}
					}
			});
		},

Summarize:

知识小结:

  • The main content of the modal box
uni.showModal({
   title: '提示',
   content: '请确认是否要提交?',
   success: function (res) {
       if (res.confirm) {
           console.log('用户点击确定');
       } else if (res.cancel) {
           console.log('用户点击取消');
       }
   }
});
  • 2. Note:
    The size of the prompt box of the uni.showModal method is fixed, and the text size in the prompt box cannot be changed by setting the font size. If we want to control the text size, we can do it through CSS style. That is, the font size is controlled by font-size: 16px;
  • 3. The example effect is as follows:
    insert image description here

Guess you like

Origin blog.csdn.net/YHLSunshine/article/details/131902597