随笔 - 2649  文章 - 2452  评论 - 0  阅读 - 80424

showPick 原生picker组件

showPick ^7.8

配置pick view

#请求参数

Prop Type Default Comment
params Object N/A 看示例吧

#接口调用示例

const params = {
  type: 0, // 0普通,1cascade,2date,3time,4weness,
  headTitle: '标题',
  titleColor: '#2a5caa', // '标题颜色',
  titleBgColor: '#ef5b9c', // '标题背景颜色',
  subTitle: '子标题',
  subTitleColor: '', // '子标题颜色',
  subTitleBgColor: '', // '子标题背景颜色',
  cancleBgColor: '#8a5d19', // 取消按钮颜色
  confirmBgColor: '#8c531b', // 确认按钮颜色
  cancleHightColor: '', // 取消按钮高亮颜色
  confirmHightColor: '', // 确认按钮高亮颜色
  btnLineColor: '', // 取消和确定按钮之间竖线颜色
  spaceColor: '', // '间距颜色',
  cancelTxt: '取消文本',
  confirmTxt: '确认文本',
  cancelTxtColor: '', // '取消文本颜色',
  confirmTxtColor: '', // '确认文本颜色',
  // picker 样式---------
  cornerRadius: true, // 是否边框圆角
  columnRatios: [], //所有列的宽度比例,该属性对日期picker类型无效,其他类型生效,格式[3,2,3],数组类型
  textColor: '#2a5caa', //'选中的字体颜色',
  backgroundColor: 'red', // picker背景色
  dividerColor: '', // 分割线颜色
  value: '2021-03-01', // 如果是日期picker类型则传值,格式:"2021-03-01",普通类型picker无值
  min: '1900-01-01', //如果是日期picker类型则传值,格式:"1900-01-01",普通类型picker无值
  max: '2090-03-01', //如果是日期picker类型则传值,格式:"2090-03-01",普通类型picker无值
  itemMaps: [
    // itemMaps(联动类型) 与 wheelList 取其一,itemMap优先级高
    //注意://联动类型有值,其他类型无值
    { id: 1, pId: 0, name: '北京' },
    { id: 11, pId: 1, name: '北京2' },
    { id: 21, pId: 11, name: '北京3' },
  ],
  selectedRowBgColor: '#FAFAFA', //当前选中行的背景色
  wheelList: [
    // 普通类型
    {
      index: 0, // 每列默认显示位置
      isLoop: false, // 是否循环显示
      label: '单位名字',
      labelTextColor: '', //单位颜色
      labelTextSize: '', // 单位字体大小
      normalTextSize: '', // 字体大小
      textSize: '', // 选中字体大小
      selectedTextSize: '', // 选中字体大小
      //每列单位规则
      ruleList: [
        {
          text: '',
          textColor: '', // 每列单位字体颜色,
          min: '', // 最小值,
          max: '', //最大值
        },
      ],
      itemList: [
        {
          id: '0', // 每行id
          name: '每行内容',
          pid: '0', //每行父id
        },
      ],
    },
    {
      index: 0, // 每列默认显示位置
      isLoop: false, // 是否循环显示
      label: '单位名字',
      labelTextColor: '', //单位颜色
      labelTextSize: '', // 单位字体大小
      normalTextSize: '', // 字体大小
      textSize: '', // 选中字体大小
      selectedTextSize: '', // 选中字体大小
      //每列单位规则
      ruleList: [
        {
          text: '',
          textColor: '', // 每列单位字体颜色,
          min: '', // 最小值,
          max: '', //最大值
        },
      ],
      itemList: [
        {
          id: '0', // 每行id
          name: '你好',
          pid: '0', //每行父id
        },
      ],
    },
  ],
}
this.$bridge
  .showPick(params)
  .then(res => {
    this.$alert(res)
  })
  .catch(err => {
    this.$toast(err)
  })

#接口返回示例

N/A
posted on   AtlasLapetos  阅读(2)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示