主页 / 问题 / 976730
Accepted
A K
Asked:2020-05-01 01:00:03 +0800 CST2020-05-01 01:00:03 +0800 CST

特定 css 类的处理程序

  • 772

我有很多表格分散在应用程序周围，其中包含用于输入货币值的字段。为了方便插入来自不同外部系统的数据的用户，逗号被替换为句点，空格被删除 - 当您不需要插入“1 111.11”或“1111.11”时很方便。

这是使用捆绑的 jQuery 在 asp.net 核心应用程序中完成的。

只是在必填字段中添加了一个特殊的 css 类 clean_money：

<div class="form-group">
    <label asp-for="Vm.Amount"></label>
    <input asp-for="Vm.Amount" class="form-control clean_money" />
    <span asp-validation-for="Vm.Amount" class="text-danger"></span>
</div>

处理程序被全局挂起：

// fix money
$(document).ready(function () {
    $(".clean_money").keyup(function () {
        var val = $(this).val();
        if (val === '')
            return;

        val = val.replace(' ', '');
        val = val.replace(',', '.');
        $(this).val(val);
    });
});

现在我正在考虑在 vue.js 上的应用程序中重复类似功能的最佳方式

关于如何使它变得又好又容易的任何想法？我想声明一次清理功能，并以最少的方式指示将其应用于哪些字段。

javascript

1 个回答

  1. Best Answer

    您可能想要使用自定义指令。

    Vue.directive('clean-money', {
  inserted(el) {
    el.addEventListener('keyup', function(e) {
      let val = el.value;
      if (val === '')
        return;
      el.value = val.replace(' ', '').replace(',', '.');
    });
  }
});

new Vue({
  el: '#app'
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="form-group">
    <input v-clean-money class="form-control clean_money" />
  </div>
</div>

    选择使用杂质。指定要使用该方法的那些组件中的杂质。

    const cleanMoneyMixin = {
  methods: {
    cleanMoney(e) {
      const target = e.target;
      let val = target.value;
      if (val === '')
        return;
      target.value = val.replace(' ', '').replace(',', '.');
    }
  }
}

new Vue({
  el: '#app',
  mixins: [cleanMoneyMixin]
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="form-group">
    <input class="form-control clean_money" @keyup="cleanMoney" />
  </div>
</div>

    最后，我们通过在父级本地注册它来使用一个单独的组件。

    const InputComponent = {

  template: '<input class="form-control clean_money" @keyup="cleanMoney" />',

  methods: {
    cleanMoney(e) {
      const target = e.target;
      let val = target.value;
      if (val === '')
        return;
      target.value = val.replace(' ', '').replace(',', '.');
    }
  }
}


new Vue({
  el: '#app',
  components: {
    'input-component': InputComponent
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="form-group">
    <input-component/>
  </div>
</div>

    • 3

相关问题