标签：Toast tipObj 插件 const toast --- 组件

将Toast组件封装成插件形式

需求：经常会有提示框，多个页面使用，但是提示框的大小、icon图标等会变化。

思路：多个页面使用，可以封装成全局组件。但是需要多次引人标签，有点繁琐。

一、创建Toast组件

<template>
  <div class="tip" :style="{width: tipObj.width+'px',height:tipObj.height+'px',padding:tipObj.padding+'px',paddingTop:tipObj.paddingTop+'px '}" v-show="isShowTip">
     <span class="iconfont" :class="tipObj.icon" :style="{fontSize:tipObj.iconfontSize+'px'}"></span>
      <p class="tip_text" v-html="tipObj.text" :style="{fontSize:tipObj.fontSize+'px'}">
      </p>
  </div>
</template>
<script>
  export default {
    name: "Tip",
    data(){
      return{
        isShowTip:false,
        tipObj:{
          width:150, 
          height:50,
          padding:9,
          paddingTop:9,
          fontSize:14,
          iconfontSize:12,
          icon:'',//小icon图标样式
          text:'',//显示的内容
          time:2000 //默认显示时间
        }
      }
    },
    methods:{
      showToast(tipObj) {
        this.isShowTip = true;
        this.tipObj=Object.assign(this.tipObj, tipObj);
        const timeId = setTimeout(() => {
          this.isShowTip = false;
          clearTimeout(timeId);
        }, this.tipObj.time);
      },
    }
  }
</script>

二、组件使用形式

<tip  ref="tip"></tip>

this.$refs.tip.showToast({//其他值不传，是按默认值
  text: 'HAHAHAHAH',
  time:5000
});

三、封装成插件的形式

• 在组件中建一个js文件(toast/index.js)

import Toast from './Toast'
const obj={};
obj.install=function (Vue) {
  //1、创建组件构造器
  const toastContrustor=Vue.extend(Toast);
  //2、new的方式，根据组件构造器，可以创建出来一个组件对象
  const toast =new toastContrustor();
  //3、将组件对象，收手动挂载到某一个元素上去
  toast.$mount(document.createElement('div'));
  // 4、toast.$el对应的就是div
  document.body.appendChild(toast.$el);
  Vue.prototype.$toast=toast
}
export default obj

• 安装组件

import toast from 'components/common/toast/index'
// 安装toast插件
Vue.use(toast);//使用use,就会去执行tip的install函数

• 插件的使用

this.$toast.showToast({
  text: 'HAHAHAHAH',
  time:5000
})

标签：Toast,tipObj,插件,const,toast,---,组件
来源： https://www.cnblogs.com/jiajia-hjj/p/15864429.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。