文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue.extend如何使用

2023-07-05 09:05

关注

本文小编为大家详细介绍“vue.extend如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue.extend如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

1.Vue.extend的使用

2.在什么情况下使用Vue.extend

3.举例

比如我们有一个要求就是:实现一个类似于element ui 的 Toast 单框,而element ui 的 Toast 弹框又不能满足我们现阶段的需求,那么就可以使用Vue.extend + $mountl来实现。

如下图

vue.extend如何使用

如上图所示

建立一个Toast.vue 在这个里面写你想要的Toast 弹框样式

<template>  <div class="CustToast" :class="type" v-if="showToast">    <span class="icon">      <img :src="iconSrc" />    </span>    {{ message }}  </div></template><script>export default {    name: 'CustToast',  data () {    return {      showToast: true,      type: 'normal',      message: '消息提示',      duration: 3000    }  },  computed: {    iconSrc () {      window.console.log('当前类型', this.type)      const tipType = ['normal', 'success', 'warning', 'fail']      if (tipType.includes(this.type)) {        return require(`@/assets/img/common/${this.type}.svg`)      } else {        // eslint-disable-next-line no-throw-literal        throw 'Toast type数据只允许为 normal, success, warning, fail 四种其中的一种,默认为normal'      }    }  }}</script><style scoped>.CustToast {  position: fixed;  left: 50%;  top: 50%;  background: rgb(233, 233, 235);  padding: 10px;  border-radius: 5px;  transform: translate(-50%, -50%);  animation: show-toast 0.2s;  color: #909399;  overflow: hidden;  display: flex;  align-items: center;}@keyframes show-toast {  from {    opacity: 0;  }  to {    opacity: 1;  }}.success {  color: #67c23a;  background: rgb(225, 243, 216);}.warning {  color: #e6a23c;  background: rgb(250, 236, 216);}.fail {  color: #f56c6c;  background: rgb(253, 226, 226);}.icon img {  width: 20px;  height: 20px;  margin-top: 3px;  margin-right: 4px;}</style>

新建一个index.js文件

vue.extend如何使用

在点js 文件中写一下代码

import vue from 'vue'// 导入自定义到Toast组件import CustToast from './CustToast.vue'// 生成一个扩展实例构造器const ToastConstructor = vue.extend(CustToast)// 定义弹出组件的函数 接收三个参数 消息 toast类型 显示时间function showToast (message, type = 'normal', duration = 2000) {  // 实例化一个 CustToast.vue  const _toast = new ToastConstructor({    data () {      return {        showToast: true,        type: type,        message: message,        duration: duration      }    }  })  // 把实例化的 CustToast.vue 添加到 body 里  const element = _toast.$mount().$el  document.body.appendChild(element)  // duration时间到了后隐藏  setTimeout(() => { _toast.showToast = false }, duration)}// 需要在main.js 里面使用 Vue.use(showToast);showToast.install = (Vue) => {  // 将组件注册到 vue 的 原型链里去,  // 这样就可以在所有 vue 的实例里面使用 this.$toast()  Vue.prototype.$toast = showToast}// 导出export default showToast

在你的vue项目的 main.js 中导入就可以全局使用了

vue.extend如何使用

使用

vue.extend如何使用

使用效果

vue.extend如何使用

读到这里,这篇“vue.extend如何使用”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯