你可以通过以下步骤在uni-app中实现点击一个按钮弹出一个小方框在本页面上:

  1. 在页面的template中添加一个按钮元素,如:
<view @click="showDialog">点击我</view>
  1. 在页面的script中定义一个data属性来控制小方框的显示与隐藏,如:
data() {
  return {
    showDialog: false
  };
},
  1. 在页面的methods中定义一个方法来控制小方框的显示与隐藏,如:
methods: {
  showDialog() {
    this.showDialog = true;
  }
}
  1. 在页面的template中添加一个小方框元素,并根据showDialog的值来控制其显示与隐藏,如:
<view class="dialog" v-show="showDialog">
  <!-- 小方框的内容 -->
</view>
  1. 根据需要,可以在样式文件中定义小方框的样式,如:
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200rpx;
  height: 200rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

通过以上步骤,你就可以实现在uni-app中点击一个按钮弹出一个小方框在本页面上的效果了

uniapp点击一个按钮弹出一个小方框在本页面上

原文地址: https://www.cveoy.top/t/topic/hQJ8 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录