From 8386f662726a286678f2b26319e896b879332117 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 27 Nov 2018 21:24:13 +0800 Subject: [PATCH] [new feature] Icon: name can be URL (#973) --- example/components/demo-block/index.wxml | 2 +- example/components/demo-block/index.wxss | 2 ++ example/pages/icon/index.wxml | 28 ++++++++++++++- example/pages/icon/index.wxss | 9 +++-- packages/cell/README.md | 2 +- packages/collapse/README.md | 2 +- packages/common/utils.ts | 5 +++ packages/field/README.md | 4 +-- packages/icon/README.md | 14 ++++++-- packages/icon/index.less | 43 +++++++++++++++++------- packages/icon/index.ts | 7 ++++ packages/icon/index.wxml | 13 +++++-- packages/rate/README.md | 4 +-- packages/tabbar/README.md | 2 +- 14 files changed, 109 insertions(+), 28 deletions(-) diff --git a/example/components/demo-block/index.wxml b/example/components/demo-block/index.wxml index e6db824f..07abe0bf 100644 --- a/example/components/demo-block/index.wxml +++ b/example/components/demo-block/index.wxml @@ -1,4 +1,4 @@ - + {{ title }} diff --git a/example/components/demo-block/index.wxss b/example/components/demo-block/index.wxss index 9a6033fb..183828c1 100644 --- a/example/components/demo-block/index.wxss +++ b/example/components/demo-block/index.wxss @@ -1,3 +1,5 @@ +@import '../../dist/common/index.wxss'; + .demo-block__title { margin: 0; font-weight: 400; diff --git a/example/pages/icon/index.wxml b/example/pages/icon/index.wxml index b5216160..2062b594 100644 --- a/example/pages/icon/index.wxml +++ b/example/pages/icon/index.wxml @@ -1,5 +1,31 @@ + + + + + + + + + + + + + + + + + + + + - + {{ icon }} diff --git a/example/pages/icon/index.wxss b/example/pages/icon/index.wxss index 78a5507c..c33adfbf 100644 --- a/example/pages/icon/index.wxss +++ b/example/pages/icon/index.wxss @@ -1,11 +1,16 @@ -.col { +.col, +.col-with-text { text-align: center; - height: 100px; + height: 60px; float: none; display: inline-block; vertical-align: middle; } +.col-with-text { + height: 100px; +} + .icon { display: block; margin: 15px 0; diff --git a/packages/cell/README.md b/packages/cell/README.md index c6806754..3a536e26 100644 --- a/packages/cell/README.md +++ b/packages/cell/README.md @@ -128,7 +128,7 @@ | 参数 | 说明 | 类型 | 默认值 | |-----------|-----------|-----------|-------------| -| icon | 左侧图标，可选值见 Icon 组件 | `String` | - | +| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | | title | 左侧标题 | `String | Number` | - | | title-width | 标题宽度，须包含单位 | `String` | - | | value | 右侧内容 | `String | Number` | - | diff --git a/packages/collapse/README.md b/packages/collapse/README.md index 2ff3813e..f7235c11 100644 --- a/packages/collapse/README.md +++ b/packages/collapse/README.md @@ -96,7 +96,7 @@ Page({ |------|------|------|------|------| | name | 唯一标识符，默认为索引值 | `String | Number` | `index` | | title | 标题栏左侧内容 | `String | Number` | - | -| icon | 标题栏左侧图标，可选值见 Icon 组件 | `String` | - | +| icon | 标题栏左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | | value | 标题栏右侧内容 | `String | Number` | - | | label | 标题栏描述信息 | `String` | - | | border | 是否显示内边框 | `Boolean` | `true` | diff --git a/packages/common/utils.ts b/packages/common/utils.ts index 765c483d..ade4e679 100644 --- a/packages/common/utils.ts +++ b/packages/common/utils.ts @@ -11,8 +11,13 @@ function isNumber(value) { return /^\d+$/.test(value); } +function isSrc(url) { + return /^(https?:)?\/\/|data:image/.test(url); +} + export { isObj, isDef, + isSrc, isNumber }; diff --git a/packages/field/README.md b/packages/field/README.md index c0a11855..3d88f08e 100644 --- a/packages/field/README.md +++ b/packages/field/README.md @@ -156,8 +156,8 @@ Page({ | error-message | 底部错误提示文案，为空时不展示 | `String` | `''` | | input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` | | autosize | 自适应内容高度，只对 textarea 有效 | `Boolean` | `false` | -| icon | 输入框尾部图标 (可选值见 Icon 组件) | `String` | - | -| left-icon | 输入框左侧图标 (可选值见 Icon 组件) | `String` | - | +| icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - | +| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | | confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | `String` | `done` | | confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起，在 type='textarea' 时无效 | `Boolean` | `false` | | cursor-spacing | 输入框聚焦时底部与键盘的距离 | `Number` | `50` | diff --git a/packages/icon/README.md b/packages/icon/README.md index 06f53e2d..6dcdf3de 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -13,17 +13,25 @@ #### 基础用法 -设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表 +`Icon`的`name`属性支持传入图标名称或图片链接 ```html - + + +``` + +#### 显示徽标 + + ```html + + ``` ### API | 参数 | 说明 | 类型 | 默认值 | |-----------|-----------|-----------|-------------| -| name | 图标名称 | `String` | - | +| name | 图标名称或图片链接 | `String` | - | | info | 图标右上角文字提示 | `String | Number` | - | | color | 图标颜色 | `String` | `inherit` | | size | 图标大小，如 `20px`，`2em` | `String` | `inherit` | diff --git a/packages/icon/index.less b/packages/icon/index.less index 58d9fab1..8b9d2246 100644 --- a/packages/icon/index.less +++ b/packages/icon/index.less @@ -14,21 +14,40 @@ font-size: inherit; text-rendering: auto; + &--image { + width: 1em; + height: 1em; + + image { + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + max-width: 100%; + max-height: 100%; + position: absolute; + } + } + &__info { - color: @white; - left: 100%; - top: -.5em; - font-size: .6em; - padding: 0 .25em; - text-align: center; - min-width: 1.4em; - line-height: 1.4; position: absolute; - border-radius: .6em; - box-sizing: border-box; - background-color: @red; - transform: translateX(-50%); + right: 0; + top: -8px; + color: @white; + font-size: 12px; + font-weight: 500; font-family: PingFang SC, Helvetica Neue, Arial, sans-serif; + text-align: center; + box-sizing: border-box; + padding: 0 3px; + min-width: 16px; + line-height: 14px; + border: 1px solid @white; + border-radius: 16px; + background-color: @red; + transform: translateX(50%); + transform-origin: 100%; } &::before { diff --git a/packages/icon/index.ts b/packages/icon/index.ts index c73f6e73..1e145170 100644 --- a/packages/icon/index.ts +++ b/packages/icon/index.ts @@ -1,3 +1,4 @@ +import { isSrc } from '../common/utils'; import { VantComponent } from '../common/component'; VantComponent({ @@ -13,6 +14,12 @@ VantComponent({ } }, + computed: { + isSrc() { + return isSrc(this.data.name); + } + }, + methods: { onClick() { this.$emit('click'); diff --git a/packages/icon/index.wxml b/packages/icon/index.wxml index 87553bae..83012e59 100644 --- a/packages/icon/index.wxml +++ b/packages/icon/index.wxml @@ -1,7 +1,16 @@ - {{ info }} + + {{ info }} + + diff --git a/packages/rate/README.md b/packages/rate/README.md index df45acee..9175f299 100644 --- a/packages/rate/README.md +++ b/packages/rate/README.md @@ -74,8 +74,8 @@ Page({ | size | 图标大小 (px) | `Number` | `20` | | color | 选中时的颜色 | `String` | `#ffd21e` | | void-color | 未选中时的颜色 | `String` | `#c7c7c7` | -| icon | 选中时的图标，可选值见 Icon 组件 | `String` | `star` | -| void-icon | 未选中时的图标，可选值见 Icon 组件 | `String` | `star-o` | +| icon | 选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star` | +| void-icon | 未选中时的图标名称或图片链接，可选值见 Icon 组件 | `String` | `star-o` | | readonly | 是否为只读状态 | `Boolean` | `false` | | disabled | 是否禁用评分 | `Boolean` | `false` | | disabled-color | 禁用时的颜色 | `String` | `#bdbdbd` | diff --git a/packages/tabbar/README.md b/packages/tabbar/README.md index fd2be4a5..d8547f5b 100644 --- a/packages/tabbar/README.md +++ b/packages/tabbar/README.md @@ -86,7 +86,7 @@ Page({ | 参数 | 说明 | 类型 | 默认值 | |-----------|-----------|-----------|-----------| -| icon | 图标名称 (可选值见 Icon 组件) | `String` | - | +| icon | 图标名称或图片链接，可选值见 Icon 组件 | `String` | - | | dot | 是否显示小红点 | `Boolean` | - | | info | 图标右上角提示信息 | `String | Number` | - |