AddressEditDetail.mjs 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
  2. import { ref, defineComponent } from "vue";
  3. import { createNamespace, numericProp } from "../utils/index.mjs";
  4. import { Cell } from "../cell/index.mjs";
  5. import { Field } from "../field/index.mjs";
  6. const [name, bem] = createNamespace("address-edit-detail");
  7. const t = createNamespace("address-edit")[2];
  8. var stdin_default = defineComponent({
  9. name,
  10. props: {
  11. show: Boolean,
  12. rows: numericProp,
  13. value: String,
  14. rules: Array,
  15. focused: Boolean,
  16. maxlength: numericProp,
  17. searchResult: Array,
  18. showSearchResult: Boolean
  19. },
  20. emits: ["blur", "focus", "input", "select-search"],
  21. setup(props, {
  22. emit
  23. }) {
  24. const field = ref();
  25. const showSearchResult = () => props.focused && props.searchResult && props.showSearchResult;
  26. const onSelect = (express) => {
  27. emit("select-search", express);
  28. emit("input", `${express.address || ""} ${express.name || ""}`.trim());
  29. };
  30. const renderSearchTitle = (express) => {
  31. if (express.name) {
  32. const text = express.name.replace(props.value, `<span class=${bem("keyword")}>${props.value}</span>`);
  33. return _createVNode("div", {
  34. "innerHTML": text
  35. }, null);
  36. }
  37. };
  38. const renderSearchResult = () => {
  39. if (!showSearchResult()) {
  40. return;
  41. }
  42. const {
  43. searchResult
  44. } = props;
  45. return searchResult.map((express) => _createVNode(Cell, {
  46. "clickable": true,
  47. "key": express.name + express.address,
  48. "icon": "location-o",
  49. "label": express.address,
  50. "class": bem("search-item"),
  51. "border": false,
  52. "onClick": () => onSelect(express)
  53. }, {
  54. title: () => renderSearchTitle(express)
  55. }));
  56. };
  57. const onBlur = (event) => emit("blur", event);
  58. const onFocus = (event) => emit("focus", event);
  59. const onInput = (value) => emit("input", value);
  60. return () => {
  61. if (props.show) {
  62. return _createVNode(_Fragment, null, [_createVNode(Field, {
  63. "autosize": true,
  64. "clearable": true,
  65. "ref": field,
  66. "class": bem(),
  67. "rows": props.rows,
  68. "type": "textarea",
  69. "rules": props.rules,
  70. "label": t("addressDetail"),
  71. "border": !showSearchResult(),
  72. "maxlength": props.maxlength,
  73. "modelValue": props.value,
  74. "placeholder": t("addressDetail"),
  75. "onBlur": onBlur,
  76. "onFocus": onFocus,
  77. "onUpdate:modelValue": onInput
  78. }, null), renderSearchResult()]);
  79. }
  80. };
  81. }
  82. });
  83. export {
  84. stdin_default as default
  85. };