FieldPicker 选择器表单项(弃用)

使用指南

建议

该组件是个组合组件，仅仅是为了兼容之前组件而开发，请尽量使用h3-field及h3-picker，h3-cascade-picker，h3-area-picker组件自行组合开发，更加灵活。

带选择器的表单项

代码演示

查看代码

<template>
  <div>
    <p>field-picker 组件</p>
    <p>field-picker picker类型</p>
    <h3-field-picker
      v-model="pickervalue"
      :picker-props="{
        data: list2,
      }"
      label="手机厂商"
      tip="选择手机厂商"
      required
      pickerType="picker"
    />
    <h3-field-picker
      v-model="pickervalue"
      :picker-props="{
        data: list2,
      }"
      label="手机厂商(只读)"
      tip="选择手机厂商"
      required
      readonly
      pickerType="picker"
    />
    <h3-field-picker
      v-model="pickervalue2"
      :friendly="true"
      :picker-props="{
        data: list0,
      }"
      label="手机厂商2"
      tip="选择手机厂商222"
      required
      pickerType="picker"
    />
    <p>field-picker cascade-picker类型</p>
    <h3-field-picker
      v-model="pickervalue3"
      :friendly="true"
      :picker-props="{
        data: list3,
      }"
      label="产地"
      tip="产地"
      required
      pickerType="cascade-picker"
    />
    <h3-field-picker
      v-model="pickervalue3"
      :friendly="true"
      :picker-props="{
        data: list4,
        flat: false,
      }"
      label="产地(数据源是树状的)"
      tip="产地"
      required
      pickerType="cascade-picker"
    />
    <p>field-picker area-picker类型</p>
    <h3-field-picker
      v-model="pickervalue4"
      :friendly="true"
      :picker-props="{
        mode  : 'P-C',
        source: source,
      }"
      label="地区选择器"
      tip="地区选择器"
      required
      pickerType="area-picker"
      placeholder="请选择"
    />
    <p>field-picker datetime-picker类型</p>
    <h3-field-picker
      v-model="pickervalue5"
      :picker-props="{
        format: 'YYYY-MM-DD HH:mm:ss',
      }"
      label="时间选择器"
      tip="时间选择器"
      required
      pickerType="datetime-picker"
      placeholder="请选择"
    />
  </div>
</template>

<script>
import H3FieldPicker from '@/components/h3-field-picker/';

function ajax (url, fnSuccess, fnFaild) {
  const oAjax = new XMLHttpRequest();
  oAjax.open('GET', url, true);
  oAjax.send();
  oAjax.onreadystatechange = function () {
    if (oAjax.readyState === 4) {
      if (oAjax.status === 200) {
        try {
          fnSuccess(JSON.parse(oAjax.responseText));
        } catch (e) {
          fnFaild(oAjax.responseText);
        }
      } else {
        if (fnFaild) {
          fnFaild(oAjax.responseText);
        }
      }
    }
  };
}

export default {
  name: 'FieldPicker',
  components: {
    H3FieldPicker,
  },
  data () {
    return {
      source: () =>
        new Promise((resolve, reject) => {
          ajax('https://static-test.cdn.h3yun.com/lib/v1/pct.min.json', resolve, reject);
        }),
      pickervalue: ['华为', '小米1'],
      pickervalue2: ['3'],
      pickervalue3: ['china', 'china001', 'sz'],
      pickervalue4: [],
      pickervalue5: '',
      list0: [
        [
          { label: '小米', value: '1' },
          { label: 'iPhone', value: '2' },
          { label: '华为', value: '3' },
          { label: '情怀', value: '4' },
          { label: '三星', value: '5' },
          { label: '其他', value: '6' },
        ],
      ],
      list1: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],
      list2: [
        ['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'],
        ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7'],
      ],
      list3: [
        {
          label: '中国',
          value: 'china',
          parent: 0,
        },
        {
          label: '中国2',
          value: 'china1',
          parent: 0,
        },
        {
          label: '美国',
          value: 'USA',
          parent: 0,
        },
        {
          label: '广东',
          value: 'china001',
          parent: 'china',
        },
        {
          label: '广西',
          value: 'china002',
          parent: 'china',
        },
        {
          label: '美国001',
          value: 'usa001',
          parent: 'USA',
        },
        {
          label: '美国002',
          value: 'usa002',
          parent: 'USA',
        },
        {
          label: '广州',
          value: 'gz',
          parent: 'china001',
        },
        {
          label: '广州2',
          value: 'gz2',
          parent: 'china001',
        },
        {
          label: '深圳',
          value: 'sz',
          parent: 'china001',
        },
        {
          label: '广西001',
          value: 'gx001',
          parent: 'china002',
        },
        {
          label: '广西002',
          value: 'gx002',
          parent: 'china002',
        },
        {
          label: '美国001_001',
          value: '0003',
          parent: 'usa001',
        },
        {
          label: '美国001_002',
          value: '0004',
          parent: 'usa001',
        },
        {
          label: '美国002_001',
          value: '0005',
          parent: 'usa002',
        },
        {
          label: '美国002_002',
          value: '0006',
          parent: 'usa002',
        },
      ],
      list4: [
        {
          label: '中国',
          value: 'china',
          parent: 0,
          children: [
            {
              label: '广东',
              value: 'china001',
              parent: 'china',
              children: [
                {
                  label: '广州',
                  value: 'gz',
                  parent: 'china001',
                },
                {
                  label: '广州2',
                  value: 'gz2',
                  parent: 'china001',
                },
                {
                  label: '深圳',
                  value: 'sz',
                  parent: 'china001',
                },
              ],
            },
            {
              label: '广西',
              value: 'china002',
              parent: 'china',
              children: [
                {
                  label: '广西001',
                  value: 'gx001',
                  parent: 'china002',
                },
                {
                  label: '广西002',
                  value: 'gx002',
                  parent: 'china002',
                },
              ],
            },
          ],
        },
        {
          label: '中国2',
          value: 'china1',
          parent: 0,
        },
        {
          label: '美国',
          value: 'USA',
          parent: 0,
          children: [
            {
              label: '美国001',
              value: 'usa001',
              parent: 'USA',
              children: [
                {
                  label: '美国001_001',
                  value: '0003',
                  parent: 'usa001',
                },
                {
                  label: '美国001_002',
                  value: '0004',
                  parent: 'usa001',
                },
              ],
            },
            {
              label: '美国002',
              value: 'usa002',
              parent: 'USA',
              children: [
                {
                  label: '美国002_001',
                  value: '0005',
                  parent: 'usa002',
                },
                {
                  label: '美国002_002',
                  value: '0006',
                  parent: 'usa002',
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

<style scoped>
p {
  margin: 10px 0;
  font-size: 14px;
}
</style>

与h3-mobile-vue组件的区别以及迁移

新组件，通过梳理h3-datetime 及h3-area-selector(弃用)，发现代码存在重复问题，但表现的结果是一致，就是h3-field表单项组件结合h3-picker式的组件。因此通过抽离逻辑和复用组件后，新增了h3-field-picker组件

API

Prop

属性	说明	类型	默认值
value	pickerType所对应的组件中value, 也是v-model的绑定值	String| Number| Array| Date	-
friendly	是否友好展示，即展示对应数据的label	Boolean	false
format	对显示值格式化	function	value => Array.isArray(value) ? value.join(',') : value
placeholder	占位文本	string	''
label	表单项标题	string	''
tip	表单项提示	string	''
required	是否必填	boolean	false
readonly	是否只读	boolean	false
layout	布局方向，可选值：horizontal | vertical	string	'horizontal'
contentAlign	内容对齐方式，可选值：top | center	string	'top'
pickerType	组件内picker实际组件类型，可选值：picker | cascade-picker |area-picker| datetime-picker	string	'picker'
pickerProps	组件内picker实际组件的prop，除了visiable value外的prop pickerType="picker"，参考h3-picker pickerType="cascade-picker"，参考h3-cascade-picker pickerType="area-picker"，参考h3-area-picker pickerType="datetime-picker"，参考h3-datetime-picker	object	{}

Event

事件名	说明	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	-
hide	关闭时回调	-
select	当点击确认按钮或清空按钮时的回调	参数参考各个组件描述
cancel	当点击取消按钮及蒙层回调	-
extra	点击第三个按钮回调	-