radio.nvue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  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__radio-item">
  8. <u-radio-group
  9. v-model="radiovalue1"
  10. placement="column"
  11. @change="groupChange"
  12. >
  13. <u-radio
  14. :customStyle="{marginBottom: '8px'}"
  15. v-for="(item, index) in radiolist1"
  16. :key="index"
  17. :label="item.name"
  18. :name="item.name"
  19. @change="radioChange"
  20. >
  21. </u-radio>
  22. </u-radio-group>
  23. </view>
  24. </view>
  25. </view>
  26. <view class="u-demo-block">
  27. <text class="u-demo-block__title">自定义形状</text>
  28. <text class="u-block__title">王者荣耀谁最帅?</text>
  29. <view class="u-demo-block__content">
  30. <view class="u-page__radio-item">
  31. <u-radio-group
  32. v-model="radiovalue2"
  33. placement="column"
  34. shape="square"
  35. >
  36. <u-radio
  37. :customStyle="{marginBottom: '8px'}"
  38. v-for="(item, index) in radiolist2"
  39. :key="index"
  40. :label="item.name"
  41. :name="item.name"
  42. >
  43. </u-radio>
  44. </u-radio-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__radio-item">
  53. <u-radio-group
  54. v-model="radiovalue3"
  55. placement="column"
  56. >
  57. <u-radio
  58. :customStyle="{marginBottom: '8px'}"
  59. v-for="(item, index) in radiolist3"
  60. :key="index"
  61. :label="item.name"
  62. :name="item.name"
  63. :disabled="!index"
  64. >
  65. </u-radio>
  66. </u-radio-group>
  67. </view>
  68. </view>
  69. </view>
  70. <view class="u-demo-block">
  71. <text class="u-demo-block__title">纵向排列</text>
  72. <text class="u-block__title">狙击枪用哪个倍镜最好?</text>
  73. <view class="u-demo-block__content">
  74. <view class="u-page__radio-item">
  75. <u-radio-group
  76. v-model="radiovalue4"
  77. placement="column"
  78. :labelDisabled="true"
  79. >
  80. <u-radio
  81. :customStyle="{marginBottom:'8px'}"
  82. v-for="(item, index) in radiolist4"
  83. :key="index"
  84. :label="item.name"
  85. :name="item.name"
  86. >
  87. </u-radio>
  88. </u-radio-group>
  89. </view>
  90. </view>
  91. </view>
  92. <view class="u-demo-block">
  93. <text class="u-demo-block__title">自定义颜色?</text>
  94. <text class="u-block__title">你比较喜欢下面哪个颜色?</text>
  95. <view class="u-demo-block__content">
  96. <view class="u-page__radio-item">
  97. <u-radio-group
  98. v-model="radiovalue5"
  99. placement="column"
  100. activeColor="#19be6b"
  101. >
  102. <u-radio
  103. :customStyle="{marginBottom: '8px'}"
  104. v-for="(item, index) in radiolist5"
  105. :key="index"
  106. :label="item.name"
  107. :name="item.name"
  108. >
  109. </u-radio>
  110. </u-radio-group>
  111. </view>
  112. </view>
  113. </view>
  114. <view class="u-demo-block">
  115. <text class="u-demo-block__title">横向排列形式?</text>
  116. <text class="u-block__title">王者荣耀哪个英雄最美?</text>
  117. <view class="u-demo-block__content">
  118. <view class="u-page__radio-item">
  119. <u-radio-group
  120. v-model="radiovalue6"
  121. placement="row"
  122. >
  123. <u-radio
  124. :customStyle="{marginRight: '16px'}"
  125. v-for="(item, index) in radiolist6"
  126. :key="index"
  127. :label="item.name"
  128. :name="item.name"
  129. >
  130. </u-radio>
  131. </u-radio-group>
  132. </view>
  133. </view>
  134. </view>
  135. <view class="u-demo-block">
  136. <text class="u-demo-block__title">横向两端排列形式?</text>
  137. <text class="u-block__title">你觉得阿木木可爱吗?</text>
  138. <view>
  139. <view class="u-page__radio-item">
  140. <u-radio-group
  141. v-model="radiovalue7"
  142. :borderBottom="true"
  143. placement="column"
  144. iconPlacement="right"
  145. >
  146. <u-radio
  147. :customStyle="{marginBottom: '16px'}"
  148. v-for="(item, index) in radiolist7"
  149. :key="index"
  150. :label="item.name"
  151. :name="item.name"
  152. >
  153. </u-radio>
  154. </u-radio-group>
  155. </view>
  156. </view>
  157. </view>
  158. </view>
  159. </template>
  160. <script>
  161. export default {
  162. data() {
  163. return {
  164. // 基本案列数据
  165. radiolist1: [{
  166. name: '苹果',
  167. disabled: false
  168. },
  169. {
  170. name: '香蕉',
  171. disabled: false
  172. },
  173. {
  174. name: '橙子',
  175. disabled: false
  176. }, {
  177. name: '榴莲',
  178. disabled: false
  179. }
  180. ],
  181. // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
  182. radiovalue1: '苹果',
  183. // 自定义形状数据
  184. radiolist2: [{
  185. name: '李白',
  186. disabled: false
  187. },
  188. {
  189. name: '韩信',
  190. disabled: false
  191. },
  192. {
  193. name: '马可波罗',
  194. disabled: false
  195. }, {
  196. name: '百里守约',
  197. disabled: false
  198. }
  199. ],
  200. // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
  201. radiovalue2: '李白',
  202. // 是否禁用数据
  203. radiolist3: [{
  204. name: '苹果',
  205. disabled: false
  206. },
  207. {
  208. name: '香蕉',
  209. disabled: false
  210. },
  211. {
  212. name: '菠萝',
  213. disabled: false
  214. }
  215. ],
  216. // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
  217. radiovalue3: '苹果',
  218. // 是否禁止点击提示语选中单选框数据
  219. radiolist4: [{
  220. name: '3倍镜',
  221. disabled: false
  222. },
  223. {
  224. name: '4倍镜',
  225. disabled: false
  226. },
  227. {
  228. name: '6倍镜',
  229. disabled: false
  230. },
  231. {
  232. name: '8倍镜',
  233. disabled: false
  234. }
  235. ],
  236. // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
  237. radiovalue4: '6倍镜',
  238. //自定义颜色数据
  239. radiolist5: [{
  240. name: '红色',
  241. disabled: false
  242. },
  243. {
  244. name: '绿色',
  245. disabled: false
  246. },
  247. {
  248. name: '蓝色',
  249. disabled: false
  250. },
  251. {
  252. name: '黄色',
  253. disabled: false
  254. }
  255. ],
  256. // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
  257. radiovalue5: '绿色',
  258. //横向排列形式数据
  259. radiolist6: [{
  260. name: '妲己',
  261. disabled: false
  262. },
  263. {
  264. name: '虞姬',
  265. disabled: false
  266. },
  267. {
  268. name: '不知火舞',
  269. disabled: false
  270. },
  271. ],
  272. // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
  273. radiovalue6: '妲己',
  274. //横向两端排列形式数据
  275. radiolist7: [{
  276. name: '可爱',
  277. disabled: false
  278. },
  279. {
  280. name: '一般',
  281. disabled: false
  282. },
  283. {
  284. name: '不可爱',
  285. disabled: false
  286. },
  287. ],
  288. // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
  289. radiovalue7: '可爱',
  290. }
  291. },
  292. watch: {
  293. radiovalue1(newValue, oldValue) {
  294. console.log('v-model', newValue);
  295. }
  296. },
  297. methods: {
  298. groupChange(n) {
  299. console.log('groupChange', n);
  300. },
  301. radioChange(n) {
  302. console.log('radioChange', n);
  303. }
  304. }
  305. }
  306. </script>
  307. <style lang="scss">
  308. .u-page {
  309. &__style {
  310. font-size: 16px;
  311. color: rgb(96, 98, 102);
  312. margin-bottom: 20rpx;
  313. font-weight: bold;
  314. }
  315. &__title {
  316. font-size: 16px;
  317. color: rgb(96, 98, 102);
  318. margin-bottom: 20rpx;
  319. }
  320. }
  321. </style>