vue组件之Alert

Flink_China 发布于2019-08-21 17:05 / 2020人阅读

摘要：前言本文主要组件的大致框架，提供少量可配置选项。旨在大致提供思路用于页面中展示重要的提示信息。

前言

本文主要Alert 组件的大致框架，提供少量可配置选项。旨在大致提供思路

Alert

用于页面中展示重要的提示信息。

templat模板结构

大致结构 alert框，icon图标， slot插值（其他样式颜色选项...）
如果需要动画可以在外层包上Vue内置组件transition

script

export default {
  name: "Alert",

  props: {
    closable: {
      type: Boolean,
      default: true
    },
    show: {
      type: Boolean,
      default: true,
      twoWay: true
    },
    type: {
      type: String,
      default: "info"
    }
  },
  data() {
    return {
      visible: this.show
    };
  },
  methods: {
    close() {
      this.visible = false;
      this.$emit("update:show", false);
      this.$emit("close");
    }
  }
};

name: 组件的名字

props: 属性

methods: 方法
点击关闭向外暴露2个事件

使用

import Alert from "./Alert.vue"

Alert.install = function(Vue){
    Vue.component("Alert", Alert);
}
export default Alert


  这是一个不能关闭的alert


  这是一个可以关闭的alert

Attribute

参数	说明	类型	可选值	默认值
closable	是否可关闭	boolean	—	true
show	是否显示	boolean	—	true

Event

事件名称	说明	回调参数
update:show	关闭时触发，是否显示false	false
close	关闭时触发	—

海外云主机私有云 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89107.html

Vue.js非常重要之组件

摘要：它们之间必然需要相互通信父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。这是由使用的父组件决定的。 Vue.js的组件注册组件全局注册要注册一个全局组件，你可以使用 Vue.component(tagName, options)。例如： Vue.component(my-component, { ...

ysl_unh 2019-08-21 16:16 评论0 收藏0
提升90%加载速度——vuecli下的首屏性能优化

摘要：如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。前言之前用vuecli做了个博客，是一个单页面项目，大概有十个路由直接npm run build打包出来，有一个1M的巨大js文件 showImg(https://segmentfault.com/img/bVbtXVk?w=1516&h=218); 先挂载到服务器上试试好家伙...

dreamtecher 2019-08-23 18:09 评论0 收藏0
vuejs组件通信精髓归纳

摘要：组件的通信和和内置的通信手段一般有两种给元素或组件注册引用信息访问父子实例。有时候两个组件之间需要进行通信，但是它们彼此不是父子组件的关系。详情可参考参考组件之间种组件通信方式总结参考参考组件的分类常规页面组件，由 vue-router 产生的每个页面，它本质上也是一个组件（.vue），主要承载当前页面的 HTML 结构，会包含数据获取、数据整理、数据可视化等常规业务。功能性抽...

妤锋シ 2019-08-23 15:23 评论0 收藏0
vue组件挂载到全局方法

摘要：在最近的项目中，使用了来开发，然而在实际的开发过程中却发现这个提供的组件并不能打到我们预期的效果，像等组件每个页面引入就得重复引入，并不像那样可以通过来调用，那么问题来了，如何通过来调用起我们定义的组件或对我们所使用的框架的组件呢。在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等...

aboutU 2019-08-23 10:35 评论0 收藏0
封装Vue组件的一些技巧

摘要：根据组件单向数据流和和事件通信机制，需要由子组件通过事件通知父组件，并在父组件中修改原始的数据，完成状态的更新。本文同步在个人博客shymean.com上，欢迎关注写Vue有很长一段时间了，除了常规的业务开发之外，也应该思考和反思一下封装组件的正确方式。以弹窗组件为例，一种实现是在需要模板中引入需要弹窗展示的组件，然后通过一个flag变量来控制弹窗的组件，在业务代码里面会充斥着冗余的弹...

韩冰 2019-05-23 17:35 评论0 收藏0