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.
105 lines
2.0 KiB
105 lines
2.0 KiB
<script setup> |
|
import {computed,defineProps} from "vue"; |
|
|
|
/** |
|
* 按钮 |
|
* @description |
|
* |
|
* @property {String} title 显示的文字 |
|
*/ |
|
const emit = defineEmits(['click']); |
|
function clickHandle(event){ |
|
emit('click',event); |
|
} |
|
|
|
const props = defineProps({ |
|
containerPadding:{ |
|
type:[String,Number], |
|
default:'10px' |
|
}, |
|
buttonPadding:{ |
|
type:[String,Number], |
|
default:'10px' |
|
}, |
|
textStyle:{ |
|
type:[Object], |
|
default:'' |
|
}, |
|
justifyAlign:{ |
|
type:String, |
|
default:'center' |
|
}, |
|
verticalAlign:{ |
|
type:String, |
|
default:'center' |
|
}, |
|
border:{ |
|
type:String, |
|
default:'1px solid #999999;' |
|
}, |
|
buttonColor:{ |
|
type:String, |
|
}, |
|
radius:{ |
|
type:[String,Number], |
|
default:'10px' |
|
}, |
|
text:{ |
|
type:String, |
|
default:'确认' |
|
}, |
|
customStyle:{ |
|
type:[String,Object], |
|
default:{} |
|
} |
|
}); |
|
|
|
const containerStyle = computed(() => { |
|
return { |
|
'padding':props.containerPadding, |
|
'justify-content':props.justifyAlign, |
|
'align-items':props.verticalAlign, |
|
} |
|
}); |
|
const buttonStyle = computed(() => { |
|
return { |
|
...uni.$m.addStyle(props.customStyle), |
|
'border':props.border, |
|
'border-radius':props.radius, |
|
'background-color':props.buttonColor, |
|
'padding':props.buttonPadding, |
|
} |
|
}); |
|
</script> |
|
|
|
<template> |
|
<view class="m-button-container" @click="clickHandle" style="display: flex;" :style="containerStyle"> |
|
<view class="button" :style="buttonStyle"> |
|
<view class="m-button-pre"> |
|
<slot name="pre"></slot> |
|
</view> |
|
<view class="m-button-title" :style="textStyle"> |
|
<m-text |
|
:text="text" |
|
:size="textStyle.size" |
|
:color="textStyle.color" |
|
:line-height="textStyle.lineHeight" |
|
:align="textStyle.align || 'center'" |
|
:display="textStyle.display" |
|
></m-text> |
|
</view> |
|
<view class="m-button-pre"> |
|
<slot name="after"></slot> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<style lang="scss"> |
|
.button{ |
|
flex:0 0 1; |
|
width:100%; |
|
|
|
text-align: center; |
|
} |
|
</style>
|
|
|