Collapse

Collapse 折叠面板。

组件结构

  1. <template>
  2. <viewclass="tui-collapse" :style="{backgroundColor:bgColor}">
  3. <viewclass="tui-collapse-head" :style="{backgroundColor:hdBgColor}" @tap.stop="handleClick">
  4. <viewclass="tui-header" :class="{'tui-opacity':disabled}">
  5. <slotname="title"></slot>
  6. <viewclass="tui-collapse-icon tui-icon-arrow" :class="{'tui-icon-active':isOpen}" :style="{color:arrowColor}"v-if="arrow"></view>
  7. </view>
  8. </view>
  9. <viewclass="tui-collapse-body" :style="{backgroundColor:bdBgColor,transform: isOpen ?'translateY(0)':`translateY(${translateY})`,height:isOpen?height:'0'}">
  10. <slotname="content"></slot>
  11. </view>
  12. </view>
  13. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiCollapse",
  4. props:{
  5. //collapse背景颜色
  6. bgColor:{
  7. type:String,
  8. default:'none'
  9. },
  10. //collapse-head 背景颜色
  11. hdBgColor:{
  12. type:String,
  13. default:'#fff'
  14. },
  15. //collapse-body 背景颜色
  16. bdBgColor:{
  17. type:String,
  18. default:'none'
  19. },
  20. //collapse-body实际高度 open时使用
  21. height:{
  22. type:String,
  23. default:'auto'
  24. },
  25. //close时translateY ,当bd高度固定时,建议值为0
  26. translateY:{
  27. type:String,
  28. default:'-50%'
  29. },
  30. //索引
  31. index:{
  32. type:Number,
  33. default:0
  34. },
  35. //当前索引,index==current时展开
  36. current:{
  37. type:Number,
  38. default:-1
  39. },
  40. // 是否禁用
  41. disabled:{
  42. type:[Boolean,String],
  43. default:false
  44. },
  45. //是否带箭头
  46. arrow:{
  47. type:[Boolean,String],
  48. default:true
  49. },
  50. //箭头颜色
  51. arrowColor:{
  52. type:String,
  53. default:"#333"
  54. }
  55. },
  56. watch:{
  57. current(){
  58. this.updateCurrentChange()
  59. }
  60. },
  61. created(){
  62. this.updateCurrentChange()
  63. },
  64. data(){
  65. return{
  66. isOpen:false
  67. };
  68. },
  69. methods:{
  70. updateCurrentChange(){
  71. this.isOpen =this.index ==this.current
  72. },
  73. handleClick(){
  74. if(this.disabled)return;
  75. this.$emit("click",{
  76. index:Number(this.index)
  77. })
  78. }
  79. }
  80. }
  81. </script>

组件样式

... 此处省略n行

脚本说明

props

参数类型描述默认值
bgColorStringcollapse背景颜色none
hdBgColorStringcollapse-head 背景颜色#fff
bdBgColorStringcollapse-body 背景颜色none
heightStringcollapse-body实际高度 open时使用auto
translateYStringclose时translateY ,当bd高度固定时,建议值为0-50%
indexNumber当前折叠面板在列表中的索引0
currentNumber当前索引,index==current时展开-1
disabled[Boolean, String]是否禁用false
arrow[Boolean, String]是否带箭头true
arrowColorString箭头颜色#333

methods

名称描述
updateCurrentChange更新折叠面板状态
handleClick切换点击事件

示例

... 此处省略n行,下载源码查看

预览图

collapse 折叠面板 - 图1