当前位置：首页 > VUE

vue实现复制全选

2026-01-18 13:39:08VUE

Vue 实现复制功能

使用 document.execCommand 或 Clipboard API 实现复制功能。以下是两种方法的实现示例：

方法一：使用 document.execCommand（兼容旧浏览器）

<template>
  <div>
    <input ref="copyInput" v-model="textToCopy" />
    <button @click="copyText">复制</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textToCopy: '要复制的文本'
    }
  },
  methods: {
    copyText() {
      const input = this.$refs.copyInput;
      input.select();
      document.execCommand('copy');
      alert('已复制到剪贴板');
    }
  }
}
</script>

方法二：使用 Clipboard API（现代浏览器推荐）

<template>
  <div>
    <button @click="copyText">复制文本</button>
  </div>
</template>

<script>
export default {
  methods: {
    async copyText() {
      try {
        await navigator.clipboard.writeText('要复制的文本');
        alert('已复制到剪贴板');
      } catch (err) {
        console.error('复制失败:', err);
      }
    }
  }
}
</script>

Vue 实现全选功能

全选功能通常用于表格或多选框场景。以下是两种常见实现方式：

方法一：表格行全选

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="selectAll" @change="toggleAll" /></th>
          <th>ID</th>
          <th>名称</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td><input type="checkbox" v-model="selectedItems" :value="item.id" /></td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleAll() {
      this.selectedItems = this.selectAll ? this.items.map(item => item.id) : [];
    }
  }
}
</script>

方法二：文本输入框全选

<template>
  <div>
    <input ref="textInput" v-model="text" />
    <button @click="selectAllText">全选文本</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '全选这段文本'
    }
  },
  methods: {
    selectAllText() {
      this.$refs.textInput.select();
    }
  }
}
</script>