index.tsx 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import { use } from '../utils';
  2. import { emit, inherit } from '../utils/functional';
  3. import Cell from '../cell';
  4. // Types
  5. import { CreateElement, RenderContext } from 'vue/types';
  6. import { DefaultSlots } from '../utils/use/sfc';
  7. const [sfc, bem, t] = use('contact-card');
  8. export type ContactCardProps = {
  9. tel?: string;
  10. name?: string;
  11. type?: string;
  12. addText: string;
  13. editable: boolean;
  14. };
  15. function ContactCard(
  16. h: CreateElement,
  17. props: ContactCardProps,
  18. slots: DefaultSlots,
  19. ctx: RenderContext<ContactCardProps>
  20. ) {
  21. const { type, editable } = props;
  22. return (
  23. <Cell
  24. center
  25. border={false}
  26. isLink={editable}
  27. class={bem([type])}
  28. valueClass={bem('value')}
  29. icon={type === 'edit' ? 'contact' : 'add-square'}
  30. onClick={(event: Event) => {
  31. if (editable) {
  32. emit(ctx, 'click', event);
  33. }
  34. }}
  35. {...inherit(ctx)}
  36. >
  37. {type === 'add'
  38. ? props.addText || t('addText')
  39. : [
  40. <div>{`${t('name')}:${props.name}`}</div>,
  41. <div>{`${t('tel')}:${props.tel}`}</div>
  42. ]}
  43. </Cell>
  44. );
  45. }
  46. ContactCard.props = {
  47. tel: String,
  48. name: String,
  49. addText: String,
  50. editable: {
  51. type: Boolean,
  52. default: true
  53. },
  54. type: {
  55. type: String,
  56. default: 'add'
  57. }
  58. };
  59. export default sfc<ContactCardProps>(ContactCard);