Skip to content

Commit 6269d75

Browse files
authored
Update README.MD
1 parent 3758b32 commit 6269d75

File tree

1 file changed

+1
-40
lines changed

1 file changed

+1
-40
lines changed

README.MD

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -23,37 +23,6 @@ Vue-Layout
2323
上图的后台布局例子,你可以进入这个页面访问其布局:https://jaweii.github.io/Vue-Layout/dist/#/share/5993d3b05c497d0057c6f2da
2424
也可以进入这个页面体验其布局效果:https://jaweii.github.io/Vue-Layout/dist/#/preview/pc/5993d3b05c497d0057c6f2da
2525

26-
如何拓展UI可视化组件?
27-
==
28-
29-
1. 如果是新增的UI,先在main.js中引入,然后在`./src/components/template`路径下,创建对应的UI的文件夹(如果没有);
30-
2. copy已有的类似组件。假设你要拓展mint-ui的导航栏组件,你可以直接复制muse-ui的导航栏(`./src/components/template/Muse-UI/App Bar.js`)到Mint-UI目录中,修改文件名为Header.js、以及修改其中的部分代码即可:
31-
![此处输入图片的描述][4]
32-
33-
主要就是修改红框部分的内容,attributes和slots参照UI文档的API,template改成对应组件的标签名,当然每个UI、每个组件都不同,有的只需要稍作修改,有的则需要改很多。
34-
每次属性视图上触发的属性更新,都会让handle函数执行一遍,并传入新的属性、嵌套以及组件的信息,然后返回拼凑的新模板,重新挂载到预览视图。**属性可视化编辑的功能就是这么实现的。**
35-
36-
3. Header.js完成后,在`./src/components/template/Mint-UI/index.js`中引入,
37-
![此处输入图片的描述][5]
38-
图中的键名的写法,是因为有的键名包含空格,比如"App Bar"。为了直观和便于维护,命名都是与UI官方文档相同。
39-
40-
4. 再将添加的Header组件添加到组件列表视图即可。
41-
42-
>
43-
<li draggable="true" @dragstart="dragStart" data-name="Header">
44-
<mt-header fixed title="Header"></mt-header>
45-
</li>
46-
47-
48-
li标签包裹的元素,就是显示在组件列表视图的元素,其中li的data-name的值必须与上一步骤中保存的键名相同。
49-
50-
5. 对于新增的UI,最后在`./src/components/template/index.js`中,添加类似下图这样的方法就可以了:
51-
![此处输入图片的描述][6]
52-
53-
54-
到此,一个mint-ui导航栏组件的可视化就拓展完成了。
55-
56-
完结,撒花。
5726

5827
源码结构
5928
====
@@ -113,19 +82,11 @@ li标签包裹的元素,就是显示在组件列表视图的元素,其中li
11382

11483

11584

116-
最后
117-
--
118-
119-
项目没有使用eslint,使用的格式化插件:https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
120-
(默认配置,仅在配置项的格式化文件类型中增加了.vue格式)。
121-
122-
欢迎道友们一起来让Vue-Layout支持跟多UI~
123-
12485
[1]: https://raw.githubusercontent.com/jaweii/Vue-Layout/master/static/banner.JPG
12586
[2]: https://raw.githubusercontent.com/jaweii/Vue-Layout/master/static/demo1.gif
12687
[3]: https://raw.githubusercontent.com/jaweii/Vue-Layout/master/static/demo2.gif
12788

12889
[4]: https://raw.githubusercontent.com/jaweii/Vue-Layout/master/docs/images/App%20Bar1.png
12990
[5]: https://raw.githubusercontent.com/jaweii/Vue-Layout/master/docs/images/Header%201.png
13091
[6]: https://raw.githubusercontent.com/jaweii/Vue-Layout/master/docs/images/getTemplte.png
131-
92+

0 commit comments

Comments
 (0)