vue.js - 如何更改 v-textarea Vue.js 中的选定文本？

Question

我希望在单击按钮以更改 v 容器中的选定文本时调用一个函数，我该怎么做？我会很高兴任何信息

    <template>
      <div class="text">
          <v-btn
              @click="editText"
          >
          </v-btn>
    
          <v-textarea
              v-model="text"
          ></v-textarea>
      </div>
    </template>
    
    <script>
    export default {
      name: "ArticleForm",
      data() {
        return {
          text: 'some text',
        }
      },
      methods: {
        editText() {
          ... how?
        }
      }
    
    
    }
    </script>
    
    <style scoped>
    </style>

标签： vue.js

Answer 1

您可以window.getSelection用于选定的文本。这是演示

证监会：

<template>
  <v-app>
    <v-content>
      <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore facere
        aspernatur explicabo voluptatibus? Non temporibus, dicta illum
        perferendis error voluptatum. Rerum officiis debitis voluptas earum
        nulla consequatur necessitatibus tenetur eius.
      </div>
      <v-btn class="my-5" @click="editText">Edit</v-btn>

      <v-textarea v-model="text"></v-textarea>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: "",
    };
  },
  methods: {
    editText() {
      if (window.getSelection) this.text = window.getSelection().toString();
    },
  },
};
</script>