| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208 |
- import { use } from '../utils';
- import { stopPropagation } from '../utils/event';
- import Key from './Key';
- var _use = use('number-keyboard'),
- sfc = _use[0],
- bem = _use[1],
- t = _use[2];
- var CLOSE_KEY_TYPE = ['blue', 'big'];
- var DELETE_KEY_TYPE = ['delete', 'big', 'gray'];
- export default sfc({
- props: {
- show: Boolean,
- title: String,
- closeButtonText: String,
- deleteButtonText: String,
- safeAreaInsetBottom: Boolean,
- theme: {
- type: String,
- "default": 'default'
- },
- extraKey: {
- type: String,
- "default": ''
- },
- zIndex: {
- type: Number,
- "default": 100
- },
- transition: {
- type: Boolean,
- "default": true
- },
- showDeleteKey: {
- type: Boolean,
- "default": true
- },
- hideOnClickOutside: {
- type: Boolean,
- "default": true
- }
- },
- mounted: function mounted() {
- this.handler(true);
- },
- destroyed: function destroyed() {
- this.handler(false);
- },
- activated: function activated() {
- this.handler(true);
- },
- deactivated: function deactivated() {
- this.handler(false);
- },
- watch: {
- show: function show() {
- if (!this.transition) {
- this.$emit(this.show ? 'show' : 'hide');
- }
- }
- },
- computed: {
- keys: function keys() {
- var keys = [];
- for (var i = 1; i <= 9; i++) {
- keys.push({
- text: i
- });
- }
- switch (this.theme) {
- case 'default':
- keys.push({
- text: this.extraKey,
- type: ['gray']
- }, {
- text: 0
- }, {
- text: this.deleteText,
- type: ['gray', 'delete']
- });
- break;
- case 'custom':
- keys.push({
- text: 0,
- type: ['middle']
- }, {
- text: this.extraKey
- });
- break;
- }
- return keys;
- },
- deleteText: function deleteText() {
- return this.deleteButtonText || t('delete');
- }
- },
- methods: {
- handler: function handler(action) {
- /* istanbul ignore if */
- if (this.$isServer) {
- return;
- }
- if (action !== this.handlerStatus && this.hideOnClickOutside) {
- this.handlerStatus = action;
- document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur);
- }
- },
- onBlur: function onBlur() {
- this.$emit('blur');
- },
- onClose: function onClose() {
- this.$emit('close');
- this.onBlur();
- },
- onAnimationEnd: function onAnimationEnd() {
- this.$emit(this.show ? 'show' : 'hide');
- },
- onPress: function onPress(text) {
- if (text === '') {
- return;
- }
- if (text === this.deleteText) {
- this.$emit('delete');
- } else if (text === this.closeButtonText) {
- this.onClose();
- } else {
- this.$emit('input', text);
- }
- }
- },
- render: function render(h) {
- var title = this.title,
- theme = this.theme,
- onPress = this.onPress,
- closeButtonText = this.closeButtonText;
- var titleLeftSlot = this.slots('title-left');
- var showTitleClose = closeButtonText && theme === 'default';
- var showTitle = title || showTitleClose || titleLeftSlot;
- return h("transition", {
- "attrs": {
- "name": this.transition ? 'van-slide-up' : ''
- }
- }, [h("div", {
- "directives": [{
- name: "show",
- value: this.show
- }],
- "style": {
- zIndex: this.zIndex
- },
- "class": bem([theme, {
- 'safe-area-inset-bottom': this.safeAreaInsetBottom
- }]),
- "on": {
- "touchstart": stopPropagation,
- "animationend": this.onAnimationEnd,
- "webkitAnimationEnd": this.onAnimationEnd
- }
- }, [showTitle && h("div", {
- "class": [bem('title'), 'van-hairline--top']
- }, [titleLeftSlot && h("span", {
- "class": bem('title-left')
- }, [titleLeftSlot]), title && h("span", [title]), showTitleClose && h("span", {
- "class": bem('close'),
- "on": {
- "click": this.onClose
- }
- }, [closeButtonText])]), h("div", {
- "class": bem('body')
- }, [this.keys.map(function (key) {
- return h(Key, {
- "key": key.text,
- "attrs": {
- "text": key.text,
- "type": key.type
- },
- "on": {
- "press": onPress
- }
- });
- })]), theme === 'custom' && h("div", {
- "class": bem('sidebar')
- }, [h(Key, {
- "attrs": {
- "text": this.deleteText,
- "type": DELETE_KEY_TYPE
- },
- "on": {
- "press": onPress
- }
- }), h(Key, {
- "attrs": {
- "text": closeButtonText,
- "type": CLOSE_KEY_TYPE
- },
- "on": {
- "press": onPress
- }
- })])])]);
- }
- });
|