php自定义按钮,vue实现自定义按钮的方法介绍(附代码)

本篇文章给大家带来的内容是关于vue实现自定义按钮的方法介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在实际开发项目中,有时我们会用到自定义按钮;因为一个项目中,众多的页面,为了统一风格,我们会重复用到很多相同或相似的按钮,这时候,自定义按钮组件就派上了大用场,我们把定义好的按钮组件导出,在全局引用,就可以在其他组件随意使用啦,这样可以大幅度的提高我们的工作效率。

好了,话不多说,上代码:

img-button.vue//这是我们自定义按钮组件

{{name}}
{{name}}
{{name}}

export default {

name: 'ImgButton',

props: {

type: {

type: String,

default: ''

},

name: {

type: String,

default: ''

},

tag: {

type: String,

default: ''

}

}

}

.img-button {

vertical-align: middle;

display: inline-block;

cursor: pointer;

margin-right: 10px;

.img-btn {

.img-no-repeat;

width:25px;

height:25px;

}

.img-btn:hover {

transform: scale(1.1);

}

.refresh-img {

background-image: url('../../assets/images/button/refresh.png');

}

.add-img {

background-image: url('../../assets/images/button/add.png');

}

.delete-img {

background-image: url('../../assets/images/button/delete.png');

}

.check-img {

background-image: url('../../assets/images/button/check.png');

}

.close-img {

background-image: url('../../assets/images/button/close.png');

}

.edit-img {

background-image: url('../../assets/images/button/edit.png');

}

.gear-img {

background-image: url('../../assets/images/button/gear.png')

}

.plan-img {

background-image: url('../../assets/images/button/plan.png')

}

.map-img {

background-image: url('../../assets/images/button/map.png')

}

.normal-img {

background-image: url('../../assets/images/button/normal.png')

}

.special-img {

background-image: url('../../assets/images/button/special.png')

}

.line-img {

background-image: url('../../assets/images/button/line_chart.png')

}

.ibtn {

width: auto;

min-width: 100px;

padding: 0 20px;

font-size: 17px;

height: 30px;

line-height: 30px;

text-align: center;

border-radius:15px;

background-color: #2f5d98;

vertical-align: middle;

color:#00cccc;

}

.ibtn-samll {

.ibtn;

height: 25px;

padding: 0 2px;

font-size: 10px;

line-height: 25px;

border-radius: 0px;

background-color: transparent;

border: 1px solid #00cccc;

}

.ibtn-samll:hover {

color: white;

border: 1px solid white;

}

.normal-btn {

.ibtn;

}

.normal-btn:hover {

color: white;

background-color: #ff9247;

}

}

在router.js中配置好路由

在main.js中引入//注册自定义按钮

import imgButton from './components/img-button'

Vue.use(imgButton)

然后就可以在其他组件使用了

//值得注意的是 自定义按钮组件添加点击事件的时候一定要加.native 因为.native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript视频教程栏目!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值