c-picker-panel

从底部弹起的控制板。

示例

  1. <template>
  2.   <view>
  3.     <text class="select-text" c-bind:tap="showClick">点击选择：{{provins[provinsIndex]}}</text>
  4.     <c-picker-panel
  5.       show="{{panelShow}}"
  6.       header-height="{{100}}"
  7.       c-bind:cancel="cancel"
  8.       c-bind:confirm="confirm"
  9.     >
  10.       <c-picker-item
  11.         text-align="center"
  12.         height="{{400}}"
  13.         list="{{provins}}"
  14.         default-index="{{defaultIndex}}"
  15.         c-bind:selectchange="selectchange"
  16.       >
  17.       </c-picker-item>
  18.     </c-picker-panel>
  19.   </view>
  20. </template>
  21. <script>
  22. class Index {
  23.   data = {
  24.     headerTitle: "c-picker-item",
  25.     headerDesc: "c-picker-item组件",
  26.     provins: [
  27.       "北京市",
  28.       "天津市",
  29.       "河北省",
  30.       "山西省",
  31.       "内蒙古",
  32.       "辽宁省",
  33.       "吉林省",
  34.       "黑龙江省",
  35.       "上海市",
  36.       "江苏省",
  37.       "浙江省",
  38.       "安徽省",
  39.       "福建省",
  40.       "江西省",
  41.       "山东省",
  42.       "河南省",
  43.       "湖北省",
  44.       "湖南省",
  45.       "广东省",
  46.       "广西",
  47.       "海南省",
  48.       "重庆市",
  49.       "四川省",
  50.       "贵州省",
  51.       "云南省",
  52.       "西藏",
  53.       "陕西省",
  54.       "甘肃省",
  55.       "青海",
  56.       "宁夏",
  57.       "新疆"
  58.     ],
  59.     defaultIndex: 0,
  60.     provinsIndex: 0,
  61.     panelShow: false
  62.   }
  63.   methods = {
  64.     selectchange(e) {
  65.       this.provinsIndex = this.defaultIndex = e.detail.index;
  66.     },
  67.     showClick() {
  68.       this.panelShow = true;
  69.     },
  70.     cancel() {
  71.       this.panelShow = false;
  72.     },
  73.     confirm() {
  74.       this.panelShow = false;
  75.     }
  76.   }
  77. };
  78. export default new Index();
  79. </script>
  80. <style scoped>
  81. .select-text {
  82.   font-size: 32cpx;
  83.   text-align: center;
  84. }
  85. </style>
  86. <script cml-type="json">
  87. {
  88.   "base": {
  89.     "usingComponents": {
  90.       "c-picker-panel": "cml-ui/components/c-picker-panel/c-picker-panel",
  91.       "c-picker-item": "cml-ui/components/c-picker-item/c-picker-item"
  92.     }
  93.   }
  94. }
  95. </script>