低代码4之实现json导入导出

低代码4之实现json导入导出

  • 功能
  • 导入与导出
    • 1:editor.jsx 文件 在 buttons添加导出导入按钮
    • 2:useCommand.jsx 文件之中 添加更新updateContainer的命令( 这个命令需要加入消息队列之中,并且从外面commands.updateContainer传递的参数,更新最新的值 ) …args
    • 3: component / Dailog.jsx 实现弹窗组件

src / package / editor.jsx

import {
    computed, defineComponent, inject, ref } from "vue";
import "./editor.scss";
import EditorBlock from "./editor-block";
import deepcopy from "deepcopy";
import {
    useMenuDragger } from "./useMenuDragger";
import {
    useFocus } from "./useFocus";
import {
    useBlockDragger } from "./useBlockDragger";
import {
    useCommand } from "./useCommand";
import {
    $dialog } from "@/components/Dailog";
export default defineComponent({
   
  props: {
   
    modelValue: {
   
      type: Object,
    },
  },
  emits: ["update:modelValue"], // 1:菜单拖拽功能-03:触发事件 更新app的数据 set之中更新
  setup(props, ctx) {
   
    // console.log('props',props.modelValue);
    const data = computed({
   
      get() {
   
        return props.modelValue;
      },
      set(newValue) {
   
        ctx.emit("update:modelValue", deepcopy(newValue));
      },
    });
    const contentStyle = computed(() => ({
   
      width: data.value.container.width + "px",
      height: data.value.container.height + "px",
    }));
    const config = inject("config");

    //  1:菜单拖拽功能-02:实现h5的拖拽放入组件容器形成被拖拽的组件 useMenuDragger实现左侧菜单拖拽功能
    const containerRef = ref(null);
    const {
    dragstart, dragend } = useMenuDragger(containerRef, data);
    // 2:容器内获取焦点功能-01:点击容器时候聚焦与按住shift时候支持多个聚焦;选中后拖拽
    const {
    blockMousedown, containerMousedown, focusData,lastSelectBlock } = useFocus(
      data,
      (e) => {
   
        // 3:获取焦点后 进行拖拽-02
        mousedown(e, focusData);
      }
    );
    // 3:实现组件拖拽-01:
    const {
    mousedown,markLine } = useBlockDragger(focusData,lastSelectBlock,data);

    // 4:每一次操作的记录 撤销与重做功能
    const {
   commands} = useCommand(data)
    const buttons = [
      {
   lable:'撤销',icon:'',handler:()=>commands.undo()},
      {
   lable:'重做',icon:'',handler:()=>commands.redo()},
      {
   lable:'导出',icon:'',handler:()=>{
   
        $dialog({
   
          title:'导出json使用',
          content: JSON.stringify(data.value)
        })
      }},
      {
   lable:'导入',icon:'',handler:()=>{
   
        $dialog({
   
          title:'导入json使用'
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue可以利用第三方库来实现Excel的导入导出,下面是一个简单的示例: 首先,安装`xlsx`和`file-saver`这两个库: ``` npm install xlsx file-saver --save ``` 然后在Vue组件中,定义一个方法来实现Excel导出: ```javascript import XLSX from 'xlsx'; import FileSaver from 'file-saver'; export default { methods: { exportExcel() { // 构建Excel数据 const data = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 20, '女'], ['王五', 22, '男'], ]; // 创建一个Workbook对象 const workbook = XLSX.utils.book_new(); // 创建一个Worksheet对象 const sheet = XLSX.utils.aoa_to_sheet(data); // 添加Worksheet到Workbook XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1'); // 生成Excel文件 const excelFile = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); // 保存Excel文件 const fileName = 'data.xlsx'; const blob = new Blob([excelFile], { type: 'application/octet-stream' }); FileSaver.saveAs(blob, fileName); }, }, }; ``` 以上代码中,我们使用`XLSX`库创建一个Workbook对象,并添加一个Worksheet对象。然后使用`FileSaver`库保存Excel文件。 接下来,我们来实现Excel的导入功能。在Vue组件中,定义一个方法来实现Excel导入: ```javascript import XLSX from 'xlsx'; export default { data() { return { tableData: [], }; }, methods: { importExcel(event) { // 获取上传的文件 const file = event.target.files[0]; // 创建一个FileReader对象 const reader = new FileReader(); // 读取Excel文件 reader.onload = (e) => { // 获取Excel文件数据 const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); // 获取第一个Worksheet const sheet = workbook.Sheets[workbook.SheetNames[0]]; // 将Worksheet转换为JSON数据 const json = XLSX.utils.sheet_to_json(sheet, { header: 1 }); // 将JSON数据转换为表格数据 const tableData = []; for (let i = 1; i < json.length; i++) { const row = {}; for (let j = 0; j < json[0].length; j++) { row[json[0][j]] = json[i][j]; } tableData.push(row); } this.tableData = tableData; }; // 读取文件数据 reader.readAsArrayBuffer(file); }, }, }; ``` 以上代码中,我们使用`XLSX`库读取Excel文件,并将Worksheet转换为JSON数据。然后将JSON数据转换为表格数据,最终存储在Vue组件的`tableData`变量中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值