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.
106 lines
2.0 KiB
106 lines
2.0 KiB
1 year ago
|
<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>
|