vue组件和插件的创建与使用

最新推荐文章于 2024-05-20 17:14:34 发布

白泽的笔记

最新推荐文章于 2024-05-20 17:14:34 发布

阅读量1.6k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_51024444/article/details/127349578

版权

定义组件

① 定义一个组件，命名为LoadingCom（命名规范：camelCase (驼峰命名法) 与kebab-case (短横线分隔命名)）
② 其中包含数据：visible，text，full
当写成标签时，遇到有大写字母的命名，需要改成小写并用横杆链接前后两个部分，如定义组件时命名为LoadingCom，写成标签时应写成；
组件定义时也可以用横杆法命名；
如果定义时用LoadingCom，标签用是OK的，系统自动识别（loading-com=LoadeingCom）

<template>
    <div v-if="visible" class="loading" :class="{'full':full}">
        {{text}}
    </div>
</template>
export default {
    // props接收父组件传入的属性
    props: {
        // visibLe属性类型为布尔，默认值为false
        visible: {
            type: Boolean,
            default: false
        },
        //text属性，类似为字符串，默认值加载中...
        text: {
            type: String,
            default: "加载中..."
        },
        full: {
            type: Boolean,
            default: false
        }
    }
}
// 如何设计组件
// 接收哪些参数props
// --visible控制是否显示
// --text控制显示什么
// 发送那些事件event
// data

</script>

导入和注册

在所需要的页面script中

// 01导入组件
import LoadingCom from './components/LoadingCom.vue'
export default {
    // 02注册组件
    components: {
        LoadingCom
    },
}

使用

在需要的页面body中

<LoadingCom :text="'大爷,稍等下小的...'" :full="false" :visible="showLoading"></LoadingCom>

这样我们的组件就可以正常使用了

插件的定义与使用

1、插件是一个对象，必须实现install办法
2、插件需要在vue文件中使用Vue.use(插件)
3、插件方法

Vue.extend(.vue文件)继承.vue文件的构造函数

var NotifyCom = Vue.extend(NotifyVue);

instance.$mount(dom)手动挂载

var instance = new NotifyCom();
instance.$mount(document.createElement("div"));
instance.$el 实例的真是dom

挂载全局

Vue.prototype.$toast=Toast
将插件挂载到全局的（所有组件的实例都将拥有拆键的方法和属性）

总体代码

import NotifyVue from "./NotifyVue.vue";
const Notify = {};
Notify.install = function (Vue) {
var NotifyCom = Vue.extend(NotifyVue);
var instance = new NotifyCom();
instance.$mount(document.createElement("div"));
document.body.appendChild(instance.$el);
Notify.show = instance.show;
Notify.hide = instance.hide;
Notify.success = instance.success;
Notify.danger = instance.danger;
Notify.warning = instance.warning;
Vue.prototype.$notify = Notify;
};
export default Notify;

提示插件Notify编写
在plugin创建一个文件夹notify

里面包含NotifyCom.vue和index.js俩文件
NotifyCom.vue文件编写

<template>
<div class="notify"
       v-if="msg"
       :style="{ color: color, backgroundColor: bgColor }">
    {{ msg }}
</div>
</template>
<style scoped>
.notify {
height: 44px;
line-height: 44px;
position: fixed;
width: 100%;
left: 0;
top: 0;
text-align: center;
}
</style>
<script>
export default {
data () {
    return {
      msg: "",
      color: "#fff",
      bgColor: "#090",
    };
},
methods: {
    show (msg, bgColor = "#090", color = "#fff") {
      this.msg = msg;
      this.color = color;
      this.bgColor = bgColor;
      setTimeout(() => {
        this.hide()
      }, 2000)
    },
    hide () {
      this.msg = "";
    },
    // c成功
    success (msg) {
      this.show(msg, "#090")
    },
    danger (msg) {
      this.show(msg, "#ff5500")
    },
    warning (msg) {
      this.show(msg, "#ffd606")
    }
},
};
</script>

index.js

使用

在需要使用的地方插入插件例如我在登录页面，在请求到数据时提醒登陆成功，登陆失败以及网络错误

if (res.data.code === 200) {
            this.$notify.success(res.data.msg)//使用的插件
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('user', JSON.stringify(res.data.user))
            var redirect = this.$route.query.redirect || "/"
            this.$router.replace(redirect)
          } else {
            this.$notify.danger(res.data.msg)//使用的插件
            localStorage.removeItem("token")
            localStorage.removeItem("user")
          }
        }
        ).catch(err => {
          this.$notify.warning("登陆失败")//使用的插件
          console.error(err);
          localStorage.removeItem("token")
          localStorage.removeItem("user")
        })