qq_55491577的博客

在上述代码中，动态添加了类名控制按钮大小；在props中接收父组件传递的背景，按钮大小和是否可点击；并添加了一个自定义点击事件click；在mounted中判断父组件传过来的值做判断，没有传值就选择默认的值；第三步：使用组件，在父组件中，传递了type背景色，size按钮大小，还有disabled是否禁用，父组件没有传递就是默认按钮default的类名样式。在button中封装了按钮的背景颜色，大小，是否可点击的功能；首先看效果图：禁用按钮不可点击。此时可以用 lx-button 作为组件名使用。

按钮也是自己封装的按钮，根据传递的类型更改按钮的大小尺寸和颜色背景是否禁用。点击对应的按钮会弹出下滑效果的提示，加载按钮的提示图标加了一直旋转的动画更美观，加载成功就会弹出成功提示的消息 点击关闭就会触发关闭的回调。上面代码呢，我们给Vue原型添加了$Message 对象，对象中编写了我们需要的通知方法，然后呢我们通过通知组件实例。在MessageComponent.vue中，组件实现打开和关闭通知的逻辑，使用。打开通知时，第一个参数是通知内容，第二个就是消息类类型，第三个是延时参数。

在原型中我们添加了两个方法，并接收4个参数,top：距离顶部的距离，title: 标题，desc：标题详情， duration：展示的时间；其中top,duration不传的话给默认值；点击展示或者隐藏会调用Notice.vue的open和close方法，并且没有传递duration则是默认。此时在页面中就已经可以展示组件了。

在modal.vue中，我们在props中接受四个参数，title：标题，width：宽度， height：高度，top：距离顶部的高度，不传则是默认的值；并提供了两个具名插槽，header和footer，以及一个默认插槽slot显示里面的内容；并添加了三个自定义事件控制modal的显示和隐藏；点击右上角的xx, 取消、确定都会把对话框隐藏，并使用message组件提示用户 ，可以再这三个事件写自己的逻辑，比如点击确定发起请求等；通过外层的div控制组件的显示隐藏。点击打开modal那个按钮弹出对话框。