warm_man/components/MzButton/index.vue

<template>
	<view class="mz-button-container" :style="{width:buttonWidth}">
		<view class="mz-button-background">
			<view class="mz-button-background-main" :style="{backgroundColor:buttonColor,color:fontColor}">
				<view class="mz-button-content" :style="Object.assign(btnStyle,{
					backgroundImage:(isBackground?'url('+staticImage.buttonBackground+')':''),
					fontSize:fontSize,
					padding:paddingTb+' 0',
					})" >
					{{ title }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { imghost } from '@/config/host.js'
	export default{
		name:'MzButton',
		props:{
			title:{
				type:String,
				default:'确认'
			},
			buttonColor:{
				type:String,
				default:'#FFFFFF'
			},
			fontColor:{
				type:String,
				default:'#131313'
			},
			buttonWidth:{
				type:String,
				default:'100%'
			},
			isBackground:{
				type:Boolean,
				default:true
			},
			fontSize:{
				type:String,
				default:'30rpx',
			},
			paddingTb:{
				type:String,
				default:'15rpx',
			},
			btnStyle:{
				type:Object,
				default:{},
			},
		},
		data() {
			return {
				loading: true,
				buttonBackground:imghost+"/small-button-background.png",
				staticImage:{
					buttonBackground:imghost+'/small-button-background.png'
				}
			}
		},
		onLoad() {
		
		},
		methods: {
		
		}
	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>