自定义element-ui plus 函数式调用,在API,js中直接使用全局组件

npm方式:

npm install -D unplugin-vue-components unplugin-auto-import

yarn 方式 :

html 复制代码
yarn add unplugin-vue-components;
yarn add unplugin-auto-import;

使用官方的这个:

html 复制代码
vite.config.js中配置
plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [VantResolver(), ElementPlusResolver()],
        }),
    ],

LoginDialog.js定义

html 复制代码
import {createApp} from 'vue'
import SubDialog from './LoginDialog.vue'

/**
 * 关键函数挂在整个页面上去
 */
const createDialog = () => {
    const mountNode = document.createElement('div')
    mountNode.setAttribute('id', 'dialog-mask-dialog')
    const Instance = createApp(SubDialog, {
        show: true,
        close: () => {
            Instance.unmount(mountNode);
            document.body.removeChild(mountNode);
        }
    })

    document.body.appendChild(mountNode)
    Instance.mount(mountNode)
}

export default createDialog

LoginDialog.vue 定义

html 复制代码
<template>
  <Teleport to="body">

    <el-dialog
        v-model="props.show"
        title="登录"
        width="500px"
        center
    >
      <el-form :model="loginForm" :rules="formDataRule" ref="formRef" label-width="120px">
        <el-form-item label="用户名" prop="phone">
          <el-input v-model="loginForm.phone" placeholder="输入手机号"/>
        </el-form-item>
        <el-form-item label="验证码" prop="verifyCode">
          <div style="display: inline-block">
            <el-input v-model="loginForm.verifyCode" placeholder="输入验证码"/>
          </div>
          <div style="display: inline-block">
            <el-button>获取验证码</el-button>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitLogin(formRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </Teleport>
</template>

<script setup>
import {reactive, ref} from "vue";

const formRef = ref(null)

const loginForm = reactive({
  phone: '',
  verifyCode: ''
})


const formDataRule = {
  phone: [{required: true, message: '手机号不能为空', trigger: 'blur'}],
  verifyCode: [{required: true, message: '验证码不能为空', trigger: 'blur'}]
}

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})


const submitLogin = (ref) => {
  ref.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}


</script>

<style scoped>

</style>
相关推荐
sunly_2 分钟前
CSS:跑马灯
前端·css
2301_8187320610 分钟前
用layui表单,前端页面的样式正常显示,但是表格内无数据显示(数据库连接和获取数据无问题)——已经解决
java·前端·javascript·前端框架·layui·intellij idea
yqcoder11 分钟前
npm link 作用
前端·npm·node.js
林涧泣16 分钟前
【Uniapp-Vue3】页面和路由API-navigateTo及页面栈getCurrentPages
前端·vue.js·uni-app
Komorebi゛19 分钟前
【uniapp】获取上传视频的md5,适用于APP和H5
前端·javascript·uni-app
林涧泣24 分钟前
【Uniapp-Vue3】动态设置页面导航条的样式
前端·javascript·uni-app
杰九41 分钟前
【全栈】SprintBoot+vue3迷你商城(10)
开发语言·前端·javascript·vue.js·spring boot
Hopebearer_1 小时前
入门 Canvas:Web 绘图的强大工具
前端·javascript·es6·canva可画
ILUUSION_S1 小时前
Vue平台开发三——项目管理页面
javascript·vue.js
m0_748254882 小时前
项目升级Sass版本或升级Element Plus版本遇到的问题
前端·rust·sass