uniapp组件的easycom模式,符合规范components/组件名称/组件名称 的目录结构,不用注册,直接在页面上使用
页面中,
<hy-button type="primery">HY-Button</hy-button>
组件中,
<template>
<view :class="['hy-button',type]">
<slot></slot>
</view>
</template><script>
export default {
name:"hy-button",
data() {
return {
};
},
props:{
type:{
type:String,
default:'default'
}
}
}
</script><style lang="scss">
.hy-button{
border: 1px solid #ccc;
padding: 20rpx;
border-radius: 15rpx;
width: 80%;
color: #fff;
text-align: center;
}
.default{
background-color: #71ff19;
}
.primery{
background:#1120ff;
}
</style>