diff --git a/examples/docs/color.md b/examples/docs/color.md index fe08b398e..344ebea29 100644 --- a/examples/docs/color.md +++ b/examples/docs/color.md @@ -150,8 +150,8 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
-
Dark White
#F9FAFC
-
White
#FFFFFF
+
Dark White
#F9FAFC
+
White
#FFFFFF
 diff --git a/examples/docs/rate.md b/examples/docs/rate.md index ff34527a2..042580e84 100644 --- a/examples/docs/rate.md +++ b/examples/docs/rate.md @@ -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'; + }); } } @@ -25,22 +46,19 @@ 适用广泛的基础用法 -:::demo +:::demo 评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过`colors`属性设置，而它们对应的两个阈值则通过 `low-threshold` 和 `high-threshold` 设定。 ``` html - -``` -::: - -### 区分颜色 - -利用颜色对分数及情感倾向进行分级 - -:::demo 分数可以被分为三个等级，对应的两个阈值可分别通过 `low-threshold` 和 `high-threshold` 设定。 -``` html - - +
+ 默认不区分颜色 + +
+
+ 区分颜色 + + +
``` ::: @@ -57,9 +75,11 @@ ``` ::: -### 其他 icon +### 其它 icon -:::demo 当有多层评价时，可以用不同类型的 icon 区分评分层级 +当有多层评价时，可以用不同类型的 icon 区分评分层级 + +:::demo 设置`icon-classes`属性可以自定义对应 3 个不同分段的图标。本例还使用`void-icon-class`指定了未选中时的图标类名。 ``` html + text-template="{value}"> ``` ::: diff --git a/examples/docs/switch.md b/examples/docs/switch.md index 761f796cd..cc8c9befb 100644 --- a/examples/docs/switch.md +++ b/examples/docs/switch.md @@ -1,8 +1,7 @@ @@ -19,54 +18,63 @@ }; -## 基本用法 +## Switch 开关 -Switch 组件提供了平滑的开关。 +表示两种相互对立的状态间的切换，多用于触发「开/关」。 -:::demo 只需要`el-switch`元素绑定`v-model`到一个变量即可完成状态改变，状态是一个`Boolean`。 +### 基本用法 + +适用广泛的基础用法 + +:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`on-text`属性与`off-text`属性来设置开关的文字描述，使用`on-color`属性与`off-color`属性来设置开关的背景色。 ```html - + + + + ``` ::: -## 禁用状态 +### 禁用状态 -:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用，此例中我们使用了`on-text`属性与`off-text`属性来设置开关旁的描述，`value`属性用于定义无需双向绑定情况的开关值。 +:::demo 设置`disabled`属性，接受一个`Boolean`，设置`true`即可禁用。 ```html - - - - + + + + ``` ::: -## 自定义颜色 +### Attributes -:::demo 使用`on-color`和`off-color`属性，可以自定义开关颜色。`on-icon-class`定义了开关时的图标，具体图标可以参见 Icon 组件文档，当设置了 Icon 后，text 值将被忽略。 - -```html - - -``` -::: - -## 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 打开时所显示图标的类名，
设置此项会忽略 `on-text` | string | — | — | +| off-icon-class | switch 关闭时所显示图标的类名，
设置此项会忽略 `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 状态发生变化时的回调函数 | — | diff --git a/examples/nav.config.json b/examples/nav.config.json index 696bb3432..5cd6e0735 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -152,7 +152,7 @@ { "path": "/rate", "name": "评分 (rate)", - "title": "Rate 评分组件" + "title": "Rate 评分" } ] }, diff --git a/packages/message/src/main.js b/packages/message/src/main.js index 1ed1c979a..ee2df085c 100644 --- a/packages/message/src/main.js +++ b/packages/message/src/main.js @@ -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; diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue index c4ad36266..cb1c1365f 100644 --- a/packages/message/src/main.vue +++ b/packages/message/src/main.vue @@ -1,6 +1,6 @@