feat(Picker): add allow-html prop (#4278)

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 <li {...data}>{this.allowHtml ? '' : text}</li>;
+      });
     }
   },
 
   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) => (
-            <li
-              style={optionStyle}
-              class={[
-                'van-ellipsis',
-                bem('item', {
-                  disabled: isOptionDisabled(option),
-                  selected: index === this.currentIndex
-                })
-              ]}
-              domPropsInnerHTML={this.getOptionText(option)}
-              onClick={() => {
-                this.onClickItem(index);
-              }}
-            />
-          ))}
+          {this.genOptions()}
         </ul>
       </div>
     );

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

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 | 单列选择器的默认选中项索引，<br>多列选择器请参考下方的 Columns 配置 | *number* | `0` | - |
 
 ### Events

src/picker/index.js

@@ -187,6 +187,7 @@ export default createComponent({
           {columns.map((item, index) => (
             <PickerColumn
               valueKey={this.valueKey}
+              allowHtml={this.allowHtml}
               className={item.className}
               itemHeight={this.itemHeight}
               defaultIndex={item.defaultIndex || this.defaultIndex}

src/picker/shared.ts

@@ -14,6 +14,10 @@ export const pickerProps = {
   showToolbar: Boolean,
   cancelButtonText: String,
   confirmButtonText: String,
+  allowHtml: {
+    type: Boolean,
+    default: true
+  },
   visibleItemCount: {
     type: Number,
     default: 5

src/picker/test/__snapshots__/index.spec.js.snap

@@ -28,6 +28,22 @@ exports[`column watch default index 2`] = `
 </div>
 `;
 
+exports[`not allow html 1`] = `
+<div class="van-picker">
+  <!---->
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+        <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">&lt;div&gt;option&lt;/div&gt;</li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;
+
 exports[`render title slot 1`] = `
 <div class="van-picker">
   <div class="van-hairline--top-bottom van-picker__toolbar">

src/picker/test/index.spec.js

@@ -195,3 +195,14 @@ test('toolbar-position prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('not allow html', () => {
+  const wrapper = mount(Picker, {
+    propsData: {
+      allowHtml: false,
+      columns: ['<div>option</div>']
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});