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>
  	
  	<!--  弹框表单：手机号登录 -->
  	<Sheet
        v-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