使用vue开发实现XixunPlayer的功能.

XixunPlayer 实现保存html代码

<template>
  <div class="saveHtml">
    <el-button class="mb20 ml20" type="primary" @click="getshow" size="mini">保存html</el-button>
    <el-dialog
      title="保存html"
      :visible.sync="dialogVisible"
      append-to-body
      width="90%">
      <div class="list">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="文件名">
            <el-input v-model="form.fileName">
              <template slot="append">.html</template>
            </el-input>
          </el-form-item>
          <el-form-item label="网页内容">
            <el-input type="textarea" v-model="form.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveHtml">保存Html</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getdata } from '@/api/led/led'
import qs from 'qs'
import axios from 'axios'
import { randomString } from '@/utils/utils'

export default {
  name: 'saveStringFile',
  components: {},
  props: {
    id: {
      type: String | Number,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      form: {
        fileName: '',
        content: ''
      }
    }
  },
  watch: {
    dialogVisible () {
      if (this.dialogVisible) {
        this.form.fileName = randomString(10)
      }
    }
  },
  methods: {
    saveFilePath () {
      var that = this
      var data = qs.stringify({
        name: this.form.fileName + '.html',
        cardcode: this.id
      })
      axios({
        method: 'POST',
        url: 'http://27.128.168.5:66/WebService.asmx/addProgram',
        data: data,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(function (res) {
        if (res.data == '新增节目成功') {
          that.$message({
            message: res.data,
            type: 'success'
          })
          that.dialogVisible = false
          that.$emit('getdata', 0)
        } else {
          that.$message.error(res.data)
        }
      })
    },
    // 上传文件
    saveHtml () {
      var that = this
      getdata(that.id,
        {
          type: 'saveStringFile',
          fileName: that.form.fileName + '.html',
          content: that.form.content
        }
      ).then(function (res) {
        if (res.timestamp) {
          that.saveFilePath()
          that.dialogVisible = false
          that.$emit('getdata', 0)
        }
      })
    },
    getshow () {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.saveHtml {
  display: inline-block;
}
</style>
<style>
input[type="file"] {
  display: none !important;
}
</style>