Divider: Support custom classes (#17078)

packages/divider/src/main.js

@@ -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>
-    );
-  }
-};

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>

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');
+  });
 });