vue插件初体验（全局组件注册）

vue插件初体验

---

前言

使用vue有的组件可以直接使用，单击引入prop配置需要理清楚，为了解决这个问题，我们可以把组件封装成本地插件（类似e-button这种标签直接添加属性） 

---

一、component是什么？

组件（component）是Vue.js最强大的功能之一。组件可以看成小模块一块一块的，可以封装重复使用（个人理解）。

二、全局注册

结构

1.html结构

代码如下（示例）：

<template>
  <section class="share-button">
    <a href="#"
       ref="button"><i :class="[iconfont, isType]"></i></a>
  </section>
</template>

2.js结构

代码如下（示例）：

<script>
export default {
     
  // 插件名字
  name: 'g-button',
  props: {
     
    // 接受type/size
    type: {
     
      type: [String],
      required: true,
      default: () => {
     
        return 'icon-shangyi-02'
      }
    },
    size: {
     
      type: [Number, String],
      default: () => {
     
        return '60'
      }
    }
  },

  data() {
     
    return {
     
      // 动态添加class名
      iconfont: 'iconfont',
      isType: '',
      isSize: ''
    }
  },
  mounted() {
     
    this.$nextTick(() => {
     
      // 动态修改width/height
      this.$refs.button.style.setProperty('--size', this.isSize)
    })
  },
  computed: {
     },
  watch: {
     
    // 页面一加载立马执行赋值
    type: {
     
      handler(newVal) {
     
        this.isType = newVal
      },
      // 立即处理 进入页面就触发
      immediate: true,
      // 深度监听 属性的变化
      deep: true
    },
    size: {
     
      handler(newVal) {
     
        this.isSize = newVal + 'px'
      },
      // 立即处理 进入页面就触发
      immediate: true
    }
  }
}
</script>

3：css结构

<style lang="less" scoped>
.share-button a {
     
  /* 定义一个变量 */
  --size: 60px;
  display: inline-flex;
  text-decoration: none;
  font-size: 18px;
  width: var(--size);
  height: var(--size);
  color: #fff;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 8px;

  &::before {
     
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #22a6b3, #30336b);
    border-radius: 50%;
    z-index: -1;
    transition: 0.3s ease-in;
  }

  &:hover::before {
     
    transform: scale(0);
  }

  i {
     
    transition: 0.3s ease-in;
  }
  &:hover i {
     
    background: linear-gradient(45deg, #22a6b3, #30336b);
    /* 只有谷歌支持，只显示文字区域的背景 */
    -webkit-background-clip: text;
    /* 文字填充颜色透明直接显示背景 */
    -webkit-text-fill-color: transparent;
    transform: scale(2.2);
  }
}
a .share-button a:hover i {
     
  background: linear-gradient(45deg, #22a6b3, #30336b);
  /* 只有谷歌支持，只显示文字区域的背景 */
  -webkit-background-clip: text;
  /* 文字填充颜色透明直接显示背景 */
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
}
</style>

4：新建button.js引入vue进行install安装

import button from './share-button.vue'

const btn = {
     
  install: function (Vue) {
     
    Vue.component('g-button', button)
  }
}

export default btn

---

5：main.js入口全局注册

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 自定义插件
import sharebutton from '@/plugins/sharebutton/button.js'
Vue.use(sharebutton)

Vue.config.productionTip = false

new Vue({
     
  router,
  store,
  render: h => h(App)
}).$mount('#app')

遇到的问题

Vue.use干什么的：

我们在开发全局注册/插件等的时候会使用install方法来暴露插件
参考的是这位大佬
大佬文章地址

install是干什么的

人家官方规定的

能不能动态添加class名

vue的data属性能不能跟style里面的less进行动态设置

注意：setPrototy设置的是元素自身属性

总结

vue的插件开发还有很多属性，还需要再次学习。vue3.0的发布要更快的过度过去。

代码很多都是低级代码。¹

---

1. 如有错误希望大佬指出 ↩︎