php vue插件 hplus-ui初学

文档链接 : https://www.yuque.com/hyperf-plus/ui/hplus-ui
今天接触了下hyperf_admin框架，他的前端页面是用hplus-ui包做的，感觉很神奇，所以试着用了一下，总结一些东西，免得以后忘了怎么用。
安装就略过了，按文档走就行了
首先是怎么用，用法的话先new content。然后使用各种组件建构页面，再把构建好的组件放到$content->body里面去。最后return $content就行了~，很简单是不是，接下来上一些实验代码。

$content = new Content();$steps = Steps::make()->simple(false)->active(1)->processStatus("process")->alignCenter(true)->stepList(function (Collection $list)  {//下单$xd = Step::make()->title("下单");$xd->description("下单");$list->push($xd);//付款$fk = Step::make()->title("付款");$fk->description("付款");$list->push($fk);//发货$fh = Step::make()->title("发货");$fh->description("发货");$list->push($fh);//收货$sh = Step::make()->title("收货");$sh->description("收货");$list->push($sh);//完成$wc = Step::make()->title("完成");$wc->description("完成");$list->push($wc);});$content->body($steps);return $content;

比如说一个流程卡

然后是加属性，使用style方法，以数组形式将数据传入

  $content = new Content();$steps = Steps::make()->style(['margin-top' => '50px'])

这样css就可以生效了，其中还有各种组件，比如表单，表格等。上一份表格的代码

    public function tryui(){$grid = new Grid(new AdminTest());
//设置字段$grid->column('order', '排序')->width(80);$grid->column('id', 'id')->width(80);$grid->column('test', 'test')->width(80);$grid->column('test1', 'test1')->width(80);$grid->column('test2', 'test2')->width(80);$grid->dataUrl("/index/tryui");
//toolbar设置$grid->toolbars(function (Grid\Toolbars $toolbars) {$toolbars->createButton()->content("添加商品");});
//action设置$grid->actions(function (Grid\Actions $actions) {$actions->hideEditAction();});return $grid;}

效果是这样的

感觉还不错，不过删除和添加商品功能还需要自己实现。我还得继续研究。

php vue插件 hplus-ui初学相关推荐

vue项目，引入插件element ui 样式不生效
用vue ui 命令引入插件 element ui 样式不生效步骤一:执行如下命令,安装babel-plugin-component npm install babel-plugin-compon ...
vue 相关的 UI 库和插件
本文整理一些自己使用过的 UI 库和插件一.vue 相关的 UI 库 1.element ui 自己比较常用的 ui 库,后台系统还有 vue-element-admin,后台效果请看 https ...
如何使用Vue集成其它UI组件？如何阅读UI官网？移动端组件Vant实例教程（熬夜干货）
如何使用Vue集成其它UI组件前言一.Vant是什么? 二.基础环境准备 1.1 了解是根本 1.2 安装 1.3 引入组件 3.1 步骤一 3.2 步骤二 3.3 步骤三二.事件绑定 2.1 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
实用的vue插件大汇总
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...
史上最全的vue插件库
无意间发现的一个整合内容,超级强大,赶紧记录下来!原文链接内容 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2 ...
包含Demo示例，包含实列，vue插件汇总，vue组件大全，
目录一.UI组件及框架二.滚动scroll组件三.slider组件四.编辑器五.图表六.日历七.地址选择八.地图九.播放器十.文件上传十一.图片处理十二.提示十三.进度条十 ...
vue插件大全汇总赶紧收藏下留着以后看！
原文地址:http://tangjiusheng.com/vue/155.html Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据 ...
vue3使用的移动端UI框架,vue移动端ui框架哪个好
号称目前最火的前端框架Vue,它有什么显著特点呢? 1.Vue是什么是目前最火的一个前端框架,除了可以开发网站,还可以开发手机App.是前端的主流框架之一,和.一起,并成为前端三大主流框架. 是一套构 ...
vue框架是ui框架么_Vue是2020年一个了不起的框架，为什么
vue框架是ui框架么 An amazing conference regarding the Vue framework was held in the US in the first week o ...

php vue插件 hplus-ui初学

php vue插件 hplus-ui初学相关推荐

最新文章

热门文章