平面文件 Vue.js 组件 - @ flatfile/ vuejs

注: 如果您从以前的版本( 0. x) 升级, v3+ 将带来一些更新并打破更改

打破变化:

注意最新版本 @flatfile/vuejs 3+ 使用新软件 @flatfile/sdk 在它下面完全改变与平面文件适配器相互作用的 API 表面 .

有关这些变化的更多信息请访问InfoFinland上的

现在只需要1个投入,即: :token (你必须从你的后端收到).

更多关于在此生成托肯语的内容

以 Flatfile (Vue.js) 开始

我们让你从Flatfile开始 用新的Flatfile组件 这是你需要知道的开始.

首先通过 npm 安装依赖性 :

npm install @flatfile/vuejs@3

这可以让你进入 <flatfile-button /> 以及和我们新的SDK相同的基本功能.

简单地将导入添加到您想要通过 Flatfile vuejs 适配器包含的组件中

import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'DemoComponent',
  components: {
    FlatfileButton,
  },
  // ...
}

现在在你的应用中 仅仅利用这个新的 <flatfile-button> 组件,但要确保通过所需的1个道具,(和/或任何您申请所需的可选道具).

1个所需财产是:

• :token [你需要从后端得到]

读到这里 如何执行安全标志.

<flatfile-button :token="token">
  Upload to Flatfile!
</flatfile-button>

<script>
import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'App',
  components: {
    FlatfileButton,
  },
  data: () => ({
    token: 'Your_Token_You_Received_From_Your_Backend',    
  })
}
</script>

以下是一个将适配器可用的许多其他可选参数/方法传递过来的例子.

<flatfile-button 
  :token="token"
  :onInit="onInit"
  :onUpload="onUpload"
  :onLaunch="onLaunch"
  :onClose="onClose"
  :onComplete="onComplete"
  :onError="onError" 
  class="ff-button"
>
  Upload to Flatfile!
</flatfile-button>

<script>
import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'App',
  components: {
    FlatfileButton,
  },
  data: () => ({
    token: 'Your_Token_You_Received_From_Your_Backend',
  }),
  methods: {
    onInit: function (data) {
      console.log('onInit')
      console.log(data)
    },
    onUpload: function (data) {
      console.log('onUpload')
      console.log('data')
    },
    onLaunch: function (data) {
      console.log('onLaunch')
      console.log('data')
    },
    onClose: function (data) {
      console.log('onClose')
      console.log('data')
    },
    onComplete: function (data) {
      console.log('onComplete')
      console.log('data')
    },
    onError: function (error) {
      console.log('onError')
      console.log(error)
    },
  }
}
</script>

其他选项

也可以通过 mountUrl 财务报告和审定财务报表 apiUrl 页:1 <flatfile-button>。 。 。 .

<flatfile-button 
  :token="token"
  :mountUrl="mountUrl"
  :apiUrl="apiUrl"
>
  Upload to Flatfile!
</flatfile-button>

<script>
import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'App',
  components: {
    FlatfileButton,
  },
  data: () => ({
    token: 'Your_Token_You_Received_From_Your_Backend',
    mountUrl: 'mountUrl',
    apiUrl: '',
  }),
  // ... everything else
}
</script>

出版

更新更改日志(如果需要),更新软件包.json版本(semver),添加README所需的任何更新(如果需要),然后运行以下脚本:

npm run build:lib
npm publish