Vue中使用Marked版本比较

最新推荐文章于 2024-03-14 19:39:42 发布

MaoSource

最新推荐文章于 2024-03-14 19:39:42 发布

阅读量474

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

版权来自：maosource.com

本文链接：https://blog.csdn.net/qq_43329216/article/details/126096851

版权

Vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Vue中使用Marked版本比较

安装在这里就不多做介绍了之前的博客里面有，
直接上代码

<el-form-item prop="capInfo" label="数据">
            <br>
            <el-radio v-model="radio" label="1">手动输入</el-radio>
            <el-radio v-model="radio" label="2">文件上传</el-radio>
            <el-input v-show="false" v-model="newValues" :autosize="{minRows: 5}" type="textarea" placeholder="请输入" size="mini"/>
            <monaco
              v-if="containerReload && radio === '1'"
              ref="monacos"
              :opts="opts"
              :is-diff="radio === '2'"
              :height="300"
              :is-modifieds="newValues"
              @change="changeValue"
            />
            <el-upload
              v-show="radio === '2'"
              ref="upload"
              :limit="1"
              :on-exceed="handleExceed"
              :on-change="handelChange"
              :before-remove="removeFile"
              :auto-upload="false"
              action="#"
              accept=".txt"
              class="upload-wrap">
              <el-button slot="trigger" size="small" type="primary">{{ $t('OTAUpload.upload') }}</el-button>

              <div slot="tip" class="el-upload__tip el-dialog--center">{{ $t('OTAUpload.mes') }}</div>
            </el-upload>
          </el-form-item>

我这里使用是一个文件上传和手动输入的方式

data() {
    return {
    	containerReload: true,
    	radio: '1',
    	newValues: '',
	    opts: {
	        value: '',
	        readOnly: false, // 是否可编辑
	        language: 'javascript', // 语言类型
	        theme: 'vs' // 编辑器主题
	      },
    }
    
provide() {
    return {
      reload: this.reload
    }
  },
  
methods: {
async reload() {
      this.containerReload = false
      await this.$nextTick()
      this.containerReload = true
    },
handleExceed() {
      this.$notify({
        message: this.$t('一次只能上传一个文件'),
        type: 'error',
        duration: 2001
      })
    },
}
handelChange(file) {
      // 取出上传文件的对象，在其它地方也可以使用
      this.readFiles(file.raw).then(r => {
        const param = {}
        param.capInfo = r
        param.capInfo = JSON.parse(param.capInfo)
        this.newValues = JSON.stringify(param.capInfo, null, 2)
        this.radio = '1'
      })
      this.file = file.raw
    },
// 文件读取
readFiles(files, arg) {
      return new Promise((resolve, reject) => {
        const file = files
        const reader = new FileReader()
        reader.onload = () => {
          const fc = reader.result
          resolve(fc) // 返回文件文本内容到Promise
          this.reload()
        }
        reader.readAsText(file, 'UTF-8')
      })
    },
// 文件删除
removeFile() {
      this.file = ''
      this.$refs.upload.clearFiles()
    },
// 内容改变自动获取值
    changeValue(val) {
      // console.log('内容改变', val)
      this.newValues= val
    },