mirror of https://github.com/ElemeFE/element
update Message animation and Rate/Switch doc
Leopoldthecoder
parent
7e2c423676
commit
d2bad291af
|
|
@ -150,8 +150,8 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
|
|||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
|
||||
<div class="demo-color-box color-gray bg-white">Dark White<div class="value">#F9FAFC</div></div>
|
||||
<div class="demo-color-box color-gray bg-white-dark">White<div class="value">#FFFFFF</div></div>
|
||||
<div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
|
||||
<div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,33 @@
|
|||
value4: null,
|
||||
value5: 3.7
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
let firstDemo = document.querySelector('.source');
|
||||
firstDemo.style.padding = '0';
|
||||
firstDemo.style.display = 'flex';
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-box.demo-rate {
|
||||
margin: 20px 0;
|
||||
.demo-rate .block {
|
||||
display: inline-block;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px #EFF2F6;
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-rate .demonstration {
|
||||
display: block;
|
||||
color: #8492a6;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -25,22 +46,19 @@
|
|||
|
||||
适用广泛的基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。
|
||||
``` html
|
||||
<el-rate v-model="value1"></el-rate>
|
||||
```
|
||||
:::
|
||||
|
||||
### 区分颜色
|
||||
|
||||
利用颜色对分数及情感倾向进行分级
|
||||
|
||||
:::demo 分数可以被分为三个等级，对应的两个阈值可分别通过 `low-threshold` 和 `high-threshold` 设定。
|
||||
``` html
|
||||
<el-rate
|
||||
<div class="block">
|
||||
<span class="demonstration">默认不区分颜色</span>
|
||||
<el-rate v-model="value1"></el-rate>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">区分颜色</span>
|
||||
<el-rate
|
||||
v-model="value2"
|
||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
|
||||
</el-rate>
|
||||
</el-rate>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
@ -57,9 +75,11 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 其他 icon
|
||||
### 其它 icon
|
||||
|
||||
:::demo 当有多层评价时，可以用不同类型的 icon 区分评分层级
|
||||
当有多层评价时，可以用不同类型的 icon 区分评分层级
|
||||
|
||||
:::demo 设置`icon-classes`属性可以自定义对应 3 个不同分段的图标。本例还使用`void-icon-class`指定了未选中时的图标类名。
|
||||
``` html
|
||||
<el-rate
|
||||
v-model="value4"
|
||||
|
|
@ -81,7 +101,7 @@
|
|||
disabled
|
||||
show-text
|
||||
text-color="#ff9900"
|
||||
text-template="{value} 分">
|
||||
text-template="{value}">
|
||||
</el-rate>
|
||||
```
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<style>
|
||||
.demo-box.demo-switch {
|
||||
.el-switch {
|
||||
display: block;
|
||||
margin: 20px 0;
|
||||
margin: 20px 20px 20px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -19,54 +18,63 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
## 基本用法
|
||||
## Switch 开关
|
||||
|
||||
Switch 组件提供了平滑的开关。
|
||||
表示两种相互对立的状态间的切换，多用于触发「开/关」。
|
||||
|
||||
:::demo 只需要`el-switch`元素绑定`v-model`到一个变量即可完成状态改变，状态是一个`Boolean`。
|
||||
### 基本用法
|
||||
|
||||
适用广泛的基础用法
|
||||
|
||||
:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`on-text`属性与`off-text`属性来设置开关的文字描述，使用`on-color`属性与`off-color`属性来设置开关的背景色。
|
||||
|
||||
```html
|
||||
<el-switch v-model="value1"></el-switch>
|
||||
<el-switch
|
||||
v-model="value1"
|
||||
on-text=""
|
||||
off-text="">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value2"
|
||||
on-color="#13ce66"
|
||||
off-color="#ff4949">
|
||||
</el-switch>
|
||||
```
|
||||
:::
|
||||
|
||||
## 禁用状态
|
||||
### 禁用状态
|
||||
|
||||
:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用，此例中我们使用了`on-text`属性与`off-text`属性来设置开关旁的描述，`value`属性用于定义无需双向绑定情况的开关值。
|
||||
:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用。
|
||||
|
||||
```html
|
||||
<el-switch disabled></el-switch>
|
||||
<el-switch disabled :value="false"></el-switch>
|
||||
<el-switch on-text="" off-text="" disabled></el-switch>
|
||||
<el-switch on-text="" off-text="" disabled :value="false"></el-switch>
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
on-text=""
|
||||
off-text=""
|
||||
disabled>
|
||||
</el-switch>
|
||||
<el-switch
|
||||
v-model="value3"
|
||||
disabled>
|
||||
</el-switch>
|
||||
```
|
||||
:::
|
||||
|
||||
## 自定义颜色
|
||||
### Attributes
|
||||
|
||||
:::demo 使用`on-color`和`off-color`属性，可以自定义开关颜色。`on-icon-class`定义了开关时的图标，具体图标可以参见 Icon 组件文档，当设置了 Icon 后，text 值将被忽略。
|
||||
|
||||
```html
|
||||
<el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
|
||||
<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
|
||||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| value | switch 的选中状态 | boolean | — | true |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| width | switch 的宽度（像素） | number | — | 58（有文字）/ 46（无文字） |
|
||||
| on-icon-class | switch 打开时所显示图标的类名 | string | — | — |
|
||||
| off-icon-class | switch 关闭时所显示图标的类名 | string | — | — |
|
||||
| on-text | switch 打开时的文字 | string | — | 'ON' |
|
||||
| off-text | switch 关闭时的文字 | string | — | 'OFF' |
|
||||
| on-color | switch 打开时的背景色 | string | — | — |
|
||||
| off-color | switch 关闭时的背景色 | string | — | — |
|
||||
| on-icon-class | switch 打开时所显示图标的类名，<br>设置此项会忽略 `on-text` | string | — | — |
|
||||
| off-icon-class | switch 关闭时所显示图标的类名，<br>设置此项会忽略 `off-text` | string | — | — |
|
||||
| on-text | switch 打开时的文字 | string | — | ON |
|
||||
| off-text | switch 关闭时的文字 | string | — | OFF |
|
||||
| on-color | switch 打开时的背景色 | string | — | #20A0FF |
|
||||
| off-color | switch 关闭时的背景色 | string | — | #C0CCDA |
|
||||
| name | switch 对应的 name 属性 | string | — | — |
|
||||
|
||||
## Events
|
||||
### Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | switch 状态发生变化时的回调函数 | — |
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@
|
|||
{
|
||||
"path": "/rate",
|
||||
"name": "评分 (rate)",
|
||||
"title": "Rate 评分组件"
|
||||
"title": "Rate 评分"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -27,36 +27,19 @@ var Message = function(options) {
|
|||
document.body.appendChild(instance.vm.$el);
|
||||
instance.vm.visible = true;
|
||||
instance.dom = instance.vm.$el;
|
||||
|
||||
let topDist = 0;
|
||||
for (let i = 0, len = instances.length; i < len; i++) {
|
||||
topDist += instances[i].$el.offsetHeight + 20;
|
||||
}
|
||||
topDist += 20;
|
||||
instance.top = topDist;
|
||||
instances.push(instance);
|
||||
};
|
||||
|
||||
Message.close = function(id, userOnClose) {
|
||||
let index;
|
||||
let removedHeight;
|
||||
for (var i = 0, len = instances.length; i < len; i++) {
|
||||
for (let i = 0, len = instances.length; i < len; i++) {
|
||||
if (id === instances[i].id) {
|
||||
if (typeof userOnClose === 'function') {
|
||||
userOnClose(instances[i]);
|
||||
}
|
||||
index = i;
|
||||
removedHeight = instances[i].dom.offsetHeight;
|
||||
instances.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (len > 1) {
|
||||
for (i = index; i < len - 1 ; i++) {
|
||||
instances[i].dom.style.top = parseInt(instances[i].dom.style.top, 10) - removedHeight - 20 + 'px';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default Message;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<transition name="el-message-fade">
|
||||
<div class="el-message" v-show="visible" :style="{ top: top ? top + 'px' : 'auto' }" @mouseenter="clearTimer" @mouseleave="startTimer">
|
||||
<div class="el-message" v-show="visible" @mouseenter="clearTimer" @mouseleave="startTimer">
|
||||
<i class="el-message__icon" :class="[ typeClass ]"></i>
|
||||
<div class="el-message__group">
|
||||
<p>{{ message }}</p>
|
||||
|
|
@ -28,7 +28,6 @@
|
|||
onClose: null,
|
||||
showClose: false,
|
||||
closed: false,
|
||||
top: null,
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText, 'el-switch--color': onColor || offColor }">
|
||||
<div class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText }">
|
||||
<div class="el-switch__mask" v-show="disabled"></div>
|
||||
<input class="el-switch__input" type="checkbox" v-model="value" :name="name" :disabled="disabled" style="display: none;">
|
||||
<span class="el-switch__core" ref="core" @click="handleMiscClick" :style="{ 'width': coreWidth + 'px' }">
|
||||
|
|
@ -102,13 +102,8 @@
|
|||
this.$refs.button.style.transform = this.value ? `translate3d(${ this.coreWidth - 20 }px, 2px, 0)` : 'translate3d(2px, 2px, 0)';
|
||||
},
|
||||
handleCoreColor() {
|
||||
if (this.value) {
|
||||
this.$refs.core.style.borderColor = this.onColor;
|
||||
this.$refs.core.style.backgroundColor = this.onColor;
|
||||
} else {
|
||||
this.$refs.core.style.borderColor = this.offColor;
|
||||
this.$refs.core.style.backgroundColor = this.offColor;
|
||||
}
|
||||
this.$refs.core.style.borderColor = this.value ? this.onColor : this.offColor;
|
||||
this.$refs.core.style.backgroundColor = this.value ? this.onColor : this.offColor;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -5,15 +5,16 @@
|
|||
|
||||
@b message {
|
||||
box-shadow:0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
|
||||
width: 300px;
|
||||
min-width: 300px;
|
||||
padding: 10px 12px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
background-color: #fff;
|
||||
transition: opacity 0.3s, top 0.4s;
|
||||
transition: opacity 0.3s, transform .4s;
|
||||
overflow: hidden;
|
||||
z-index: var(--index-popper);
|
||||
|
||||
|
|
@ -24,7 +25,8 @@
|
|||
& p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin: 0 20px 0 0;
|
||||
margin: 0 34px 0 0;
|
||||
white-space: nowrap;
|
||||
color: #8492a6;
|
||||
text-align: justify;
|
||||
}
|
||||
|
|
@ -68,5 +70,6 @@
|
|||
.el-message-fade-enter,
|
||||
.el-message-fade-leave-active {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue