Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

minor,fix button ui #70

Open
wants to merge 1 commit into
base: 3.x
Choose a base branch
from
Open

minor,fix button ui #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
637 changes: 482 additions & 155 deletions examples/docs/zh-CN/button.md
View file
Open in desktop

Large diffs are not rendered by default.

26 changes: 13 additions & 13 deletions examples/docs/zh-CN/dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
<style>
.demo-box.demo-dialog {
.dialog-footer button:first-child {
margin-right: 10px;
/* margin-right: 10px; */
}
.full-image {
width: 100%;
Expand Down Expand Up @@ -107,8 +107,8 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
show-icon>
</el-alert>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible0 = false">取 消</el-button>
<el-button type="primary" plain @click="dialogVisible0 = false">确 定</el-button>
<el-button plain @click="dialogVisible0 = false">取 消</el-button>
<el-button @click="dialogVisible0 = false">确 定</el-button>
</span>
</el-dialog>

Expand Down Expand Up @@ -158,8 +158,8 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
show-icon>
</el-alert>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" plain @click="dialogVisible = false">确 定</el-button>
<el-button plain @click="dialogVisible = false">取 消</el-button>
<el-button @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>

Expand Down Expand Up @@ -242,8 +242,8 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" plain @click="dialogFormVisible = false">确 定</el-button>
<el-button plain @click="dialogFormVisible = false">取 消</el-button>
<el-button @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>

Expand Down Expand Up @@ -305,8 +305,8 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
append-to-body>
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false">取 消</el-button>
<el-button type="primary" plain @click="innerVisible = true" @keyup.enter.native="innerVisible = true" :autofocus="true" ref="mybtn">打开内层 Dialog</el-button>
<el-button plain @click="outerVisible = false">取 消</el-button>
<el-button @click="innerVisible = true" @keyup.enter.native="innerVisible = true" :autofocus="true" ref="mybtn">打开内层 Dialog</el-button>
</div>
</el-dialog>
</template>
Expand Down Expand Up @@ -340,8 +340,8 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
center>
<span>需要注意的是内容是默认不居中的</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" plain @click="centerDialogVisible = false">确 定</el-button>
<el-button plain @click="centerDialogVisible = false">取 消</el-button>
<el-button @click="centerDialogVisible = false">确 定</el-button>
</span>
</el-dialog>

Expand Down Expand Up @@ -391,8 +391,8 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
<p>需要注意的是内容是默认不居中的</p>

<span slot="footer" class="dialog-footer">
<el-button @click="limitedDialogVisible = false">取 消</el-button>
<el-button type="primary" plain @click="limitedDialogVisible = false">确 定</el-button>
<el-button plain @click="limitedDialogVisible = false">取 消</el-button>
<el-button @click="limitedDialogVisible = false">确 定</el-button>
</span>
</el-dialog>

Expand Down
31 changes: 30 additions & 1 deletion examples/docs/zh-CN/table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,13 @@
width: 50%;
}
}
/* .el-table__fixed-body-wrapper{
.el-table__expanded-cell {
& > *{
visibility: hidden;
}
}
} */
</style>

## Table 表格
Expand Down Expand Up @@ -770,8 +777,30 @@
:data="tableData"
border
style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-table
size="medium"
:data="tableData5"
nested
border
style="width: 100%">
<el-table-column
label="商品 ID"
prop="id">
</el-table-column>
<el-table-column
label="商品名称"
prop="name">
</el-table-column>
<el-table-column
label="描述"
prop="desc">
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column
fixed
prop="date"
label="日期"
width="150">
Expand Down
8 changes: 8 additions & 0 deletions examples/docs/zh-CN/tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,14 @@
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
<el-tab-pane label="用户管理1" name="first1">用户管理1</el-tab-pane>
<el-tab-pane label="配置管理1" name="second1">配置管理1</el-tab-pane>
<el-tab-pane label="角色管理1" name="third1">角色管理1</el-tab-pane>
<el-tab-pane label="定时任务补偿1" name="fourth1">定时任务补偿1</el-tab-pane>
<el-tab-pane label="用户管理2" name="first2">用户管理2</el-tab-pane>
<el-tab-pane label="配置管理2" name="second2">配置管理2</el-tab-pane>
<el-tab-pane label="角色管理2" name="third2">角色管理2</el-tab-pane>
<el-tab-pane label="定时任务补偿2" name="fourth2">定时任务补偿2</el-tab-pane>
</el-tabs>
</template>
<script>
Expand Down
142 changes: 56 additions & 86 deletions examples/docs/zh-CN/tag.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
}
this.inputVisible = false;
this.inputValue = '';
},
editSomething () {
alert('do something')
}
}
}
Expand All @@ -54,6 +57,18 @@
margin-left: 10px;
vertical-align: bottom;
}
.customIconTag{
.custom-icon{
margin-left: 5px;
display: none;
}
&:hover{
.custom-icon{
cursor: pointer;
display: inline;
}
}
}
}
</style>

Expand All @@ -62,31 +77,38 @@
用于标记和选择。

### 基础用法
基于标准色，依据系统用途分配属性，如需多种颜色并用，则不考虑此属性原则，标签可加入动作操作之。

:::demo 由`type`属性来选择tag的类型，也可以通过`color`属性来自定义背景色。
:::demo 由`type`属性来选择tag的类型，也可以通过`color`属性来自定义背景色，项目中用的尺寸都选用 small

```html
<el-tag>标签一</el-tag>
<el-tag type="success">标签二</el-tag>
<el-tag type="info">标签三</el-tag>
<el-tag type="warning">标签四</el-tag>
<el-tag type="danger">标签五</el-tag>
<el-tag size="small">普通</el-tag>
<el-tag type="danger" size="small">危险</el-tag>
<el-tag type="info" size="small">失效</el-tag>
<el-tag type="success" size="small">安全</el-tag>
<el-tag type="warning" size="small">警示</el-tag>
```
:::

### 可移除标签
### 操作标签
未提供用户快速编辑或删除标签，可选择下列标签形态，以利于用户快速操作。
el-tag 在文案和关闭按钮中间是可以接收slot的，可以进行自定义填充处理

:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`disable-transitions`属性，它接受一个`Boolean`，true 为关闭。

```html
<el-tag
size="small"
v-for="tag in tags"
:key="tag.name"
closable
:type="tag.type">
{{tag.name}}
</el-tag>

<h4 style="margin:20px 0">自定义标签icon， hover 到tag 上查看效果</h4>
<el-tag size="small" closable class="customIconTag">普通<i class="el-icon-edit custom-icon" @click="editSomething"></i></el-tag>

<script>
export default {
data() {
Expand All @@ -99,102 +121,50 @@
{ name: '标签五', type: 'danger' }
]
};
},
methods: {
editSomething () {
alert('do something')
}
}
}
</script>
```
:::

### 动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现

:::demo
```html
<el-tag
:key="tag"
v-for="tag in dynamicTags"
closable
:disable-transitions="false"
@close="handleClose(tag)">
{{tag}}
</el-tag>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>

<style>
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>

<script>
export default {
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: ''
};
},
methods: {
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},

showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},

handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
.customIconTag{
.custom-icon{
margin-left: 5px;
display: none;
}
&:hover{
.custom-icon{
cursor: pointer;
display: inline;
}
}
}
</script>
</style>
```
:::

### 不同尺寸

Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
规范中建议使用两种尺寸，small 和 mini。

:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
:::demo mini 尺寸主要适用于 1. 小型 input 框（h = 24px）里的多选情况，2. 表中表的编辑状态下

```html
<el-tag closable>默认标签</el-tag>
<el-tag size="medium" closable>中等标签</el-tag>
<h4 style="margin:20px 0">常用尺寸：</h4>
<el-tag size="small" closable>小型标签</el-tag>

<h4 style="margin:20px 0">表中表的编辑状态时适用的尺寸：</h4>
<el-tag size="mini" closable>超小标签</el-tag>

<h4 style="margin:20px 0">留作备用的两个尺寸：default medium</h4>
<div>
<el-tag closable>默认标签</el-tag>
<el-tag size="medium" closable>中等标签</el-tag>
</div>

```
:::

Expand Down
10 changes: 8 additions & 2 deletions examples/docs/zh-CN/upload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,16 @@
.avatar-uploader {
.el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
border-radius: 2px;
cursor: pointer;
position: relative;
overflow: hidden;

&:hover, &:focus {
border-color: #409EFF;
i {
color: #409EFF;
}
}
}
.avatar-uploader-icon {
Expand Down Expand Up @@ -189,13 +192,16 @@
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
border-radius: 2px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
i {
color: #409EFF;
}
}
.avatar-uploader-icon {
font-size: 28px;
Expand Down
11 changes: 9 additions & 2 deletions packages/button/src/button-group.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
<template>
<div class="el-button-group">
<div class="el-button-group" :class="{'is-vertical': align === 'vertical'}">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'ElButtonGroup'
name: 'ElButtonGroup',

props: {
align: {
type: String,
default: 'horizontal' // horizontal、vertical
}
}
};
</script>
Loading