[improvement] ContactCard: jsx (#2506)

packages/contact-card/index.js

@@ -0,0 +1,46 @@
+import { use } from '../utils';
+import Cell from '../cell';
+
+const [sfc, bem, t] = use('contact-card');
+
+export default sfc({
+  props: {
+    tel: String,
+    name: String,
+    addText: String,
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'add'
+    }
+  },
+
+  methods: {
+    onClick(event) {
+      if (this.editable) {
+        this.$emit('click', event);
+      }
+    }
+  },
+
+  render(h) {
+    const { type } = this;
+    return (
+      <Cell
+        center
+        border={false}
+        class={bem([type])}
+        isLink={this.editable}
+        icon={type === 'edit' ? 'contact' : 'add-square'}
+        onClick={this.onClick}
+      >
+        {type === 'add'
+          ? this.addText || t('addText')
+          : [<div>{`${t('name')}：${this.name}`}</div>, <div>{`${t('tel')}：${this.tel}`}</div>]}
+      </Cell>
+    );
+  }
+});

packages/contact-card/index.vue

@@ -1,46 +0,0 @@
-<template>
-  <cell
-    center
-    :border="false"
-    :class="b([type])"
-    :is-link="editable"
-    :icon="type === 'edit' ? 'contact' : 'add-square'"
-    @click="onClick"
-  >
-    <template v-if="type === 'add'">{{ addText || $t('addText') }}</template>
-    <template v-else>
-      <div>{{ $t('name') }}：{{ name }}</div>
-      <div>{{ $t('tel') }}：{{ tel }}</div>
-    </template>
-  </cell>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'contact-card',
-
-  props: {
-    tel: String,
-    name: String,
-    addText: String,
-    editable: {
-      type: Boolean,
-      default: true
-    },
-    type: {
-      type: String,
-      default: 'add'
-    }
-  },
-
-  methods: {
-    onClick(event) {
-      if (this.editable) {
-        this.$emit('click', event);
-      }
-    }
-  }
-});
-</script>