前言
在前端开发中，我们经常需要用到许多开源的第三方模块，在这些模块中，有一个叫做 blok 的 npm 包，可以帮助我们快速的开发可视化拖拽页面。在本篇文章中，我将详细介绍 blok 的使用方法，以及教你如何用 blok 开发一个简单的页面。
安装 blok
在使用 blok 之前，我们需要先将其安装到项目中。在终端中运行以下命令：
npm install blok --save
这条命令将会将 blok 安装到项目的依赖中。
导入 blok
要使用 blok，我们需要先将其导入到我们的项目中。在需要使用 blok 的页面中，引入 blok：
import * as blok from 'blok';
创建 blok 实例
接下来，我们需要创建一个 blok 实例。在页面中，调用 blok.create()，并传入一个 options 对象：
-- -------------------- ---- -------
------ - -- ---- ---- -------
----- ------- - -
---------- -------------------------------------
----- --
----- -------
-------- ------ -------
------ -
------ ------
-
--
--
----- ------------ - ---------------------这段代码将在 id 为 container 的元素中创建一个实例，并初始化数据。
渲染 blok
渲染 blok 实例非常简单，只需要在页面中调用 blokInstance.render() 即可。
const html = blokInstance.render();
document.getElementById('container').innerHTML = html;以上代码将 blok 渲染成 HTML，并渲染到 id 为 container 的元素中。
基本操作
通过 blok，我们可以非常方便的实现拖拽、移动、缩放等基本操作。按住左键可以拖拽 blok，按住右键可以旋转 blok，用滚轮可以缩放 blok。
实现简单页面
通过上述方法，我们可以非常方便的使用 blok 实现一个简单的页面，以下是一个例子。
-- -------------------- ---- -------
------ - -- ---- ---- -------
----- ------- - -
---------- -------------------------------------
----- --
----- -------
-------- ------ -------
------ -
------ -------
--------- ------
-
-- -
----- --------
---- -------------------------------------
------ -
------ --------
-
--
--
----- ------------ - ---------------------
----- ---- - ----------------------
---------------------------------------------- - -----这段代码将创建一个包含一个文本和一张图片的 blok 实例，并将其渲染到页面中。
总结
本文介绍了 blok 的基本使用方法和实现简单页面的方法，通过 blok，我们可以非常快速、方便的开发可视化拖拽页面，同时，也为我们的前端开发带来了更多的乐趣。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664481e8991b448e256b