基于vue+ant-design+vue-draggable实现的可视化页面装修功能,基于业务需求和层出不穷的活动营销页面而诞生。 类似的还有:有赞、百度H5、京东等等, 后续会通过page-design-ssr服务来生成静态页面,这样就可以支持SSR需求拉 点我点我,查看演示DEMO 操作指引:
magic-page-designer是一个基于 vue 的在线页面快速开发平台,主要把所有的vue代码都改为在线配置,最终获得一个json格式的页面,你可以把它存放到服务器的任何地方:数据库、静态文件、redis 等。最方便的是可以在线修改页面,再也不用担心生产出问题了,还得打开IDE,修改测试打包,直接在线编码,所见即所得。还可以配合ma...
yarn add vue-page-designer You can start it quickly, in main.js: importVuefrom'vue';importvuePageDesignerfrom'vue-page-designer'import'vue-page-designer/dist/vue-page-designer.css'importAppfrom'./App.vue';Vue.use(vuePageDesigner);newVue({el:'#app',render:h=>h(App)}); ...
ant-design-vue为 Web 应用提供了丰富的基础 UI 组件,我们还将持续探索企业级应用的最佳 UI 实践。 通用 3 Button 按钮 Icon 图标 Typography 排版 布局 4 Divider 分割线 Grid 栅格 Layout 布局 Space 间距 导航 7 Affix 固钉 Breadcrumb 面包屑 Dropdown 下拉菜单 ...
PageHeader页头 Pagination分页 Steps步骤条 数据录入 AutoComplete自动完成 Cascader级联选择 Checkbox多选框 DatePicker日期选择框 Form表单 Input输入框 InputNumber数字输入框 Mentions提及 Radio单选框 Rate评分 Select选择器 Slider滑动输入条 Switch开关 TimePicker时间选择框 ...
Ant Design 依次提供了三级选项卡,分别用于不同的场景。 卡片式的页签,提供可关闭的样式,常用于容器顶部。 标准线条式页签,用于容器内部的主功能切换,这是最常用的 Tabs。 RadioButton可作为更次级的页签来使用。 代码演示 Tab 1 Tab 2 Tab 3 Content of Tab Pane 1 ...
locale语言包配置,语言包可到ant-design-vue/es/locale目录下寻找object-1.5.0 pageHeader统一设置 pageHeader 的 ghost,参考pageHeader{ ghost: boolean }'true'1.5.0 transformCellTextTable 数据渲染前可以再次改变,一般用户空数据的默认配置Function({ text, column, record, index }) => any-1.5.4 | ...
import React, { useState } from 'react'; import Button from './Button'; function Pagination(props) { const { total, defaultCurrent, defaultPageSize, onChange } = props; // 声明一个叫 “current” 的 state 变量,用来保存当前的页码; // setPage方法是用来改变current的。 const [current, set...
ant designvue中的table做分页并将page和pagesize拼接到url上,之前用react的做的项目一直都是用class,setState,componentDidMount,componentDidUpdate,componentWillUnmount的写法,但从16.8以来,react新增了Hook特性,对于喜欢技术尝试我的来说,岂能不试一下新写法。
这个思路来自于AntDesign的查询条件展示,默认它是基于常规条件的展示,如果展开则展示更多的条件。 单击【展开】则展开更多的条件,以供查询。 借鉴了这个方式,我们也可以使用这样的折叠方式来隐藏更多的查询条件,从而也使得不常用的条件默认隐藏起来,提高界面的友好性。