fabric.js vue
Vue-Fabric-wrapper (vue-fabric-wrapper)
Vue Fabric.js Wrapper.
Vue Fabric.js包装器。
Installation️安装 (⚙️ Installation)
$ npm install vue-fabric-wrapper
📄文件 (📄 Documents)
Coming Soon!
快来了!
🚀如何在Vue中使用 (🚀 How to use in Vue)
<template>
<div id="app">
<fabric-canvas>
<fabric-circle :id="3"></fabric-circle>
</fabric-canvas>
</div>
</template>
<script>
import vueFabricWrapper from "vue-fabric-wrapper";
export default {
name: "App",
components: {
FabricCanvas: vueFabricWrapper.FabricCanvas,
FabricCircle: vueFabricWrapper.FabricCircle
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Nu如何在Nuxt中使用 (🚀 How to use in Nuxt)
Create Plugin with the following example code
使用以下示例代码创建插件
import Vue from 'vue';
import vueFabricWrapper from 'vue-fabric-wrapper';
Vue.component("FabricCanvas", vueFabricWrapper.FabricCanvas)
Vue.component("FabricCircle", vueFabricWrapper.FabricCircle)
Add this to nuxt.config and use mode client
将此添加到nuxt.config并使用模式客户端
module.exports = {
plugins: [
{ src: "@/plugins/fabric.js", mode: "client" }
]
}
Finally use client-only to render only on the client side
最后使用仅客户端呈现仅在客户端
<template>
<client-only>
<fabric-canvas>
<fabric-circle :id="2"></fabric-circle>
</fabric-canvas>
</client-only>
</template>
<script>
export default {
};
</script>
<style>
</style>
fabric.js vue