project init

components/jl-button/main.vue

@@ -0,0 +1,83 @@
+<template>
+	<view :class="className" @click="click">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			loading: {
+				type: Boolean,
+				default: false
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			type: {
+				type: String
+			},
+			inline: {
+				Boolean,
+				default: false,
+			}
+		},
+		methods: {
+			click(e) {
+				if (this.loading || this.disabled) {
+					return;
+				}
+				this.$emit('click', e)
+			}
+		},
+		computed: {
+			className() {
+				let name = "jl-button"
+				if (this.inline) {
+					name += ' inline'
+				}
+				if (this.disabled) {
+					name += ' disabled'
+				}
+				if (this.loading) {
+					name += " loading"
+				}
+				if (this.type) {
+					name += " " + this.type
+				}
+				return name
+			}
+		},
+	};
+</script>
+
+<style>
+	.jl-button {
+		display: inline-block;
+		padding: 15rpx 47rpx;
+		border-radius: 10rpx;
+		text-align: center;
+		font-size: 32rpx;
+		color: #666666;
+		border: 1rpx solid #c8c7cc;
+	}
+
+	.jl-button.inline {
+		display: block;
+		height: 80rpx;
+		line-height: 80rpx;
+		padding:0;
+	}
+
+	.jl-button.primary {
+		color: #fefefe;
+		background-color: #1b66ff;
+		border-color: #1b66ff;
+	}
+
+	.jl-button.loading,
+	.jl-button.disabled {
+		opacity: 0.3;
+	}
+</style>