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

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

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

好了&＃xff0c;话不多说&＃xff0c;上代码&＃xff1a;

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

export default {

name: &＃39;ImgButton&＃39;,

props: {

type: {

type: String,

default: &＃39;&＃39;

},

name: {

type: String,

default: &＃39;&＃39;

},

tag: {

type: String,

default: &＃39;&＃39;

}

}

}

.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(&＃39;../../assets/images/button/refresh.png&＃39;);

}

.add-img {

background-image: url(&＃39;../../assets/images/button/add.png&＃39;);

}

.delete-img {

background-image: url(&＃39;../../assets/images/button/delete.png&＃39;);

}

.check-img {

background-image: url(&＃39;../../assets/images/button/check.png&＃39;);

}

.close-img {

background-image: url(&＃39;../../assets/images/button/close.png&＃39;);

}

.edit-img {

background-image: url(&＃39;../../assets/images/button/edit.png&＃39;);

}

.gear-img {

background-image: url(&＃39;../../assets/images/button/gear.png&＃39;)

}

.plan-img {

background-image: url(&＃39;../../assets/images/button/plan.png&＃39;)

}

.map-img {

background-image: url(&＃39;../../assets/images/button/map.png&＃39;)

}

.normal-img {

background-image: url(&＃39;../../assets/images/button/normal.png&＃39;)

}

.special-img {

background-image: url(&＃39;../../assets/images/button/special.png&＃39;)

}

.line-img {

background-image: url(&＃39;../../assets/images/button/line_chart.png&＃39;)

}

.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 &＃39;./components/img-button&＃39;

Vue.use(imgButton)

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

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

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