将%+ - 附加到输入字段视图

时间:2018-03-07 23:44:06

标签: html css vue.js vuejs2 vue-slider-component

我正在使用与输入字段双向绑定的vue组件。

我想在输入字段视图中仅将+ - 和%符号附加到此值。我不想更改实际值,因为这会导致组件出现问题。

以下是我要找的内容:

enter image description here

这就是我所拥有的:

enter image description here

使用此代码:

spark-submit --properties-file spark.conf ...

------------------ UPDATE -------------------

根据以下答案,使用计算属性。

好:

enter image description here

不好

enter image description here

所以我需要双向工作

1 个答案:

答案 0 :(得分:1)

要使另一个值始终形成计算属性:

new Vue({
  el: '#app',
  data: {
    value: {value: 0},
    // ..
  },
  computed: {
    readableValue() {
      return (this.value.value => 0 ? "+" : "-" ) + this.value.value + "%";
    }
  }
})

为滑块创建编辑器并显示格式化

为了得到你想要的东西,我们必须用两个输入做一个小技巧。因为您希望用户在<input type="number">中进行修改,但又想展示+15%中无法显示的<input type="number">(因为+%不是数字)。所以你必须做一些展示/隐藏,如下所示:

new Vue( {
  el: '#app',
  data () {
    return {
    	editing: false,
    	value: {value: 0},
    }
  },
  methods: {
  	enableEditing() {
      this.editing = true;
      Vue.nextTick(() => { setTimeout(() => this.$refs.editor.focus(), 100) });
    },
    disableEditing() {
      this.editing = false;
    }
  },
  computed: {
    readableValue() {
      return (this.value.value > 0 ? "+" : "" ) + this.value.value + "%";
    }
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})
/* styles just for testing */
#app { margin: 10px; }
#app input:nth-child(1) { background-color: yellow }
#app input:nth-child(2) { background-color: green }
<div id="app">
  
  <input :value="readableValue" type="text" v-show="!editing" @focus="enableEditing">
  <input v-model.number="value.value" type="number" ref="editor" v-show="editing" @blur="disableEditing">
  <br><br><br>
  <vue-slider v-model="value.value" min="-20" max="20">></vue-slider>

</div>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
<script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>