可用close()方法关闭它。
this.$element("registerDialog").close();附上本页面的代码,后台功能自己搭建了Spring Boot服务器进行交互。下篇将讲解表单组件:
hml:
<!-- 我的 --> <div> <div> <image src="{{ userInfo && userInfo.avatar != \'0\' ? userInfo.avatar : (imgUrl + \'user.png\')}}"></image> <div> <text if="{{ !userInfo }}"> 点击登录/注册 </text> <text if="{{ userInfo }}"> {{ userInfo.nickname ? userInfo.nickname : userInfo.username }} </text> <text if="{{ userInfo }}"> {{ userInfo.age }} {{ userInfo.gender == 1 ? \'男\' : (userInfo.gender == 2 ? \'女\' : \'性别保密\') }} </text> </div> </div> <menu onselected="menuSelect"> <option value="login">登录</option> <option value="register">注册</option> </menu> <dialog> <div> <div> <image src="{{ phone ? (imgUrl + \'phone.png\') : (imgUrl + \'phone1.png\') }}"></image> <input type="number" placeholder="请输入手机号" onchange="inputPhone"></input> </div> <div> <image src="{{ pwd ? (imgUrl + \'password.png\') : (imgUrl + \'password1.png\') }}"></image> <input type="password" placeholder="请输入密码" onchange="inputPwd"></input> </div> <button>登录</button> </div> </dialog> </div> <!-- 我的end -->css:
/*我的*/ .userInfo { width: 92%; height: 240px; margin: 20px 0 20px 0; border-radius: 30px; box-shadow: 5px 5px 15px #bbbbbb; background-color: #eeeeee; display: flex; align-items: center; } .userInfo>image { margin: 0 40px 0 40px; width: 160px; height: 160px; border-radius: 90px; object-fit: contain; } .info_desc { height: 200px; margin-right: 20px; flex: 1; display: flex; flex-direction: column; justify-content: center; } .info_hint { font-size: 48px; font-weight: bold; color: #333333; } .info_name { font-size: 40px; font-weight: 600; height: 100px; color: #333333; } .info_detail { font-size: 34px; color: #666666; } .loginDialog { width: 80%; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .formItem { width: 100%; height: 100px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .formItem>image { width: 70px; height: 70px; margin: 0 10px 0 10px; } input { flex: 1; } .inputBtn { width: 200px; height: 70px; }js:(省略data部分)
// 弹出菜单 showUserMenu() { this.$element("userMenu").show(); }, // 菜单选中 menuSelect(event) { let value = event.value; if ("login" == value) { this.phone = ""; this.pwd = ""; this.$element("loginDialog").show(); } else if ("register" == value) { this.phone = ""; this.pwd = ""; // this.$element("registerDialog").show(); } }, // 手机号输入框 inputPhone(e) { this.phone = e.value; }, // 密码输入框 inputPwd(e) { this.pwd = e.value; }, // 登录 login() { fetch.fetch({ url: this.url + "/litemall/user/login?phone=" + this.phone + "&pwd=" + this.pwd, responseType: "json", success: res => { let data = JSON.parse(res.data); if (0 != data.code) { prompt.showToast({ message: data.msg, duration: 3000 }) } else { this.userInfo = data.data; this.$element("loginDialog").close(); } } }) }登录成功效果: