Element Enhance 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Element Enhance 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Element Enhance 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Element Enhance 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Element Enhance 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

Element Enhance 是基于 Element Plus 而开发的模板组件,提供了更高级别的抽象支持,开箱即用,更加专注于页面。

开发文档 | 更新日志 | 常见问题 | 发布需求

 📢 理念

Element Plus 定义了基础的设计规范,对应也提供了大量的基础组件。但是对于中后台类应用,我们希望提供更高程度的抽象,提供更上层的设计规范,并且对应提供相应的组件使得开发者可以快速搭建出高质量的页面。

列表页应该可以用 EleLayout + EleTable 完成,编辑页应该使用 EleLayout + EleForm 完成,详情页可以用 EleLayout + EleDescriptions 完成。 一个页面在开发工程中只需要关注几个重型组件,降低心智负担,专注于更核心的业务逻辑。

 ⚡ 设计

在实际开发中我们也经常会碰到一些设计问题,比如经典的按钮应该放在左面还是右面,查询表单怎么布局,日期怎么格式化,数字的对齐问题,在重型组件中都进行了抽象,对于各种行为与样式我们都经过了设计师的讨论与设计可以达到默认好看及好用。

如果你还是想自定义相关渲染可以通过自定义 ModelValue 的方式来实现。默认的不一定是最好的,但是一定不差,如果你要自定义最好考虑一下投入产出比,毛坯房里雕花真的好吗?

 ✒️ 特性

该组件库的开发理念就是面向未来,如果查看源码你就会发现像是 vue 3 的实验性功能、像是 CSSNext 的 [CSS Variables]。在保证大部分浏览器的兼容性的情况下,会更多的使用新特性、新功能来开发

 ☁️ 入门

让 Element Plus 更简单, 更通用, 更流行

安装

npm install element-enhance --save

引入

import { createApp } from 'vue'
import App from './App.vue'
import ElementEnhance from 'element-enhance'
import 'element-enhance/lib/style.css'

const app = createApp(App)

app.use(ElementEnhance)
app.mount('#app')

使用

<template>
  <ele-layout multi-tab="true" breadcrumb="true">
    <template #logo></template>
  </ele-layout>
</template>

效果

🍚 贡献

组件库还处于早期开发阶段,功能还需要完善。如果你希望参与贡献,欢迎 [Pull Request]。如果只是简单的文档相关的错误修正,你可以直接 PR,但如果是当前组件的 BUG 或者新功能、新组件等,最好优先提 [issues]
 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
发表了资讯
05/31 11:13

Element Enhance 组件库,让 Element Plus 更简单,更通用,更流行

Element Enhance 是基于 Element Plus 而开发的模板组件,提供了更高级别的抽象支持,开箱即用,更加专注于页面。 开发文档 | 更新日志 | 常见问题 | 发布需求 📢 理念 Element Plus 定义了基础的设计规范,对应也提供了大量的基础组件。但是对于中后台类应用,我们希望提供更高程度的抽象,提供更上层的设计规范,并且对应提供相应的组件使得开发者可以快速搭建出高质量的页面。 列表页应该可以用 EleLayout + EleT...

1
11
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
2019/06/13 16:57

Cannot find 'Enhance Component' button in BSP Workbench

One colleague asks this question: In AG3 and HAM, the “Enhancement Component” button is missing in BSP_WD_CMPWB. Answer This is because in AG3 and HAM, the system is setup as “SAP system”, no extension is allowed in such kind of system. The button is deliberately set as hidden in such systems. Please try to practice extensibility exercise in dedicated system like QJ2 and QI2 instead. 要获取...

0
0
2019/08/23 19:01

Cannot find 'Enhance Component' button in BSP Workbench

One colleague asks this question: In AG3 and HAM, the “Enhancement Component” button is missing in BSP_WD_CMPWB. Answer This is because in AG3 and HAM, the system is setup as “SAP system”, no extension is allowed in such kind of system. The button is deliberately set as hidden in such systems. Please try to practice extensibility exercise in dedicated system like QJ2 and QI2 instead. 要获取...

0
0
2019/07/10 11:02

IPM: Enhance item implementation class

Created by Jerry Wang, last modified on Mar 25, 2014 IPM application里所有的BOL entity上面都封装了一层额外的implementation class, 如下图所示: 真正的BOL entity包含在implementation class的WRAPPED_ENTITY attribute里: implementation class本身的wrapper BOL entity的name称之为external name, 和wrapped bol entity不相同。 wrapper BOL entity的container proxy包含的是一个initial的structure: 在SPRO里能够对该...

0
0
发表了博客
2018/10/18 19:19

Using MultiPath TCP to enhance home networks

Over the last few months I’ve been playing with MultiPath TCP and in this post I will show how I use it to leverage my humble True ADSL line at home. For performance and security reasons, I tunnel all my traffic thru a VPN. This is not necessarily to circumvent censorship, but to circumvent the evil transparent proxiesmy ISP puts in middle. The total bandwidth available is ~10 mbps down / ~1 m...

0
0
2020/04/08 19:34

HDR图像处理工具:Image Enhance Pro for Mac

Image Enhance Pro是生成HDR图像的工具,具有广泛的动态照明和细节范围。我们先进的HDR算法将单张图片作为输入,并通过增强色彩和细节为其提供惊人的HDR外观。除了HDR外,您还可以使用其他滤镜来获得所需的输出。 Image Enhance Pro mac安装教程 下载并打开安装包,点击运行安装程序。 输入密码(密码这里不可见),点击enter键运行。 安装成功。 Image Enhance Pro mac破解版软件功能 使用单个输入图像即可转换为Hdr外观。 HDR(...

0
0
发表了博客
2018/08/10 18:07

find_element

from selenium import webdriver driver = webdriver.Chrome() #前提,在当前页面当中,不管用哪种定位方式,一定要是唯一的 #八种定位方式:#id、#name、#class_name、#input3(tag_name、link_text、partial_link_text)、#xpath、css #id driver.find_element_by_id("kw") driver.find_element_by_css_selector("#kw") # 井号表示ID #name driver.find_element_by_name("wd") driver.find_element_by_css_selector("input[@...

0
0
发表了博客
2020/06/09 10:37

max_element()函数和min_element()函数

max_element()函数和min_element()函数,我们从函数名字就能知道是什么作用了,就是找最大值最小值,那怎么用呢? 数组:int position=max_element(a,a+n)-a; int data=*max_element(a,a+n); 容器: int position=max_element(v.begin(), v.end())-v.begin(); int it = *max_element(v.begin(), v.end()); string: int position=max_element(s.begin(), s.end())-s.begin(); char it=*max_element(s.begin(),s.end()); min_...

0
0
发表了博客
2015/01/06 15:54

Majority Element

Given an array of size n, find the majority element. The majority element is the element that appears more than ⌊ n/2 ⌋ times. You may assume that the array is non-empty and the majority element always exist in the array. class Solution { public: int majorityElement(vector<int> &num) { int len = num.size(); int tmp=num[0], nb=1; for(int i=1;i<len;i++) ...

0
0
2015/01/04 14:50

Marjority Element

# 题目 > Given an array of size n, find the majority element. The majority element is the element that appears more than ⌊ n/2 ⌋ times. You may assume that the array is non-empty and the majority element always exist in the array. # 思路 - 每遇到一个重复的元素就给计数加一,否则减一 - 计数到0的时候应该重置纪录元素 # 代码 ```python class Solution: # @param num, a list of integers # @return an ...

0
0
发表了博客
2020/04/19 10:05

Element UI

Element UI Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 基本使用示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <!-- 引入样式 --> <link rel="styleshee...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
9 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部