手写js调用公共组件 this.$prompt 写自己的prompt组件

张牛儿

已于 2023-11-01 09:30:51 修改

阅读量322

点赞数

于 2023-10-26 16:20:37 首次发布

本文链接：https://blog.csdn.net/m0_73430799/article/details/134059114

版权

本文详细介绍了如何创建一个简单的Vue组件，模仿ElementUI的prompt功能，并在其他Vue文件中通过JavaScript动态调用。组件包含输入框和确认按钮，通过Promise处理用户输入和回调操作。

摘要由CSDN通过智能技术生成

1、创建一个jszujian.vue文件，写prompt组件代码：

<template>
    <div class="my-box" v-if="flag">
      <!-- 这是自定义组件，以便通过js方法调用 -->
        <div class="main">
            {{ title }}
            <input type="text" v-model="name" @input="inputName">
            <input type="text" v-model="password" @input="inputPassword">
        </div>
        <button @click="confirm">确定</button>
        
    </div>
</template>
<script>
  export default {
    name: 'JsZujian',
    props: {
        title: {
            default: '默认标题',
            type: String,
        },        
    },
    data() {
        return {
            name: '',
            password: '',
            flag: false,
        }
    },
    methods: {
        inputName(e) {
            this.name = e.target.value;
        },
        inputPassword(e) {
            this.password = e.target.value;
        },
        confirm(){
            this.flag = true;
            this.callback(this.name)
        },
    }
  }
</script>

<style lang="less" scoped>
.my-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #858181;
    .main {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        height: 500px;
        background-color: #fff;
    }
}
</style>

2、创建一个index.js文件，引入1中的vue文件，并抛出myJszujianClass方法（即相当于$prompt方法）：

import Vue from "vue";
import jszujian from './jszujian.vue';

const MyConstructor = Vue.extend(jszujian);

let re = {};
function init(option) {
    const myJszujian = new MyConstructor();
        myJszujian.$props.title = option.title || '--';
        myJszujian.$mount();
        document.body.appendChild(myJszujian.$el);
        myJszujian.callback = (name)=>{ // 实例上的东西直接通过实例.方法名或属性名来调用
            re.resolve(name);
            re.reject();
        }
}
function fn(option) {
    return new Promise((resolve, reject) =>{
        re = {resolve, reject}
        init(option);
    });
}

function myJszujianClass (option = {}) {
            return fn(option);
}
// 类似于elementui的prompt,在vue文件中直接使用this.$myJszujianClass的方式使用组件
export default myJszujianClass;

3、在其他vue文件中用js调用此组件：

this.$myJszujianClass({title: '传入标题'}).then(res => {
          console.log(res,'res==');
        }).catch(err =>{
          console.log(err, 'err===');
        });

至此，自己手写的类似elementui的prompt组件就完成了。很简陋，后续该组件的样式以及关闭自己补一下就行。