plceholder换行

1、     <van-field

        v-model="value"

        ref="textarea"

        rows="3"

        type="textarea"

        autosize

       :placeholder="placeholder"

      />

js:data(){

returen {

placeholder:'第一行 \n第二行 \n‘

}

}

在chorme中正常，Safari不支持

2、自己模拟placeholder

       <div class="search-box" @click="hidePlcaeholder">

      <van-field

        v-model="value"

        ref="textarea"

        rows="3"

        type="textarea"

        autosize

        @input="changeValue"

        @focus="setValue"

        class="search-input"

      />

      <div class="placeholder" v-show="showPlcaeholder">

        <div>第一行</div>

        <div>第三行/div>

        <div>第三行</div>

      </div>

    </div>

js：

export default {

  data() {

    return {

      value: "",

      showPlcaeholder: true,

    }

  },

  methods: {

    setValue() {

    },

    hidePlcaeholder() {

      this.$refs.textarea.focus()

      this.showPlcaeholder = false

    },

    changeValue() {

      this.showPlcaeholder = Boolean(!this.value)

    },

  },

}

css：

.search-box {

  position: relative;

}

.search-input {

  width: 100%;

  background: #ffffff;

  border-radius: 8px;

  border: 1px solid #344d5c;

  margin: 8px auto;

  display: block;

  box-sizing: border-box;

  padding: 12px;

}

.placeholder {

  position: absolute;

  top: 15px;

  left: 15px;

  z-index: 99;

  color: #b4c0c7;

  line-height: 20px;

}