From 747334f06e701b54743d3bdd55484694e5779cbd Mon Sep 17 00:00:00 2001
From: Zhi Cun <island205@gmail.com>
Date: Fri, 23 Aug 2019 11:24:10 +0800
Subject: [PATCH] Divider: Support custom classes (#17078)

---
 packages/divider/src/main.js    | 37 ---------------------------------
 packages/divider/src/main.vue   | 37 +++++++++++++++++++++++++++++++++
 test/unit/specs/divider.spec.js |  9 ++++++++
 3 files changed, 46 insertions(+), 37 deletions(-)
 delete mode 100644 packages/divider/src/main.js
 create mode 100644 packages/divider/src/main.vue

diff --git a/packages/divider/src/main.js b/packages/divider/src/main.js
deleted file mode 100644
index e44181476..000000000
--- a/packages/divider/src/main.js
+++ /dev/null
@@ -1,37 +0,0 @@
-export default {
-  functional: true,
-
-  name: 'ElDivider',
-
-  props: {
-    direction: {
-      type: String,
-      default: 'horizontal',
-      validator(val) {
-        return ['horizontal', 'vertical'].indexOf(val) !== -1;
-      }
-    },
-
-    contentPosition: {
-      type: String,
-      default: 'center',
-      validator(val) {
-        return ['left', 'center', 'right'].indexOf(val) !== -1;
-      }
-    }
-  },
-
-  render(h, context) {
-    const $slots = context.slots();
-    const { direction, contentPosition } = context.props;
-    return (
-      <div class={['el-divider', `el-divider--${direction}`]}>
-        {
-          $slots.default && direction !== 'vertical'
-            ? <div class={['el-divider__text', `is-${contentPosition}`]}>{$slots.default}</div>
-            : null
-        }
-      </div>
-    );
-  }
-};
diff --git a/packages/divider/src/main.vue b/packages/divider/src/main.vue
new file mode 100644
index 000000000..fa712981a
--- /dev/null
+++ b/packages/divider/src/main.vue
@@ -0,0 +1,37 @@
+<template functional>
+  <div
+    v-bind="data.attrs"
+    v-on="listeners"
+    :class="[data.staticClass, 'el-divider', `el-divider--${props.direction}`]"
+  >
+    <div
+      v-if="slots().default && props.direction !== 'vertical'"
+      :class="['el-divider__text', `is-${props.contentPosition}`]"
+     >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ElDivider',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator(val) {
+        return ['horizontal', 'vertical'].indexOf(val) !== -1;
+      }
+    },
+    contentPosition: {
+      type: String,
+      default: 'center',
+      validator(val) {
+        return ['left', 'center', 'right'].indexOf(val) !== -1;
+      }
+    }
+  }
+};
+
+</script>
diff --git a/test/unit/specs/divider.spec.js b/test/unit/specs/divider.spec.js
index 1a0560ab8..cea5dc2b1 100644
--- a/test/unit/specs/divider.spec.js
+++ b/test/unit/specs/divider.spec.js
@@ -25,4 +25,13 @@ describe('Divider', () => {
 
     expect(vm.$el.className).to.include('el-divider--vertical');
   });
+
+  it('apply class to divider', () => {
+    vm = createVue({
+      template: `
+        <el-divider direction="vertical" class="my-divider">我是一条完美分割线！</el-divider>
+      `
+    });
+    expect(vm.$el.className).to.include('my-divider');
+  });
 });