添加复制按钮

whychdw

2020-07-18 d33a2e65ce103ecb37120edc45b3682a51788dd1

添加复制按钮

 src/pages/file/index.vue

@@ -99,7 +99,11 @@
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="备份目录">
                                <el-input v-model.number="formFtp.data.backup_path" :disabled="true"></el-input>
                                <el-input v-model.number="formFtp.data.backup_path" 
                                ref="backupPath" :readonly="true">
                                    <i slot="suffix" @click="copyText"
                                    class="el-input__icon el-icon-document-copy"></i>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <!-- 上次备份时间 -->
@@ -458,6 +462,14 @@
        updateParamsClosed() {

        },
        copyText() {
            this.$refs.backupPath.select();     // 选择对象
            document.execCommand("Copy");       // 执行浏览器复制命令
            this.$message({
                type: 'success',
                message: '复制成功',
            });
        },
    }
}
</script>
@@ -495,6 +507,14 @@
    padding: 0.08rem;
    text-align: right;
}

.el-input__icon {
    cursor: pointer;
}
.el-input__icon:hover {
    color: #000000;
}
.el-input__icon:active {
    color: #FF0000;
}
</style>