diff --git a/src/picker/PickerColumn.js b/src/picker/PickerColumn.js
index b3549941c..908dfb9a5 100644
--- a/src/picker/PickerColumn.js
+++ b/src/picker/PickerColumn.js
@@ -32,6 +32,7 @@ export default createComponent({
props: {
valueKey: String,
+ allowHtml: Boolean,
className: String,
itemHeight: Number,
defaultIndex: Number,
@@ -226,20 +227,48 @@ export default createComponent({
this.transitionEndTrigger();
this.transitionEndTrigger = null;
}
+ },
+
+ genOptions() {
+ const optionStyle = {
+ height: `${this.itemHeight}px`
+ };
+
+ return this.options.map((option, index) => {
+ const text = this.getOptionText(option);
+ const data = {
+ style: optionStyle,
+ class: [
+ 'van-ellipsis',
+ bem('item', {
+ disabled: isOptionDisabled(option),
+ selected: index === this.currentIndex
+ })
+ ],
+ on: {
+ click: () => {
+ this.onClickItem(index);
+ }
+ }
+ };
+
+ if (this.allowHtml) {
+ data.domProps = {
+ innerHTML: text
+ };
+ }
+
+ return
{this.allowHtml ? '' : text};
+ });
}
},
render() {
- const { itemHeight } = this;
const wrapperStyle = {
transform: `translate3d(0, ${this.offset + this.baseOffset}px, 0)`,
transitionDuration: `${this.duration}ms`,
transitionProperty: this.duration ? 'all' : 'none',
- lineHeight: `${itemHeight}px`
- };
-
- const optionStyle = {
- height: `${itemHeight}px`
+ lineHeight: `${this.itemHeight}px`
};
return (
@@ -256,22 +285,7 @@ export default createComponent({
class={bem('wrapper')}
onTransitionend={this.onTransitionEnd}
>
- {this.options.map((option, index) => (
- {
- this.onClickItem(index);
- }}
- />
- ))}
+ {this.genOptions()}
);
diff --git a/src/picker/README.md b/src/picker/README.md
index b105f0e0f..686875e27 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -196,6 +196,7 @@ When Picker columns data is acquired asynchronously, use `loading` prop to show
| confirm-button-text | Text of confirm button | *string* | `Confirm` | - |
| cancel-button-text | Text of cancel button | *string* | `Cancel` | - |
| visible-item-count | Count of visible columns | *number* | `5` | - |
+| allow-html | Whether to allow HTML in option text | *boolean* | `true` | 2.1.8 |
| default-index | Default value index of single column picker | *number* | `0` | - |
### Events
diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md
index 3c478571b..2ddf82689 100644
--- a/src/picker/README.zh-CN.md
+++ b/src/picker/README.zh-CN.md
@@ -204,6 +204,7 @@ export default {
| confirm-button-text | 确认按钮文字 | *string* | `确认` | - |
| cancel-button-text | 取消按钮文字 | *string* | `取消` | - |
| visible-item-count | 可见的选项个数 | *number* | `5` | - |
+| allow-html | 是否允许选项内容中渲染 HTML | *boolean* | `true` | 2.1.8 |
| default-index | 单列选择器的默认选中项索引,
多列选择器请参考下方的 Columns 配置 | *number* | `0` | - |
### Events
diff --git a/src/picker/index.js b/src/picker/index.js
index fe0c6e15c..dd8465886 100644
--- a/src/picker/index.js
+++ b/src/picker/index.js
@@ -187,6 +187,7 @@ export default createComponent({
{columns.map((item, index) => (
`;
+exports[`not allow html 1`] = `
+
+`;
+
exports[`render title slot 1`] = `