欢迎光临
我们一直在努力
当前位置：九八云安全 行业资讯 正文

九八云百度小程序教程：cascade 级联

2024-06-14 分类：行业资讯 阅读(19) 评论(0)
  • cascade 级联
    • 属性说明
    • 示例
      • 代码示例

    cascade 级联

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

    属性说明

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

    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扫码

    代码示例

    • SWAN
    • JS
    • CSS
    • JSON
    
 
      

  
    1. <!--四字标题-->
      2. 

  
    2. <smt-cascade
      3. 

  
    3.  range="{{multiArray1}}"
      4. 

  
    4.  label="四字标题"
      5. 

  
    5.  range-key="name"
      6. 

  
    6.  bind:change="change"
      7. 

  
    7.  placeholder="{{['请选择省', '请选择市', '请选择区']}}"
      8. 

  
    8. ></smt-cascade>
      9. 

  
    9. <!--配置无下边框-->
      10. 

  
    10. <smt-cascade
      11. 

  
    11.  range="{{multiArray2}}"
      12. 

  
    12.  label="无下边框""
      13. 

  
    13.  range-key="name"
      14. 

  
    14.  noborder="true"
      15. 

  
    15.  bind:change="change"
      16. 

  
    16. ></smt-cascade>
      17. 

  
    17. <!--配置label-width-->
      18. 

  
    18. <smt-cascade
      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. ></smt-cascade>
      26. 

  
    26. <!--配置tips-->
      27. 

  
    27. <smt-cascade
      28. 

  
    28.  range="{{multiArray4}}"
      29. 

  
    29.  label="配置未点击时提示"
      30. 

  
    30.  range-key="name"
      31. 

  
    31.  bind:change="change"
      32. 

  
    32.  tips="{{['请选择省', '请选择市', '请选择区']}}"
      33. 

  
    33. ></smt-cascade>
      34. 

  
    34. <!--配置回填数据-->
      35. 

  
    35. <smt-cascade
      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. ></smt-cascade>
      43. 

  
    43. <!--配置禁用-->
      44. 

  
    44. <smt-cascade
      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. ></smt-cascade>
      52. 

  
    52. <!--外部样式类-->
      53. 

  
    53. <smt-cascade
      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. ></smt-cascade>
      64.

    赞(0) 打赏
    未经允许不得转载：九八云安全 » 九八云百度小程序教程：cascade 级联
    分享到

    相关推荐

    评论 抢沙发

    取消

    攻防案列