You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
Sports/components/fui-label/fui-label.vue

71 lines
1.5 KiB

<template>
<view class="fui-label__box" :class="{'fui-label__full':full,'fui-label__inline':inline}"
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,marginTop:margin[0] || 0,marginRight:margin[1] || 0,marginBottom:margin[2] || margin[0] || 0,marginLeft:margin[3] || margin[1] || 0}"
@tap.stop="onClick">
<slot></slot>
</view>
</template>
<script>
//该组件主要用于fui-radio,fui-checkbox,fui-switch组件外层,类似label功能
export default {
name: "fui-label",
props: {
//padding值:['20rpx','32rpx']->[上,右,下,左]
padding: {
type: Array,
default () {
return []
}
},
//margin值:[上,右,下,左]
margin: {
type: Array,
default () {
return []
}
},
full: {
type: Boolean,
default: false
},
inline: {
type: Boolean,
default: false
}
},
created() {
this.childrens = [];
},
methods: {
onClick() {
if (this.childrens && this.childrens.length > 0) {
for (let child of this.childrens) {
child.labelClick()
}
}
}
}
}
</script>
<style scoped>
.fui-label__box {
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
}
.fui-label__full {
flex: 1;
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
}
.fui-label__inline {
/* #ifndef APP-NVUE */
display: inline-block;
/* #endif */
}
</style>