vue插件

vue插件基本雏形

vue基本知识
  //main.js中引入和使用插件
  import toast from './components/toast';
  Vue.use(toast)
  
  //./components/toast/index.js
  const obj = {};
  obj.install = function(Vue){
  	console.log(Vue);  
  }
  export default obj;

Vue的use方法会自动调用引入对象的install方法,并将Vue传入到install方法中,即会打印出Vue的构造函数

vue绑定对象问题

./components/toast/index.js引入toast.vue模板

import Toast from './toast.vue';
const obj = {};

obj.install = function(Vue){
  console.log(Vue);
  console.log(Toast.$el);
  Vue.prototype.$toast = Toast;
  
}
export default obj;

在其他模板中虽然能打印出this.$toast 但是没办法将template里面的html代码插入到body中,Toast.$el为undefined是因为没有挂在到dom节点上

import Toast from './toast.vue';
const obj = {};

obj.install = function(Vue){
  // 1.创建组件构造器
  const ToastConstructor = Vue.extend(Toast);

  // 2.new方式生成组件对象
  const ToastObj = new ToastConstructor();

  console.log(ToastObj);

  // 3.将组件对象挂在到某个div上
  ToastObj.$mount(document.createElement('div'));
  console.log(ToastObj.$el);

  // 4.将组件添加到body中
  document.body.appendChild(ToastObj.$el);

  Vue.prototype.$toast = ToastObj;
}
export default obj;

toast.vue文件

<template>
  <div class="toast" v-show="isShow">
    {{message}}
  </div>
</template>

<script>
  export default {
    name: 'toast',
    props:{
      /*message:{
        type:String,
        default:'默认提示'
      },
      duration:{
        type:Number,
        default:2000
      }*/
    },
    data() {
      return {
        message:'',
        isShow: false
      }
    },
    methods:{
      show(message,duration=2000) {
        this.isShow = true;
        this.message = message;
        setTimeout(()=>{
          this.message= '';
          this.isShow = false;
        },duration)
      }
    }
  }
</script>

<style scoped>
  .toast {
    position: fixed;
    z-index:999;
    background-color: red;

    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 8px 10px;
    background-color: rgba(0,0,0,.75);
    color: #fff;
  }
</style>

这种方式虽然能实现功能,但是使用的时候用this.$toast.show(‘haha’,10000)这种方式默认调用里面的方法,不太好。 下面改造成this.$toast({message:‘haha’,duration:5000})这种对象使用方法。

import Vue from 'vue';
import Toast from './toast.vue';

export const messageBox = (function(){
  //默认配置
  const defaults ={
    title:'',
    content:'',
    cancel:'取消',
    ok:'确认',
    handleCancel:null,
    handleOk:null
  };
  const MyComponent = Vue.extend(Toast);
  return function(opts){
    for(let attr in opts){
      defaults[attr]=opts[attr];
    }
    //const MyComponent = Vue.extend(Toast);
    const vm = new MyComponent({
      el:document.createElement('div'),
      data:{
        title:defaults.title,
        content:defaults.content,
        cancel:defaults.cancel,
        ok:defaults.ok
      },
      methods:{
        handleCancel(){
          defaults.handleCancel && defaults.handleCancel.apply(this);
          document.body.removeChild(vm.$el);
        },
        handleOk(){
          defaults.handleOk && defaults.handleOk.apply(this);
          document.body.removeChild(vm.$el);
        }
      }
    });
    document.body.appendChild(vm.$el)
  }
})();

<template>
  <div class="messageBox">
    <h2>{{title}}</h2>
    <p>{{content}}</p>
    <div>
      <div @click="handleCancel">{{cancel}}</div>
      <div @click="handleOk">{{ok}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'messageBox',
    data() {
      return {}
    }
  }
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .messageBox {
    position: fixed;
    width: 200px;
    /*height: 110px;*/
    border: 1px solid #ccc;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(0,0,0,.75);
    color: #fff;
  }
  .messageBox h2{
    text-align: center;
    line-height: 40px;
    font-size: 18px;
  }
  .messageBox p{
    text-align: center;
    line-height: 40px;
  }
  .messageBox > div{
    position: relative;
    display: flex;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 30px;
    border-top: 1px solid #ccc;
  }
  .messageBox > div div{
    flex:1;
    text-align: center;
    line-height: 30px;
    border-right: 1px solid #ccc;
  }
  .messageBox > div div:last-child{
    border: none;
  }
</style>

使用方式:

  1. 先引入改插件
    import { messageBox } from ‘…/components/toast1’
  2. 在使用 showToast为使用组件内部方法
  showMessage(){
     let that = this;
     messageBox({
       title:'沈阳',
       content:'内容阿萨德发挥擦搜ID发财树六还不阿斯顿发的发多岁的',
       cancel:'去下',
       ok:'城市定位',
       handleOk(){
         that.showTitle();
       },
       handleCancel() {
         console.log(this); //指向messageBox组件
         that.showToast('你好啊',5000);
         that.showTitle();
       }
     })
   }
messageBox的另一版

index.js文件

import Vue from 'vue';
import Toast from './messageBox.vue';

const obj = {};

obj.install = function(Vue,opts){
    const MyComponent = Vue.extend(Toast);
    Vue.prototype.$messageBox = function(opts){
      //默认配置
      const defaults ={
        title:'标题',
        content:'内容',
        cancel:'取消',
        ok:'确认',
        handleCancel:null,
        handleOk:null
      };
      for(let attr in opts){
        defaults[attr]=opts[attr];
      }
      const vm = new MyComponent({
        el:document.createElement('div'),
        data:{
          title:defaults.title,
          content:defaults.content,
          cancel:defaults.cancel,
          ok:defaults.ok
        },
        methods:{
          handleCancel(){
            defaults.handleCancel && defaults.handleCancel.apply(this);
            document.body.removeChild(vm.$el);
          },
          handleOk(){
            defaults.handleOk && defaults.handleOk.apply(this);
            document.body.removeChild(vm.$el);
          }
        }
      });
      document.body.appendChild(vm.$el)
    }
}
export default obj;


messageBox.vue文件

<template>
  <div class="toast2">
    <h2>{{title}}</h2>
    <p>{{content}}</p>
    <div>
      <div @click="handleCancel">{{cancel}}</div>
      <div @click="handleOk">{{ok}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'toast2',
    data() {
      return {}
    }
  }
</script>

<style scoped>
  .toast2 {
    position: fixed;
    width: 200px;
    border: 1px solid #ccc;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(0,0,0,.75);
    color: #fff;
  }
  .toast2 h2{
    text-align: center;
    line-height: 40px;
    font-size: 18px;
  }
  .toast2 p{
    text-align: center;
    line-height: 40px;
  }
  .toast2 > div{
    position: relative;
    display: flex;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 30px;
    border-top: 1px solid #ccc;
  }
  .toast2 > div div{
    flex:1;
    text-align: center;
    line-height: 30px;
    border-right: 1px solid #ccc;
  }
  .toast2 > div div:last-child{
    border: none;
  }
</style>

使用:在main.js中引入并安装
import messageBox from ‘./components/toast2’
Vue.use(messageBox);
在用的组件上

     showMes(){
        const that = this;
        this.$messageBox({
          title:'messageBoxTitle',
          content:'messageBoxContent',
          ok:'box确认',
          cancel:'box取消',
          handleCancel(){
            console.log(this); //指向messageBox组件
            that.showToast('你好啊',5000);
            that.showTitle();
          },
          handleOk() {
            that.showTitle();
          }
        })
      }

还剩问题是别人组件没有const that = this 的this指向问题直接使用内部的方法

### Vue.js 插件及其使用方法 #### 一、Vue.js 的插件概念 Vue.js 中的插件可以看作是对框架核心功能的一种增强工具。它们能够为项目提供额外的功能支持,比如路由管理、状态管理以及 UI 组件库等[^1]。 --- #### 二、常见的 Vue.js 插件列表 以下是几个常用的 Vue.js 插件: 1. **Vue Router** - 功能:用于实现单页面应用程序中的导航和路由管理。 - 使用场景:当需要在不同视图之间切换时使用。 - 安装方式: ```bash npm install vue-router@next --save ``` 2. **Vuex** - 功能:作为 Vue 应用的状态管理模式,帮助集中管理和共享数据。 - 使用场景:适用于复杂的应用程序,尤其是多个组件间存在大量交互的情况。 - 安装方式: ```bash npm install vuex@next --save ``` 3. **Axios** - 虽然 Axios 不是一个官方插件,但它常被封装成 Vue 插件形式使用,主要用于处理 HTTP 请求。 - 使用场景:与后端 API 进行通信。 - 安装方式: ```bash npm install axios --save ``` - 将其挂载至 Vue 原型上的示例代码: ```javascript import axios from 'axios'; const plugin = { install(Vue) { Vue.prototype.$http = axios; } }; export default plugin; ``` 4. **Element Plus (基于 Vue 3 的 Element UI 升级版)** - 功能:提供了丰富的前端 UI 组件集合。 - 使用场景:快速构建美观且响应式的界面。 - 安装方式: ```bash npm install element-plus --save ``` 5. **Vuetify** - 功能:Material Design 风格的 Vue UI 框架。 - 使用场景:希望遵循 Google Material Design 设计原则开发应用。 - 安装方式: ```bash npm install vuetify --save ``` 6. **Pinia (替代 Vuex 的新一代状态管理方案)** - 功能:更轻量化的状态管理解决方案,专为 Vue 3 打造。 - 使用场景:适合现代 Vue 项目的简单高效状态管理需求。 - 安装方式: ```bash npm install pinia --save ``` 7. **Vue CLI Plugins** - 功能:辅助开发者配置环境变量、集成第三方服务等功能。 - 使用场景:自动化脚本生成器或特定技术栈的支持。 - 添加 CLI 插件命令: ```bash vue add <plugin-name> ``` 8. **Vue Devtools** - 功能:浏览器扩展工具,方便调试 Vue 应用。 - 下载地址:Chrome 或 Firefox 浏览器商店均可获取。 --- #### 三、Vue.js 插件的定义与注册方法 ##### (1)Vue 2.x 版本中插件的创建与注册 - **对象定义插件**: ```javascript const myPlugin = { install(Vue, options) { // 自定义逻辑... Vue.component('my-component', {}); Vue.directive('my-directive', {}); Vue.prototype.$customMethod = () => console.log('Custom Method'); } }; Vue.use(myPlugin); ``` - **函数定义插件**: ```javascript function myPlugin(Vue, options) { Vue.prototype.$anotherMethod = () => console.log('Another Custom Method'); } Vue.use(myPlugin); ``` ##### (2)Vue 3.x 版本中插件的创建与注册 由于 Vue 3 引入了 Composition API 和新的实例化模式,因此插件设计略有调整: - **对象定义插件**: ```javascript const myPlugin = { install(app, options) { app.config.globalProperties.$customProperty = 'Global Property'; app.component('MyComponent', {}); app.directive('myDirective', {}); } }; const app = createApp(App); app.use(myPlugin).mount('#app'); ``` --- #### 四、IntelliJ IDEA 中 Vue.js 插件的相关操作 如果遇到无法在线搜索到 Vue.js 插件的问题,可以通过手动下载并导入的方式来解决。具体步骤如下: 1. 访问 JetBrains 官方插件市场链接[^2]; 2. 根据当前 IDE 的版本号匹配合适的插件版本[^3]; 3. 下载 `.zip` 文件后,在 IDEA 设置 -> Plugins 页面上传该压缩包; 4. 完成加载后重启软件生效。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值