做网站的公司 洛阳织梦企业网站

uniapp + vue3 + 京东Nut动作面板组件：实现登录弹框组件（含代码、案例、小程序截图）

代码示下，不再赘述。
动作面板组件：https://nutui-uniapp.netlify.app/components/feedback/actionsheet.html

---

项目背景 · 业务需求 · 描述：

• uniapp + vue3 + 京东Nut框架：
• 实现登录弹框组件
• 小程序token授权登录，获取用户openid后查询数据库匹配手机号false，则弹框授意用户手动绑定手机号后才能通过登录进入首页；否则不予通过登录。

---

案例截图：

• 如下：
  

调用插件：

• 如下：

  </template><nut-button class="submit-btn" type="success" @click="nutsheet.isVisible = true"size="large" shape="square" custom-color="#1aad19">手机号登录</nut-button><!--  弹框表单：手机号登录 --><Sheetv-model:visible="nutsheet.isVisible"@confirm="confirmSheet"@close="closeSheet"/>
  </template><script setup lang="ts">import Sheet from '@/pages/wxlogin/components/sheet.vue'const nutsheet = reactive({isVisible: false,val: '',});function confirmSheet(val: { [x: string]: any; }) {nutsheet.val = ''nutsheet.val = JSON.stringify(val)console.log(val)}function closeSheet() {console.log(nutsheet.isVisible)}
  </script