vue.js - Vue-multiselect - 如何在占位符中插入 html 代码？

Question

我尝试在占位符中插入跨度，以更改颜色。但是占位符只返回字符串，如何解决这个问题？

computed: {
      customPlaceholder () {
        let numLength = this.options.length;
        return this.placeholder + "<span>"+numLength+"</span>"
      }
}

Answer 1

您可以使用 css 占位符选择器

input::-webkit-input-placeholder { /* Edge */
  color: green!important;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: green!important;
}

input::placeholder {
  color: green!important;
}

尝试一下，然后尝试删除!important.

但信息缺失。你想动态改变颜色吗？或者你想在同一个占位符中有不同的颜色？

Answer 2

我认为您正在尝试在input字段中添加自定义占位符。

要做到这一点，您需要混合使用css和html。

new Vue({
  el: '#editor',
  data: {
    input: '',
    input2: 'some text'
  },
  computed: {
    placeholderText: function () {
      return `${this.input2} <span>*</span>`
    }
  },
  methods: {
    update: _.debounce(function (e) {
      this.input = e.target.value
    }, 300)
  }
})

#editor div {
  display: inline-block;
}



.input-placeholder {
  position: relative;
}
.input-placeholder input {
  padding: 10px;
  font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
  display: none;
}

.placeholder {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  height: 25px;
  font-size: 25px;
  left: 10px;
  margin: auto;
  color: #ccc;
}

.placeholder span {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>

<div id="editor">
  <div class="input-placeholder">
    <input type="text" @input="update">
    <div class="placeholder" v-if="!input" v-html="placeholderText">
      Email <span>*</span>
    </div>
  </div>
</div>

我为我的解决方案创建了这个jsfiddle。