文件导入以及在线编辑-xml案例

 

 

      
        
        
将文件拖到此处，或点击上传
        
      
      
    


 

const { proxy } = getCurrentInstance(); 
/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "地址"
});
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].clearFiles();
  proxy.$alert("
" + response.msg + "
", "导入结果", { dangerouslyUseHTMLString: true });
  getList();
};
/** 提交上传文件 */
function submitFileForm () {
  proxy.$refs["uploadRef"].submit();
};

在线编辑器

参考 http://t.csdn.cn/uSgnf

 

// 代码高亮
npm install brace -S
// 剪贴板
npm install vue-clipboard2 -S
// 编辑器
npm install vkbeautify --save

在components下创建一个文件 叫 editor

然后 在下面创建一个js文件 叫 data_format_utils

data_format_utils.js 参考代码如下 用来格式化

vkBeautify - javascript plugin

// 对json和xml进行格式化
import vkbeautify from 'vkbeautify'

export function string_to_json_wrap(v) {
  try {
    if (is_json(v)) {
      return unicode_to_china(JSON.stringify(string_to_json(v), null, '\t'))
    } else {
      return v
    }
  } catch (e) {
    console.log(e);
  }
  return v
}

export function json_wrap_to_string(v) {
  try {
    if (is_json(v)) {
      return unicode_to_china(JSON.stringify(string_to_json(v)))

    } else {
      return v
    }

  } catch (e) {
    console.log(e);
  }
  return v
}


export function string_to_xml_wrap(v) {
  try {
    return vkbeautify.xml(v);
  } catch (e) {
    return v
  }
}

export function xml_wrap_to_string(v) {
  try {
    return vkbeautify.xmlmin(v);
  } catch (e) {
    return v
  }
}

export function is_json(str) {
  if (typeof str == 'string') {
    try {
      let obj = JSON.parse(str);
      if (typeof obj == 'object' && obj) {
        return true;
      } else {
        return false;
      }

    } catch (e) {
      return false;
    }
  }
}

export function check_string_type(v) {
  try {
    if (v.startsWith("

然后在 editor目录下创建一个组件 我这里叫 index.vue

参考代码如下

然后在main.js全局引入依赖 参考代码如下

import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

// 引入复制
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true

const app = createApp(App);
app.use(VueClipboard)

去使用

      
      
 

import VueDataEditor from "@/components/editor";

let editor = ref()
let code = ref('                                        org.mybatis.generator                mybatis-generator-maven-plugin                1.3.2                                    src/main/resources/generatorConfig.xml                    true                    true                                        ')

/** 在线编辑提交 */
const submitEditForm = () => {
  console.log(editor.value.contentBackup)
  onlineEditOpen.value = false
}