自定义vue2.0全局组件(下篇)

  1. 云栖社区>
  2. 博客>
  3. 正文

自定义vue2.0全局组件(下篇)

小丑丁丁 2017-06-15 13:13:25 浏览2431
展开阅读全文
在上篇中,老K为大家介绍了一个初级自定义按钮组件的编写方法。虽然能用,但是还不算完美,可扩展性不够强大。在这一篇中,老K继续为大家完善这个按钮组件。

启动命令窗口, 进入在上篇中我们搭建的vue目录中,输入命令npm run dev启动测试环境,如下图:

查看测试页面,打开谷歌浏览器中的vue调试工具,查看生成的组件是否正确,如下图:
如果出现这个,则证明我们上次编写的组件运行正确。现在,我们可以根据Element-ui的按钮组件样式先把通用的按钮组件样式编写好。如下图:
刷新测试页面,查看效果,如下图:
但是,Element-ui的按钮组件有7种主题样式,由type属性来定义,默认是default。上述我们编写的就是default主题。但是,其他主题样式我们能否也能按照Element-ui的方式来定义呢?答案是肯定的。现在,我们就在上篇的代码基础上来实现这种方式。

为了方便理解,我们可以将上篇编写的<g-button>作为基础组件。其他主题的按钮组件都在此基础上进行扩展。进入custom-global-component/src/components目录,新建extendbutton目录,如下图:
进入extendbutton目录下,新建入口文件index.js、组件文件ExtendButton.vue,如下图:
打开ExtendButton.vue文件,尝试编写一个主题为primary的基础扩展按钮组件,如下图:
扩展组件标签名为“<et-button>”,具有的主题样式class名为“primay”。
进入入口文件index.js,引入extendbut组件模板,生成名为“et-button”的vue组件并输出。如下图:
这样一个基础的扩展按钮组件就完成了。
现在,我们回到src目录下,尝试一下我们新编写的基础扩展按钮组件。打开main.js和App.vue文件,引入并使用这个组件,如下图:
main.js

App.vue

预览效果:
这样,一个primary主题的基础扩展按钮组件就完成了。当然,这样还没有完成。因为,我们并没有通过设置组件的type属性控制按钮的主题。为了实现这种功能,我们可以做一个工厂方法一样的组件复用。此时我们就会用到prop来传递属性。
打开ExtendButton.vue,进一步修改此文件。如下图:
ExtendButton.vue中,添加各种主题样式,如下图:
此时我们就可以在App.vue中这样使用组件了,如下图:
预览效果如下图:
这样跟Element-ui的按钮组件用法基本一样了。当然,使用按钮组件免不了给其绑定事件。直接给自定义组件绑定事件显然是不行的。需要提前给组件添加on对象和出发其自定义的事件。分别进入Button.vue和ExtendButton.vue,进一步修改代码,如下图:
Button.vue

ExtendButton.vue

打开App.vue,定义一个测试函数test,给default主题按钮绑定test,如下图:

点击default主题按钮,测试效果,如下图:
此时在组件中就可以绑定事件了。一个完美的Element-ui风格的自定义按钮组件就完成了。上述代码我已提交到github,欢迎参考!
代码地址:https://github.com/gaofei019/vue2.0-custom-global-component.git

点击查看公众号文章
欢迎关注个人公众号,查看更多好文。1.gif
3c9443f5671a70732ca1e6ee8cdd027439c92725

网友评论

登录后评论
0/500
评论
小丑丁丁
+ 关注