vue 开发一个按钮组件的示例代码
2018-03-27 16:06
846 查看
最近面试,被问到一个题目,vue做一个按钮组件;
当时只是说了一下思路,回来就附上代码。
解决思路:
- 通过父子组件通讯($refs 和 props)
- props接受参数, $refs调用子组件的方法
- 来达到点击提交改变按钮状态,如果不成功则取消按钮状态
在src/components/ 下建一个button.vue
<template> <!-- use plane --> <!-- 传入bgColor改变按钮背景色 --> <!-- state切换button的状态 调用cancel()可以切换 --> <!-- text为按钮文字 --> <div class="container"> <button @click="confirm" :disabled="state" class="confirm" :style="{background: btnData.bgColor}" >{{text}}</button> </div> </template> <script> export default { data(){ return { text: this.btnData.text, state: false, } }, props: { btnData: { types: Array, default() { return { text: '确认', } } } }, methods: { confirm(){ this.text += '...' this.state = true //这里是激活父组件的事件,因为子组件是不会冒泡到父组件上的,必须手动调用$emit //相对应父组件要在调用该组件的时候,将其挂载到上面 this.$emit("confirm") }, cancel(){ this.text = this.btnData.text this.state = false } } } </script> <style lang="less" scoped> .confirm { border: none; color: #fff; width: 100%; padding: 1rem 0; border-radius: 4px; font-size: 1.6rem; background: #5da1fd; &:focus { outline: none; } } </style>
在页面中调用:
<template> <div class="btn-box"> <Btn :btnData="{text: '确认注册'}" <!--这里就要挂载$emit调用的事件 @confirm="想要调用事件的名字"--> @confirm="confirm" ref="btn" ></Btn> </div> </template> <script> import Btn from '@/components/button' export default { components: { Btn }, methods: { confirm(){ if(!this.companyName){ this.$toast("公司名不能为空") this.$refs.btn.cancel() } } } </script>
在这里,要注意一些细节:
1. button组件形成之后和其它div元素的间距,如果是在组件内定死是很难复用的。
2. 在复用的时候,在父组件中是改变不了子组件的样式的,如果要强制更改,单独写一个并去掉scoped。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- VUE开发一个图片轮播的组件示例代码
- 一个简单的Vue.js组件开发示例
- [微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
- 开发Vue树形组件的示例代码
- vue的一个分页组件的示例代码
- [微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
- Vue.js弹出模态框组件开发的示例代码
- Android开发中button按钮的使用及动态添加组件方法示例
- 用ES6的class模仿Vue写一个双向绑定的示例代码
- 代码函数从零开始学习OpenCL开发(二)一个最简单的示例与简单性能分析
- Asp.net 2.0 自定义控件开发[开发一个图表(WebChart)控件(柱状图示例)](示例代码下载)
- Asp.net 2.0 自定义控件开发[开发一个图表(WebChart)控件(柱状图示例)](示例代码下载)
- vue + socket.io实现一个简易聊天室示例代码
- vue2.0使用swiper组件实现轮播的示例代码
- Asp.net 2.0 自定义控件开发[开发一个图表(WebChart)控件(柱状图示例)](示例代码下载)
- Asp.net 2.0 自定义控件开发[开发一个图表(WebChart)控件(柱状图示例)](示例代码下载)
- 写一个开发vue组件的cli
- Vue组件之Tooltip的示例代码
- Asp.net 2.0 自定义控件开发[开发一个图表(WebChart)控件(柱状图示例)](示例代码下载)
- [微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)