You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. ## 插件使用方法:
  2. `<select-lay :value="tval" name="name" :options="datalist" @selectitem="selectitem"></select-lay>`
  3. ## 配置参数:
  4. 属性名|类型|默认值|说明
  5. :--:|:--:|:--:|-
  6. value|String|""|默认展示的value值
  7. name|String|""|input的字段名
  8. zindex|Number|""|层级,默认999,防止多个组件一起使用时下拉栏穿透
  9. slabel|String|label|自定义列表中键值对关系,参考示例
  10. svalue|String|value|自定义列表中键值对关系,该值对应value,参考示例
  11. placeholder|String|请选择|无选项时展示的文字
  12. showplaceholder|Boolean|true|下拉时是否展示请选择按钮
  13. options|Array|无|数据列表
  14. disabled|Boolean|false|是否禁用
  15. ## 事件:
  16. 事件名|说明|返回值
  17. :--:|:--:|-
  18. @selectitem|点击项目触发的事件|参数 (索引,具体项目)
  19. ## 说明:
  20. 此插件依赖scss,请务必安装!!!
  21. ## 示例:
  22. ```
  23. <template>
  24. <view class="content">
  25. <form @submit="formSubmit">
  26. <view class="item">通用写法:</view>
  27. <select-lay :zindex="1211" :value="tval" name="name" placeholder="请选择项目" :options="datalist"
  28. @selectitem="selectitem">
  29. </select-lay>
  30. <view style="height:40rpx"></view>
  31. <view class="item">禁用组件:</view>
  32. <select-lay :zindex="1111" :value="tval2" name="name2" placeholder="请选择项目2" :options="datalist2"
  33. :disabled="true">
  34. </select-lay>
  35. <view style="height:40rpx"></view>
  36. <view class="item">自定义数据索引对象:</view>
  37. <select-lay :value="tval3" name="name3" slabel="myname" svalue="myvalue" placeholder="请选择项目3"
  38. :options="datalist3" @selectitem="selectitem3">
  39. </select-lay>
  40. <view style="height:40rpx"></view>
  41. <view class="item">取消下拉默认展示的提醒按钮</view>
  42. <select-lay :value="tval4" name="name4" placeholder="请选择项目4" :showplaceholder="false" :options="datalist4" @selectitem="selectitem4">
  43. </select-lay>
  44. <button class="btn" form-type="submit">Submit</button>
  45. </form>
  46. </view>
  47. </template>
  48. <script>
  49. export default {
  50. data() {
  51. return {
  52. //模拟数据列表
  53. datalist: [],
  54. //模拟初始数据
  55. tval: "value2",
  56. //模拟数据列表
  57. datalist2: [],
  58. //模拟初始数据
  59. tval2: "2value1",
  60. //模拟数据列表
  61. datalist3: [],
  62. //模拟初始数据
  63. tval3: "myvalue1",
  64. //模拟数据列表
  65. datalist4: [],
  66. //模拟初始数据
  67. tval4: "4value1"
  68. }
  69. },
  70. onReady() {
  71. this.datalist = [{
  72. label: "label1",
  73. value: "value1"
  74. },
  75. {
  76. label: "label2",
  77. value: "value2"
  78. },
  79. {
  80. label: "label3",
  81. value: "value3"
  82. }
  83. ];
  84. this.datalist2 = [{
  85. label: "2label1",
  86. value: "2value1"
  87. },
  88. {
  89. label: "2label2",
  90. value: "2value2"
  91. },
  92. {
  93. label: "2label3",
  94. value: "2value3"
  95. }
  96. ];
  97. this.datalist3 = [{
  98. myname: "我是myname1",
  99. myvalue: "myvalue1"
  100. },
  101. {
  102. myname: "我是myname2",
  103. myvalue: "myvalue2"
  104. },
  105. {
  106. myname: "我是myname3",
  107. myvalue: "myvalue3"
  108. },
  109. {
  110. myname: "我是myname4",
  111. myvalue: "myvalue4"
  112. }
  113. ];
  114. this.datalist4 = [{
  115. label: "4label1",
  116. value: "4value1"
  117. },
  118. {
  119. label: "4label2",
  120. value: "4value2"
  121. },
  122. {
  123. label: "4label3",
  124. value: "4value3"
  125. }
  126. ];
  127. },
  128. methods: {
  129. formSubmit(e) {
  130. console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
  131. },
  132. selectitem(index, item) {
  133. console.log(item)
  134. if (index >= 0) {
  135. this.tval = item.value;
  136. } else {
  137. this.tval = ""
  138. }
  139. },
  140. selectitem3(index, item) {
  141. console.log(item)
  142. if (index >= 0) {
  143. this.tval3 = item.myvalue;
  144. } else {
  145. this.tval3 = ""
  146. }
  147. },
  148. selectitem4(index, item) {
  149. console.log(item)
  150. if (index >= 0) {
  151. this.tval4 = item.value;
  152. } else {
  153. this.tval4 = ""
  154. }
  155. }
  156. }
  157. }
  158. </script>
  159. ```