vue写一个全局输入密码组件

最新推荐文章于 2024-08-13 16:30:10 发布

junx666

最新推荐文章于 2024-08-13 16:30:10 发布

阅读量329

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/junx666/article/details/129417774

版权

文章介绍了如何创建一个名为Savecode.vue的公共组件，该组件包含一个安全操作密码输入对话框。在组件中，使用了ElementUI库的Dialog、Form及Input等元素。同时，文章还展示了如何在同级目录下创建saveCode.js，用于封装组件并提供全局调用的方法，以及在main.js中全局注册该组件，最后给出了在其他页面中如何通过$saveCode方法调用该组件的示例。

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

创建一个公共自组建页面Savecode.vue

<template>
    <div>
        <el-dialog title="请输入安全操作密码" :visible.sync="toshowDia" @close="closeDia" append-to-body width="40%">
            <el-form>
                <el-form-item label="安全操作码">
                    <el-input v-model="form.password" autocomplete="off" show-password style="width: 70%"></el-input>
                </el-form-item>
                <div class="button_box">
                    <div style="flex: 1"></div>
                    <el-button @click="closeDia">取消</el-button>
                    <el-button type="primary" @click="toSureCode">确认</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import auth from '@/api/auth.js';
export default {
    name: 'saveCode',
    data() {
        return {
            toshowDia: false,
          
            form: {
                password: ''
            },
            showInit: 0
        };
    },
    props: {},
    watch: {},
    methods: {
        closeDia() {},
        toSureCode() {},
    },
    created() {

    }
};
</script>

<style scoped>
.button_box {
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.attention_word{
    font-size: 16px;
    color: #333;
}
.attention_word span{
    font-size: 16px;
    color: #449ef9;
}
</style>

在同级文件夹下创建saveCode.js

import MmToast from './Savecode.vue';
import { Message } from 'element-ui';
import Router from '../../router/index.js';
let instance;
let showToast = false;
const saveCode = {
    install(Vue, options = {}) {
        let opt = MmToast.data(); // 获取组件中的默认配置
        Object.assign(opt, options); // 合并配置,最终返回opt以一个对象的形式
        Vue.prototype.$saveCode = (message) => {
            return new Promise((resolve, reject) => {
                if (message) {
                    opt.message = message; // 如果有传message，则使用所传的message
                }
                /* 
                    解决如何把toast里面的template放到body里面，这个时候就可以用到el这个属性，
                    但是如果直接把toast组件里面的el这个属性，再安装插件的时候赋给body是没有用的，这个时候toast还没有渲染出来，那么如何解决呢
                    就是install方法里面来手动挂载组件,创建一个构造器，然后new那个构造器，
                    创建出一个组件对象，然后把这个对象挂载到一个div那里，然后才把内容赋给body，做好把这个构造出来的对象付给原型 
                */
                let TempToastConstructor = Vue.extend(MmToast); // 创建一个TempToastConstructor组件

                instance = new TempToastConstructor({
                    data: opt
                });
                instance.vm = instance.$mount();
                //没有挂载到任何文档中，模板将被渲染为文档之外的的元素，并且你必须使用原生DOM API把它插入文档中。该方法返回实例自身。
                // console.log(instance.vm === instance)  // 输出为true
                document.body.appendChild(instance.vm.$el); //el对应的就是组件的dom元素
                instance.vm.toshowDia = showToast = true;
                instance.toSureCode = function () {
                    if (!instance.vm.form.password) return Message.error('请输入安全码！');
                    resolve(instance.vm.form);
                    instance.vm.toshowDia = showToast = false;
                };

                instance.closeDia = function () {
                    reject();
                    instance.vm.toshowDia = showToast = false;
                    instance.vm.form = {
                        password: ''
                    };
                };
            });
        };
    }
};
export default saveCode;

在main.js中全局注册组件

import saveCode from '@/components/common/saveCode.js';
Vue.use(saveCode);

在页面中使用

  toRemoveTax() { //你的点击方法
            this.$saveCode()
                .then((res) => {
                    
                })
                .catch(() => {});
        }

图片效果