×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：cascade级联

cascade 级联

解释：多级选择组件，为开发者提供级联选择功能，默认为三级。比如：省/市/区。该组件包括左侧标签栏，以及右侧多个 picker（从底部弹起的滚动选择器）。支持配置左侧标签宽度，并提供自定义样式，可供开发者进行定制。

成都创新互联公司成立于2013年，先为赤壁等服务建站，赤壁等地企业，进行企业商务咨询服务。为赤壁企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

属性说明

属性名 类型 必填 默认值 说明

range

Array

是

多级 picker 的内容数组，需要传入二维数组，格式为[[],[],[]]

range-key

String

是

当 range 中的一维数组为[{ range-key : value }]时， range-key 对应的 value 为选择器显示的内容

label-width

String

否

4em

左侧文字宽度，须包含单位，例如 em 、 px 、 rpx 、 vw 、 vh … 默认为 4 字宽度 4em ( 72px )，6 字宽度为 6em ，建议用 em，可以适配

label

String

否

左侧文字描述

placeholder

Array

否

[]

picker 没值时默认显示

value

Array

否

[]

picker 选中时的数组下标

change-label-color

Boolean

否

false

是否需要更改组件左侧标签的颜色

label-color

String

否

#c40311

change-lable-color 为 true 时的颜色值

disabled

Boolean

否

false

未选择第一/二级 picker ，而直接选择其余 picker 时，是否展示禁用

tips

Array

否

[]

未按顺序选择第一、二、三级 picker 时，分别弹出tips[0]、tips[1]的提示

noborder

Boolean

否

false

整个组件外侧是否有下边框线

change

EventHandle

否

每一级 picker 选择时，触发 change 事件

cascade-picker

String

否

级联组件的外部样式类，可用于修改组件最外层样式

cascade-label

String

否

级联组件的外部样式类，可用于修改组件左侧标签样式

cascade-content

String

否

级联组件的外部样式类，可用于修改组件右侧单行 picker 的样式

cascade-picker-content

String

否

级联组件的外部样式类，可用于修改 picker 内容展示样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
    3. 
  
  
  
  3.  range="{{multiArray1}}"
    4. 
  
  
  
  4.  label="四字标题"
    5. 
  
  
  
  5.  range-key="name"
    6. 
  
  
  
  6.  bind:change="change"
    7. 
  
  
  
  7.  placeholder="{{['请选择省', '请选择市', '请选择区']}}"
    8. 
  
  
  
  8. >
    9. 
  
  
  
    10. 
  
  
  
    11. 
  
  
  
  11.  range="{{multiArray2}}"
    12. 
  
  
  
  12.  label="无下边框""
    13. 
  
  
  
  13.  range-key="name"
    14. 
  
  
  
  14.  noborder="true"
    15. 
  
  
  
  15.  bind:change="change"
    16. 
  
  
  
  16. >
    17. 
  
  
  
    18. 
  
  
  
    19. 
  
  
  
  19.  range="{{multiArray3}}"
    20. 
  
  
  
  20.  label="六字标题排版"
    21. 
  
  
  
  21.  range-key="name"
    22. 
  
  
  
  22.  label-width="6em"
    23. 
  
  
  
  23.  bind:change="change"
    24. 
  
  
  
  24.  placeholder="{{['请选择省', '请选择市', '请选择区']}}"
    25. 
  
  
  
  25. >
    26. 
  
  
  
    27. 
  
  
  
    28. 
  
  
  
  28.  range="{{multiArray4}}"
    29. 
  
  
  
  29.  label="配置未点击时提示"
    30. 
  
  
  
  30.  range-key="name"
    31. 
  
  
  
  31.  bind:change="change"
    32. 
  
  
  
  32.  tips="{{['请选择省', '请选择市', '请选择区']}}"
    33. 
  
  
  
  33. >
    34. 
  
  
  
    35. 
  
  
  
    36. 
  
  
  
  36.  range="{{multiArray5}}"
    37. 
  
  
  
  37.  label="回填"
    38. 
  
  
  
  38.  value="{{[1, 2, 1]}}"
    39. 
  
  
  
  39.  range-key="name"
    40. 
  
  
  
  40.  bind:change="change"
    41. 
  
  
  
  41.  placeholder="{{['请选择省', '请选择市', '请选择区']}}"
    42. 
  
  
  
  42. >
    43. 
  
  
  
    44. 
  
  
  
    45. 
  
  
  
  45.  range="{{multiArray6}}"
    46. 
  
  
  
  46.  label="禁用型"
    47. 
  
  
  
  47.  range-key="name"
    48. 
  
  
  
  48.  disabled
    49. 
  
  
  
  49.  bind:change="change"
    50. 
  
  
  
  50.  placeholder="{{['请选择省', '请选择市', '请选择区']}}"
    51. 
  
  
  
  51. >
    52. 
  
  
  
    53. 
  
  
  
    54. 
  
  
  
  54.  range="{{multiArray7}}"
    55. 
  
  
  
  55.  label="externalClasses"
    56. 
  
  
  
  56.  cascade-picker="cascade-picker"
    57. 
  
  
  
  57.  cascade-label="cascade-label"
    58. 
  
  
  
  58.  cascade-content="cascade-content"
    59. 
  
  
  
  59.  cascade-picker-content="cascade-picker-content"
    60. 
  
  
  
  60.  range-key="name"
    61. 
  
  
  
  61.  bind:change="change"
    62. 
  
  
  
  62.  placeholder="{{['请选择省', '请选择市', '请选择区']}}"
    63. 
  
  
  
  63. >
    64.

文章标题：创新互联百度小程序教程：cascade级联
本文地址：http://cdbrznjsb.com/article/cooogjj.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务