feat: steps, steps-step, steps-bar

wya-team · Sep 22, 2020 · e2ab567 · e2ab567
1 parent 01d612b
commit e2ab567
Show file tree

Hide file tree

Showing 9 changed files with 248 additions and 0 deletions.
diff --git a/src/steps/README.md b/src/steps/README.md
@@ -0,0 +1 @@
+- TODO
diff --git a/src/steps/__test__/steps.test.js b/src/steps/__test__/steps.test.js
@@ -0,0 +1,9 @@
+import { createVue } from '@tests/helper';
+import Comp from '..';
+
+describe('Tpl', () => {
+	it('basic', () => {
+		expect(typeof Comp).to.equal('object');
+		expect(typeof Comp.data()).to.equal('object');
+	});
+});
diff --git a/src/steps/examples/basic.vue b/src/steps/examples/basic.vue
@@ -0,0 +1,44 @@
+<!-- 仅展示最基本的用法 -->
+<template>
+	<div style="padding: 20px">
+		<vc-steps-bar 
+			v-model="current"
+			:data-source="dataSource"
+			@change="handleChange"
+		/>
+	</div>
+</template>
+<script>
+import Steps from '..';
+
+export default {
+	name: "vc-steps-basic",
+	components: {
+		'vc-steps-bar': Steps.Bar,
+	},
+	data() {
+		return {
+			current: "1",
+			dataSource: [
+				{ 
+					step: "1",
+					label: '第1步'
+				},
+				{ 
+					step: "2",
+					label: '第2步'
+				},
+				{ 
+					step: "3",
+					label: '第3步'
+				}
+			]
+		};
+	},
+	methods: {
+		handleChange(e) {
+			console.log(e);
+		}
+	}
+};
+</script>
diff --git a/src/steps/examples/develop.vue b/src/steps/examples/develop.vue
@@ -0,0 +1,41 @@
+<!-- 开发使用的版本，如各种操作改变属性值 -->
+<template>
+	<div style="padding: 20px; display: flex; flex-direction: column-reverse;">
+		<!-- 组件展示 -->
+		<vc-tpl v-bind="attrs" v-on="hooks" />
+		<br>
+		<!-- 控制区域 -->
+		<div>
+			<vc-button>test</vc-button>
+			<br>
+			<br>
+		</div>
+	</div>
+</template>
+<script>
+import Tpl from '..';
+import Button from '../../button';
+
+export default {
+	name: "vc-tpl-basic",
+	components: {
+		'vc-tpl': Tpl,
+		'vc-button': Button
+	},
+	data() {
+		return {
+			attrs: {
+
+			},
+			hooks: {
+
+			}
+		};
+	},
+	computed: {
+
+	},
+	methods: {
+	}
+};
+</script>
diff --git a/src/steps/index.js b/src/steps/index.js
@@ -0,0 +1,7 @@
+import Steps from './steps';
+import Step from './steps-step';
+import Bar from './steps-bar';
+
+Steps.Step = Step;
+Steps.Bar = Bar;
+export default Steps;
diff --git a/src/steps/index.m.js b/src/steps/index.m.js
@@ -0,0 +1 @@
+export { default } from './index';
diff --git a/src/steps/steps-bar.vue b/src/steps/steps-bar.vue
@@ -0,0 +1,123 @@
+<template>
+	<div class="vc-steps-bar">
+		<div
+			v-for="(item, index) in dataSource"
+			:key="item[step]"
+			:class="{ 'is-active': value >= item[step] }"
+			:style="{ 'zIndex': dataSource.length - index }"
+			class="vc-steps-bar__item"
+			@click="handleClick(item)"
+		>
+			{{ item[label] }}
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'vc-steps-bar',
+	model: {
+		prop: 'value',
+		event: 'change'
+	},
+	props: {
+		value: {
+			type: String,
+			default: ''
+		},
+		dataSource: {
+			type: Array,
+			default: () => ([])
+		},
+		dataSourceKey: {
+			type: Object,
+			default: () => ({
+				step: 'step',
+				label: 'label'
+			})
+		},
+		// 是否只读，非只读状态可点击切换
+		readonly: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		step() {
+			return this.dataSourceKey.step;
+		},
+		label() {
+			return this.dataSourceKey.label;
+		}
+	},
+	methods: {
+		/**
+		 * 点击事件委托
+		 */
+		handleClick(item) {
+			if (!this.readonly) {
+				const { step } = this;
+				this.$emit('change', item[step], item);
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+@import '../style/vars.scss';
+
+@include block(vc-steps-bar) {
+	display: flex;
+	align-items: center;
+	@include element(item) {
+		position: relative;
+		height: 56px;
+		line-height: 56px;
+		background-color: #f9f9f9;
+		flex: 1;
+		text-align: center;
+
+		&:not(:first-child) {
+			margin-left: 10px;
+			&::before {
+				content: '';
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				width: 0;
+				height: 0;
+				border-width: 28px 20px 28px 20px;
+				border-color: transparent transparent transparent #fff;
+				border-style: solid;
+			}
+			
+		}
+		&:not(:last-child) {
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				right: -40px;
+				width: 0;
+				height: 0;
+				border-width: 28px 20px 28px 20px;
+				border-color: transparent transparent transparent #f9f9f9;
+				border-style: solid;
+			}
+		}
+		@include when(active) {
+			color: #fff;
+			background-color: #5495f6;
+			&:before {
+				border-left-color: #fff;
+			}
+			&::after {
+				border-left-color: #5495f6;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/steps/steps-step.vue b/src/steps/steps-step.vue
@@ -0,0 +1,11 @@
+<template>
+	<div class="vc-steps-step">
+		<slot />
+	</div>
+</template>
+<script>
+export default {
+	name: "vc-steps-step",
+};
+</script>
+<style></style>
diff --git a/src/steps/steps.vue b/src/steps/steps.vue
@@ -0,0 +1,11 @@
+<template>
+	<div class="vc-steps">
+		<slot />
+	</div>
+</template>
+<script>
+export default {
+	name: "vc-steps",
+};
+</script>
+<style></style>