checkbox.nvue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基本案例</text>
  5. <text class="u-block__title">苹果、香蕉和橙子哪个最甜?</text>
  6. <view class="u-demo-block__content">
  7. <view class="u-page__checkbox-item">
  8. <u-checkbox-group
  9. v-model="checkboxValue1"
  10. placement="column"
  11. @change="checkboxChange"
  12. >
  13. <u-checkbox
  14. :customStyle="{marginBottom: '8px'}"
  15. v-for="(item, index) in checkboxList1"
  16. :key="index"
  17. :label="item.name"
  18. :name="item.name"
  19. >
  20. </u-checkbox>
  21. </u-checkbox-group>
  22. </view>
  23. </view>
  24. </view>
  25. <view class="u-demo-block">
  26. <text class="u-demo-block__title">自定义形状</text>
  27. <text class="u-block__title">中国四大名著是?</text>
  28. <view class="u-demo-block__content">
  29. <view class="u-page__checkbox-item">
  30. <u-checkbox-group
  31. v-model="checkboxValue2"
  32. placement="column"
  33. @change="checkboxChange"
  34. shape="square"
  35. >
  36. <u-checkbox
  37. :customStyle="{marginBottom: '8px'}"
  38. v-for="(item, index) in checkboxList2"
  39. :key="index"
  40. :label="item.name"
  41. :name="item.name"
  42. >
  43. </u-checkbox>
  44. </u-checkbox-group>
  45. </view>
  46. </view>
  47. </view>
  48. <view class="u-demo-block">
  49. <text class="u-demo-block__title">是否禁用</text>
  50. <text class="u-block__title">下面什么东西不能吃?</text>
  51. <view class="u-demo-block__content">
  52. <view class="u-page__checkbox-item">
  53. <u-checkbox-group
  54. v-model="checkboxValue3"
  55. placement="column"
  56. @change="checkboxChange"
  57. >
  58. <u-checkbox
  59. :customStyle="{marginBottom: '8px'}"
  60. v-for="(item, index) in checkboxList3"
  61. :key="index"
  62. :label="item.name"
  63. :name="item.name"
  64. :disabled="index===0"
  65. >
  66. </u-checkbox>
  67. </u-checkbox-group>
  68. </view>
  69. </view>
  70. </view>
  71. <view class="u-demo-block">
  72. <text class="u-demo-block__title">是否禁止点击提示语选中复选框</text>
  73. <text class="u-block__title">北宋四大家是谁?</text>
  74. <view class="u-demo-block__content">
  75. <view class="u-page__checkbox-item">
  76. <u-checkbox-group
  77. v-model="checkboxValue4"
  78. placement="column"
  79. @change="checkboxChange"
  80. :labelDisabled="true"
  81. >
  82. <u-checkbox
  83. :customStyle="{marginBottom: '8px'}"
  84. v-for="(item, index) in checkboxList4"
  85. :key="index"
  86. :label="item.name"
  87. :name="item.name"
  88. >
  89. </u-checkbox>
  90. </u-checkbox-group>
  91. </view>
  92. </view>
  93. </view>
  94. <view class="u-demo-block">
  95. <text class="u-demo-block__title">自定义颜色</text>
  96. <text class="u-block__title">哪个颜色最好看?</text>
  97. <view class="u-demo-block__content">
  98. <view class="u-page__checkbox-item">
  99. <u-checkbox-group
  100. v-model="checkboxValue5"
  101. placement="column"
  102. @change="checkboxChange"
  103. activeColor="#19be6b"
  104. >
  105. <u-checkbox
  106. :customStyle="{marginBottom: '8px'}"
  107. v-for="(item, index) in checkboxList5"
  108. :key="index"
  109. :label="item.name"
  110. :name="item.name"
  111. >
  112. </u-checkbox>
  113. </u-checkbox-group>
  114. </view>
  115. </view>
  116. </view>
  117. <view class="u-demo-block">
  118. <text class="u-demo-block__title">横向排列形式</text>
  119. <text class="u-block__title">什么东西不能飞?</text>
  120. <view class="u-demo-block__content">
  121. <view class="u-page__checkbox-item">
  122. <u-checkbox-group
  123. v-model="checkboxValue6"
  124. @change="checkboxChange"
  125. >
  126. <u-checkbox
  127. :customStyle="{marginRight: '16px'}"
  128. v-for="(item, index) in checkboxList6"
  129. :key="index"
  130. :label="item.name"
  131. :name="item.name"
  132. >
  133. </u-checkbox>
  134. </u-checkbox-group>
  135. </view>
  136. </view>
  137. </view>
  138. <view class="u-demo-block">
  139. <text class="u-demo-block__title">横向两端排列形式</text>
  140. <text class="u-block__title">什么东西不能吃?</text>
  141. <view>
  142. <view class="u-page__checkbox-item">
  143. <u-checkbox-group
  144. v-model="checkboxValue7"
  145. @change="checkboxChange"
  146. :borderBottom="true"
  147. placement="column"
  148. iconPlacement="right"
  149. >
  150. <u-checkbox
  151. :customStyle="{marginBottom: '16px'}"
  152. v-for="(item, index) in checkboxList7"
  153. :key="index"
  154. :label="item.name"
  155. :name="item.name"
  156. >
  157. </u-checkbox>
  158. </u-checkbox-group>
  159. </view>
  160. </view>
  161. </view>
  162. </view>
  163. </template>
  164. <script>
  165. export default {
  166. data() {
  167. return {
  168. // 基本案列数据
  169. checkboxList1: [{
  170. name: '苹果',
  171. disabled: false
  172. },
  173. {
  174. name: '香蕉',
  175. disabled: false
  176. },
  177. {
  178. name: '橙子',
  179. disabled: false
  180. }
  181. ],
  182. // u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name,就会被默认选中
  183. checkboxValue1: ['苹果', '橙子'],
  184. // 自定义形状数据
  185. checkboxList2: [{
  186. name: '西游记',
  187. disabled: false
  188. },
  189. {
  190. name: '红楼梦',
  191. disabled: false
  192. },
  193. {
  194. name: '三国演义',
  195. disabled: false
  196. },
  197. {
  198. name: '水浒传',
  199. disabled: false
  200. }
  201. ],
  202. // u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name,就会被默认选中
  203. checkboxValue2: ['西游记', '红楼梦', '三国演义', '水浒传'],
  204. // 是否禁用数据
  205. checkboxList3: [{
  206. name: '冬瓜',
  207. disabled: false
  208. },
  209. {
  210. name: '西瓜',
  211. disabled: false
  212. },
  213. {
  214. name: '黄瓜',
  215. disabled: false
  216. },
  217. {
  218. name: '傻瓜',
  219. disabled: false
  220. }
  221. ],
  222. // u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name,就会被默认选中
  223. checkboxValue3: ['傻瓜'],
  224. // 是否禁止点击提示语选中复选框数据
  225. checkboxList4: [{
  226. name: '黄庭坚',
  227. disabled: false
  228. },
  229. {
  230. name: '欧阳修',
  231. disabled: false
  232. },
  233. {
  234. name: '苏小宝',
  235. disabled: false
  236. },
  237. {
  238. name: '王安石',
  239. disabled: false
  240. }
  241. ],
  242. // u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name,就会被默认选中
  243. checkboxValue4: ['黄庭坚', '欧阳修', '王安石'],
  244. //自定义颜色数据
  245. checkboxList5: [{
  246. name: '红色',
  247. disabled: false
  248. },
  249. {
  250. name: '黄色',
  251. disabled: false
  252. },
  253. {
  254. name: '绿色',
  255. disabled: false
  256. },
  257. {
  258. name: '蓝色',
  259. disabled: false
  260. }
  261. ],
  262. // u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name,就会被默认选中
  263. checkboxValue5: ['绿色'],
  264. //横向排列形式数据
  265. checkboxList6: [{
  266. name: '小鸟',
  267. disabled: false
  268. },
  269. {
  270. name: '游艇',
  271. disabled: false
  272. },
  273. {
  274. name: '轮船',
  275. disabled: false
  276. },
  277. {
  278. name: '飞机',
  279. disabled: false
  280. }
  281. ],
  282. // u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name,就会被默认选中
  283. checkboxValue6: ['游艇', '轮船'],
  284. //横向两端排列形式
  285. checkboxList7: [{
  286. name: '汽车',
  287. disabled: false
  288. },
  289. {
  290. name: '蒸汽机',
  291. disabled: false
  292. },
  293. {
  294. name: '猪肉',
  295. disabled: false
  296. },
  297. {
  298. name: '抄手',
  299. disabled: false
  300. }
  301. ],
  302. // u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name,就会被默认选中
  303. checkboxValue7: ['汽车', '蒸汽机'],
  304. }
  305. },
  306. watch: {
  307. checkboxValue1(newValue, oldValue) {
  308. // console.log('v-model', newValue);
  309. }
  310. },
  311. methods: {
  312. checkboxChange(n) {
  313. // console.log('change', n);
  314. }
  315. }
  316. }
  317. </script>
  318. <style lang="scss">
  319. .u-page {}
  320. </style>