feat(expansion-panels): add example

varletjs · Jan 10, 2021 · 8ef77ac · 8ef77ac
1 parent b9dd910
commit 8ef77ac
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 35 deletions.
diff --git a/packages/varlet-cli/site/mobile/components/AppType.vue b/packages/varlet-cli/site/mobile/components/AppType.vue
@@ -14,7 +14,7 @@ export default defineComponent({
 
 <style lang="less">
 .app-type {
-	padding: 20px 0;
+	padding: 12px 0;
 	color: #888;
 	font-size: 14px;
 }

diff --git a/packages/varlet-ui/src/expansion-panel/ExpansionPanel.vue b/packages/varlet-ui/src/expansion-panel/ExpansionPanel.vue
@@ -68,7 +68,6 @@ export default defineComponent({
 		const name: ComputedRef<number | string | undefined> = computed(() => props.name)
 
 		const init = (accordion: boolean) => {
-			Array.prototype.slice()
 			if (!active.value || (accordion && isArray(active.value))) return
 			const isShow = isArray(active.value)
 				? (active.value as Array<number | string | undefined>).includes(props.name)

diff --git a/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue b/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue
@@ -29,13 +29,16 @@ export default defineComponent({
 		const { length } = useAtChildrenCounter(EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY)
 
 		const checkValue = () => {
-			if (!props.modelValue) return false
-			if (!props.accordion && isArray(props.modelValue)) return false
-			return !(props.accordion && isArray(props.modelValue))
+			if (!props.accordion && !isArray(props.modelValue)) {
+				console.warn('[Varlet] ExpansionPanels: type of prop "modelValue" should be Array')
+			}
+			if (props.accordion && isArray(props.modelValue)) {
+				console.warn('[Varlet] ExpansionPanels: type of prop "modelValue" should be String or Number')
+			}
 		}
 
 		const getValue = (value: number | string | undefined, isExpand: boolean) => {
-			if (!checkValue()) console.warn('[Varlet] ExpansionPanels: type of prop "modelValue" should be Array')
+			checkValue()
 			if (isExpand) return props.accordion ? value : [...(props.modelValue as Array<string | number>), value]
 			return props.accordion
 				? undefined
@@ -64,6 +67,7 @@ export default defineComponent({
 			() => length.value,
 			() =>
 				nextTick(() => {
+					checkValue()
 					ExpansionPanelProvider.forEach(({ init }) => init(props.accordion))
 				})
 		)

diff --git a/packages/varlet-ui/src/expansion-panels/example/index.vue b/packages/varlet-ui/src/expansion-panels/example/index.vue
@@ -1,25 +1,52 @@
 <template>
-	<div style="margin-top: 15px">
-		<var-button @click="disabled = !disabled" style="margin: 8px 0"> disable </var-button>
-		<var-expansion-panels v-model="value" @change="changeHandle" :accordion="false" :offset="false">
-			<var-expansion-panel title="Item2121" name="1" :disabled="disabled">
-				<template #icon> fsd</template>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-				magna aliqua.
-			</var-expansion-panel>
-			<var-expansion-panel :disabled="disabled" name="2">
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-				magna aliqua.
-			</var-expansion-panel>
-			<var-expansion-panel name="3" :disabled="disabled">
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-				magna aliqua.
-			</var-expansion-panel>
-			<var-expansion-panel name="4" :disabled="disabled">
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-				magna aliqua.
-			</var-expansion-panel>
-		</var-expansion-panels>
+	<div class="expansion-panels-demo">
+		<div>
+			<app-type>基本使用</app-type>
+			<var-expansion-panels v-model="value" @change="changeHandle">
+				<var-expansion-panel title="Item" name="1">hello world</var-expansion-panel>
+				<var-expansion-panel title="Item" name="2">hello world</var-expansion-panel>
+			</var-expansion-panels>
+		</div>
+
+		<div>
+			<app-type>隐藏边距</app-type>
+			<var-expansion-panels v-model="value" :offset="false">
+				<var-expansion-panel title="Item" name="1">hello world</var-expansion-panel>
+				<var-expansion-panel title="Item" name="2">hello world</var-expansion-panel>
+			</var-expansion-panels>
+		</div>
+
+		<div>
+			<app-type>手风琴模式</app-type>
+			<var-expansion-panels v-model="value1" accordion :offset="false">
+				<var-expansion-panel title="Item" name="1">hello world</var-expansion-panel>
+				<var-expansion-panel title="Item" name="2">hello world</var-expansion-panel>
+			</var-expansion-panels>
+		</div>
+
+		<div>
+			<app-type>禁用</app-type>
+			<var-button @click="disabled = !disabled" style="margin-bottom: 8px">
+				{{ disabled ? '恢复' : '禁用' }}
+			</var-button>
+			<var-expansion-panels v-model="value1" accordion>
+				<var-expansion-panel title="Item" name="1" :disabled="disabled">hello world</var-expansion-panel>
+				<var-expansion-panel title="Item" name="2" :disabled="disabled">hello world</var-expansion-panel>
+			</var-expansion-panels>
+		</div>
+
+		<div>
+			<app-type>自定义标题</app-type>
+			<var-expansion-panels v-model="value1" accordion>
+				<var-expansion-panel title="Expansion panels" name="1" icon="account-circle">hello world</var-expansion-panel>
+				<var-expansion-panel>
+					<template #title>Title Slot</template>
+					<template #icon>Icon Slot</template>
+
+					hello world
+				</var-expansion-panel>
+			</var-expansion-panels>
+		</div>
 	</div>
 </template>
 
@@ -38,14 +65,16 @@ export default defineComponent({
 	},
 	setup() {
 		const disabled = ref(false)
-		const value = ref(['2', '3'])
+		const value = ref(['1'])
+		const value1 = ref('1')
 		const changeHandle = (val: any) => {
 			console.log({ val })
 			console.log(value.value)
 		}
 		return {
 			disabled,
 			value,
+			value1,
 			changeHandle,
 		}
 	},

diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js
@@ -82,13 +82,20 @@ module.exports = {
 				},
 				doc: 'chip',
 			},
-      {
-        text: {
-          zh_CN: 'Badge 徽标',
-          en_US: 'Badge',
-        },
-        doc: 'badge',
-      },
+			{
+				text: {
+					zh_CN: 'Badge 徽标',
+					en_US: 'Badge',
+				},
+				doc: 'badge',
+			},
+			{
+				text: {
+					zh_CN: 'Expansion panels 拓展面板',
+					en_US: 'Expansion panels',
+				},
+				doc: 'Expansion-panels',
+			},
 		],
 		language: 'zh_CN',
 	},