Nativescript-vue 获取有焦点的 TextField

Question

我在 Nativescript-vue 应用程序中有 2 个 TextField。

<StackLayout col="0" row="1">
  <Label text="Unit Price Excl"></Label>
  <TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing" keyboardType="number" hint="Unit Price Excl"></TextField>
</StackLayout>
<StackLayout col="1" row="1">
  <Label text="Unit Price Incl"></Label>
  <TextField v-model="newItem.unitPriceIncl" @textChange="calcPricing" keyboardType="number" hint="Unit Price Incl"></TextField>
</StackLayout>

从上面可以看出，每当 2 个文本框中的任何一个的文本更改时，我都会调用相同的方法。

...
methods: {
  calcPricing(args) {
    // get focus here
  }
}
...

我想要的是，在 calcPricing 方法中，确定 2 个文本框中的哪个当前具有焦点。

Answer 1

这是您尝试执行的操作的可能实现方式

<TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing" keyboardType="number" @focus="focus" @blur="blur" hint="Unit Price Excl"></TextField>
<TextField v-model="newItem.unitPriceIncl" @textChange="calcPricing" keyboardType="number" @focus="focus" @blur="blur" hint="Unit Price Incl"></TextField>
...
data: () => ({ focusedElement: null })
methods: {
  focus({ object }) {
    this.focusedElement = object;
  },

  // You don't have to handle blur depending on your logic, but I find it more consistent
  blur({ object }) {
    if (this.focusedElement !== object) return;
    this.focusedElement = null;
  }
}
...

如果你不是真的想知道哪个元素有焦点，而是想知道修改来自哪个元素。你可以这样做:

<TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing('unitPriceExl')" keyboardType="number" hint="Unit Price Excl"></TextField>
...
methods: {
  calcPricing(name) {
    return (args) => {
      // Your logic goes here, you have access to name, and to args
    }
  }
}
...

旁注：您还可以使用一些本机方法来查找当前聚焦的视图。但是请注意，它并不快，也不推荐这样做，主要思想是使用 NS common api.

<TextField v-model="newItem.unitPriceExcl" @textChange="calcPricing" keyboardType="number" hint="Unit Price Excl" ref="unitPriceExcl"></TextField>
...
let UIResponder;
if (isIOS) {
  UIResponder = (UIResponder as any).extend({
      currentFirstResponder() {
         this.currentFirstResponder = null;
         UIApplication.sharedApplication.sendActionToFromForEvent('findFirstResponder', null, null, null);
         return this.currentFirstResponder;
      },
      findFirstResponder(application: UIApplication) {
        this.currentFirstResponder = new WeakRef(self)
      }
    }, {
      exposedMethods: {
        currentFirstResponder: { returns: UIView, params: [ ] }
      }
    })
}
...
methods: {
  getFocusedView() {
    if (isAndroid) {
      const activity = application.android.foregroundActivity;
      if (activity) {
        return activity.getCurrentFocus()
      }
    } else if (isIOS) {
      return UIResponder.currentFirstResponder;
    }

    return null;
  },

  isFocused(object) {
    if (object.nativeView && object.nativeView.nativeView) return false;
    return this.getFocusedView() === object.nativeView.nativeView;
  },

  calcPricing(args) {
    if (this.isFocused(this.$refs.unitPriceExcl)) {
        console.log('unitPriceExcl is selected');
    }
  },
}
...

Nativescript-vue 获取有焦点的 TextField

Nativescript-vue get TextField that has focus

nativescript

nativescript-vue