项目作者: wjs0509

项目描述 :
基于vue+element的金额格式化组件
高级语言: HTML
项目地址: git://github.com/wjs0509/vue-currency-input.git
创建时间: 2018-10-27T08:10:08Z
项目社区:https://github.com/wjs0509/vue-currency-input

开源协议:

下载


vue-currency-input

基于vue+element的金额格式化组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  9. <!-- <script src="./accounting.js"></script> -->
  10. <script src="https://cdn.bootcss.com/accounting.js/0.4.1/accounting.js"></script>
  11. <!-- 引入样式 -->
  12. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  13. <!-- 引入组件库 -->
  14. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  15. </head>
  16. <body>
  17. <div id="app">
  18. <div style="display:inline-block">
  19. <currency-input v-model="price" :decimal="4" style="width:200px;" @blur="inputBlur"></currency-input>
  20. <el-button type="primary" size="small" @click="cc">提交</el-button>
  21. </div>
  22. </div>
  23. </body>
  24. </html>
  1. <script>
  2. Vue.component("currency-input", {
  3. template: '\
  4. <div class="el-input el-input--small">\
  5. <input class="el-input__inner"\
  6. v-bind:value="formatValue"\
  7. ref="input"\
  8. v-on:input="updatevalue($event.target.value)"\
  9. v-on:blur="onBlur"\
  10. v-on:focus="selectAll"/>\
  11. </div>\
  12. ',
  13. props: {
  14. value: {
  15. type: [String, Number],
  16. default: 0,
  17. desc: '数值'
  18. },
  19. symbol: {
  20. type: String,
  21. default: '',
  22. desc: '货币标识符'
  23. },
  24. decimal: {
  25. type: Number,
  26. default: 2,
  27. desc: '小数位'
  28. }
  29. },
  30. data() {
  31. return {
  32. focused: false,
  33. }
  34. },
  35. computed: {
  36. formatValue() {
  37. if (this.focused) {
  38. return accounting.unformat(this.value);
  39. } else {
  40. return accounting.formatMoney(this.value, this.symbol, this.decimal);
  41. }
  42. }
  43. },
  44. methods: {
  45. updatevalue(value) {
  46. var formatvalue = accounting.unformat(value);
  47. this.$emit("input", formatvalue)
  48. },
  49. onBlur() {
  50. this.focused = false;
  51. this.$emit("blur");
  52. this.dispatch("ElFormItem", "el.form.blur", [this.value]);
  53. },
  54. selectAll(event) {
  55. this.focused = true;
  56. setTimeout(() => {
  57. event.target.select()
  58. }, 0)
  59. },
  60. dispatch(componentName, eventName, params) {
  61. var parent = this.$parent || this.$root;
  62. var name = parent.$options.componentName;
  63. while (parent && (!name || name !== componentName)) {
  64. parent = parent.$parent;
  65. if (parent) {
  66. name = parent.$options.componentName;
  67. }
  68. }
  69. if (parent) {
  70. parent.$emit.apply(parent, [eventName].concat(params));
  71. }
  72. }
  73. },
  74. })
  75. new Vue({
  76. el: "#app",
  77. data() {
  78. return {
  79. price: ""
  80. }
  81. },
  82. created() {
  83. setTimeout(() => {
  84. this.price = 1100;
  85. }, 1000);
  86. },
  87. methods: {
  88. cc() {
  89. console.log(this.price)
  90. },
  91. inputBlur() {
  92. console.log("触发了自定义事件");
  93. }
  94. },
  95. })
  96. </script>