index.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. import { use } from '../utils';
  2. import { stopPropagation } from '../utils/event';
  3. import Key from './Key';
  4. var _use = use('number-keyboard'),
  5. sfc = _use[0],
  6. bem = _use[1],
  7. t = _use[2];
  8. var CLOSE_KEY_TYPE = ['blue', 'big'];
  9. var DELETE_KEY_TYPE = ['delete', 'big', 'gray'];
  10. export default sfc({
  11. props: {
  12. show: Boolean,
  13. title: String,
  14. closeButtonText: String,
  15. deleteButtonText: String,
  16. safeAreaInsetBottom: Boolean,
  17. theme: {
  18. type: String,
  19. "default": 'default'
  20. },
  21. extraKey: {
  22. type: String,
  23. "default": ''
  24. },
  25. zIndex: {
  26. type: Number,
  27. "default": 100
  28. },
  29. transition: {
  30. type: Boolean,
  31. "default": true
  32. },
  33. showDeleteKey: {
  34. type: Boolean,
  35. "default": true
  36. },
  37. hideOnClickOutside: {
  38. type: Boolean,
  39. "default": true
  40. }
  41. },
  42. mounted: function mounted() {
  43. this.handler(true);
  44. },
  45. destroyed: function destroyed() {
  46. this.handler(false);
  47. },
  48. activated: function activated() {
  49. this.handler(true);
  50. },
  51. deactivated: function deactivated() {
  52. this.handler(false);
  53. },
  54. watch: {
  55. show: function show() {
  56. if (!this.transition) {
  57. this.$emit(this.show ? 'show' : 'hide');
  58. }
  59. }
  60. },
  61. computed: {
  62. keys: function keys() {
  63. var keys = [];
  64. for (var i = 1; i <= 9; i++) {
  65. keys.push({
  66. text: i
  67. });
  68. }
  69. switch (this.theme) {
  70. case 'default':
  71. keys.push({
  72. text: this.extraKey,
  73. type: ['gray']
  74. }, {
  75. text: 0
  76. }, {
  77. text: this.deleteText,
  78. type: ['gray', 'delete']
  79. });
  80. break;
  81. case 'custom':
  82. keys.push({
  83. text: 0,
  84. type: ['middle']
  85. }, {
  86. text: this.extraKey
  87. });
  88. break;
  89. }
  90. return keys;
  91. },
  92. deleteText: function deleteText() {
  93. return this.deleteButtonText || t('delete');
  94. }
  95. },
  96. methods: {
  97. handler: function handler(action) {
  98. /* istanbul ignore if */
  99. if (this.$isServer) {
  100. return;
  101. }
  102. if (action !== this.handlerStatus && this.hideOnClickOutside) {
  103. this.handlerStatus = action;
  104. document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur);
  105. }
  106. },
  107. onBlur: function onBlur() {
  108. this.$emit('blur');
  109. },
  110. onClose: function onClose() {
  111. this.$emit('close');
  112. this.onBlur();
  113. },
  114. onAnimationEnd: function onAnimationEnd() {
  115. this.$emit(this.show ? 'show' : 'hide');
  116. },
  117. onPress: function onPress(text) {
  118. if (text === '') {
  119. return;
  120. }
  121. if (text === this.deleteText) {
  122. this.$emit('delete');
  123. } else if (text === this.closeButtonText) {
  124. this.onClose();
  125. } else {
  126. this.$emit('input', text);
  127. }
  128. }
  129. },
  130. render: function render(h) {
  131. var title = this.title,
  132. theme = this.theme,
  133. onPress = this.onPress,
  134. closeButtonText = this.closeButtonText;
  135. var titleLeftSlot = this.slots('title-left');
  136. var showTitleClose = closeButtonText && theme === 'default';
  137. var showTitle = title || showTitleClose || titleLeftSlot;
  138. return h("transition", {
  139. "attrs": {
  140. "name": this.transition ? 'van-slide-up' : ''
  141. }
  142. }, [h("div", {
  143. "directives": [{
  144. name: "show",
  145. value: this.show
  146. }],
  147. "style": {
  148. zIndex: this.zIndex
  149. },
  150. "class": bem([theme, {
  151. 'safe-area-inset-bottom': this.safeAreaInsetBottom
  152. }]),
  153. "on": {
  154. "touchstart": stopPropagation,
  155. "animationend": this.onAnimationEnd,
  156. "webkitAnimationEnd": this.onAnimationEnd
  157. }
  158. }, [showTitle && h("div", {
  159. "class": [bem('title'), 'van-hairline--top']
  160. }, [titleLeftSlot && h("span", {
  161. "class": bem('title-left')
  162. }, [titleLeftSlot]), title && h("span", [title]), showTitleClose && h("span", {
  163. "class": bem('close'),
  164. "on": {
  165. "click": this.onClose
  166. }
  167. }, [closeButtonText])]), h("div", {
  168. "class": bem('body')
  169. }, [this.keys.map(function (key) {
  170. return h(Key, {
  171. "key": key.text,
  172. "attrs": {
  173. "text": key.text,
  174. "type": key.type
  175. },
  176. "on": {
  177. "press": onPress
  178. }
  179. });
  180. })]), theme === 'custom' && h("div", {
  181. "class": bem('sidebar')
  182. }, [h(Key, {
  183. "attrs": {
  184. "text": this.deleteText,
  185. "type": DELETE_KEY_TYPE
  186. },
  187. "on": {
  188. "press": onPress
  189. }
  190. }), h(Key, {
  191. "attrs": {
  192. "text": closeButtonText,
  193. "type": CLOSE_KEY_TYPE
  194. },
  195. "on": {
  196. "press": onPress
  197. }
  198. })])])]);
  199. }
  200. });