xiaoshi_system/src/views/components/dialog/menuDialog/translate.vue

<template>
  <div>
    <el-dialog title="翻译" v-draggable :visible.sync="visible" width="600px" custom-class="checkFile"
      :before-close="cancel" :modal="false" :close-on-click-modal="false" :modal-append-to-body="false">
      <div class="content">
        <div class="left">
            <div class="title">原文</div>
            <div v-html="content" class="left_content"></div>
        </div>
        <div class="right">
            <div class="title">译文</div>
            <div v-html="contentOut" class="right_content"></div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">关 闭</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {},
  props: {},
  data() {
    return {
        visible:false,
        content:'',
        contentOut:''
    };
  },
  watch: {},
  computed: {
    ...mapGetters([ 'contextMenu']),
  },
  created() {},
  mounted() {},
  methods: {
    open(){
        let mark = this.contextMenu.mark
        var content = mark.id ? mark.markSelectText : mark.text
        if(this.content.trim() != content.trim()){
            this.content = content
            this.contentOut = ''
            this.getTranslateByText()
        }
        this.visible = true
    },
    cancel(){
        this.visible = false
    },
    //翻译
    getTranslateByText(){
        var params = {
            content:this.content
        }
        this.$api.getTranslateByText(params).then(res=>{
            if(res.code == 200){
                this.contentOut = res.data.translationContent
            }
        })
    }
  },
};
</script>
<style lang="scss" scoped>
.content{
    display: flex;
    align-items: stretch;
    height:calc(100vh - 320px);
}
.left,.right{
    width:100%;
    height: 100%;
    
}
.right_content,.left_content{
    padding: 10px;
    height: calc(100% - 40px);
    overflow: auto;
}
.right{
    background: #f8f8fb;
}
.title{
    border-bottom: 1px solid #e8e9f4;
    font-weight: bold;
    padding: 10px 5px;
}
</style>