123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330 |
- <template>
- <view class="u-page">
- <view class="u-demo-block">
- <text class="u-demo-block__title">基本案例</text>
- <text class="u-block__title">苹果、香蕉和橙子哪个最甜?</text>
- <view class="u-demo-block__content">
- <view class="u-page__radio-item">
- <u-radio-group
- v-model="radiovalue1"
- placement="column"
- @change="groupChange"
- >
- <u-radio
- :customStyle="{marginBottom: '8px'}"
- v-for="(item, index) in radiolist1"
- :key="index"
- :label="item.name"
- :name="item.name"
- @change="radioChange"
- >
- </u-radio>
- </u-radio-group>
- </view>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">自定义形状</text>
- <text class="u-block__title">王者荣耀谁最帅?</text>
- <view class="u-demo-block__content">
- <view class="u-page__radio-item">
- <u-radio-group
- v-model="radiovalue2"
- placement="column"
- shape="square"
- >
- <u-radio
- :customStyle="{marginBottom: '8px'}"
- v-for="(item, index) in radiolist2"
- :key="index"
- :label="item.name"
- :name="item.name"
- >
- </u-radio>
- </u-radio-group>
- </view>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">是否禁用</text>
- <text class="u-block__title">苹果、香蕉和菠萝哪个最甜?</text>
- <view class="u-demo-block__content">
- <view class="u-page__radio-item">
- <u-radio-group
- v-model="radiovalue3"
- placement="column"
- >
- <u-radio
- :customStyle="{marginBottom: '8px'}"
- v-for="(item, index) in radiolist3"
- :key="index"
- :label="item.name"
- :name="item.name"
- :disabled="!index"
- >
- </u-radio>
- </u-radio-group>
- </view>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">纵向排列</text>
- <text class="u-block__title">狙击枪用哪个倍镜最好?</text>
- <view class="u-demo-block__content">
- <view class="u-page__radio-item">
- <u-radio-group
- v-model="radiovalue4"
- placement="column"
- :labelDisabled="true"
- >
- <u-radio
- :customStyle="{marginBottom:'8px'}"
- v-for="(item, index) in radiolist4"
- :key="index"
- :label="item.name"
- :name="item.name"
- >
- </u-radio>
- </u-radio-group>
- </view>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">自定义颜色?</text>
- <text class="u-block__title">你比较喜欢下面哪个颜色?</text>
- <view class="u-demo-block__content">
- <view class="u-page__radio-item">
- <u-radio-group
- v-model="radiovalue5"
- placement="column"
- activeColor="#19be6b"
- >
- <u-radio
- :customStyle="{marginBottom: '8px'}"
- v-for="(item, index) in radiolist5"
- :key="index"
- :label="item.name"
- :name="item.name"
- >
- </u-radio>
- </u-radio-group>
- </view>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">横向排列形式?</text>
- <text class="u-block__title">王者荣耀哪个英雄最美?</text>
- <view class="u-demo-block__content">
- <view class="u-page__radio-item">
- <u-radio-group
- v-model="radiovalue6"
- placement="row"
- >
- <u-radio
- :customStyle="{marginRight: '16px'}"
- v-for="(item, index) in radiolist6"
- :key="index"
- :label="item.name"
- :name="item.name"
- >
- </u-radio>
- </u-radio-group>
- </view>
- </view>
- </view>
- <view class="u-demo-block">
- <text class="u-demo-block__title">横向两端排列形式?</text>
- <text class="u-block__title">你觉得阿木木可爱吗?</text>
- <view>
- <view class="u-page__radio-item">
- <u-radio-group
- v-model="radiovalue7"
- :borderBottom="true"
- placement="column"
- iconPlacement="right"
- >
- <u-radio
- :customStyle="{marginBottom: '16px'}"
- v-for="(item, index) in radiolist7"
- :key="index"
- :label="item.name"
- :name="item.name"
- >
- </u-radio>
- </u-radio-group>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- // 基本案列数据
- radiolist1: [{
- name: '苹果',
- disabled: false
- },
- {
- name: '香蕉',
- disabled: false
- },
- {
- name: '橙子',
- disabled: false
- }, {
- name: '榴莲',
- disabled: false
- }
- ],
- // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
- radiovalue1: '苹果',
- // 自定义形状数据
- radiolist2: [{
- name: '李白',
- disabled: false
- },
- {
- name: '韩信',
- disabled: false
- },
- {
- name: '马可波罗',
- disabled: false
- }, {
- name: '百里守约',
- disabled: false
- }
- ],
- // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
- radiovalue2: '李白',
- // 是否禁用数据
- radiolist3: [{
- name: '苹果',
- disabled: false
- },
- {
- name: '香蕉',
- disabled: false
- },
- {
- name: '菠萝',
- disabled: false
- }
- ],
- // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
- radiovalue3: '苹果',
- // 是否禁止点击提示语选中单选框数据
- radiolist4: [{
- name: '3倍镜',
- disabled: false
- },
- {
- name: '4倍镜',
- disabled: false
- },
- {
- name: '6倍镜',
- disabled: false
- },
- {
- name: '8倍镜',
- disabled: false
- }
- ],
- // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
- radiovalue4: '6倍镜',
- //自定义颜色数据
- radiolist5: [{
- name: '红色',
- disabled: false
- },
- {
- name: '绿色',
- disabled: false
- },
- {
- name: '蓝色',
- disabled: false
- },
- {
- name: '黄色',
- disabled: false
- }
- ],
- // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
- radiovalue5: '绿色',
- //横向排列形式数据
- radiolist6: [{
- name: '妲己',
- disabled: false
- },
- {
- name: '虞姬',
- disabled: false
- },
- {
- name: '不知火舞',
- disabled: false
- },
- ],
- // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
- radiovalue6: '妲己',
- //横向两端排列形式数据
- radiolist7: [{
- name: '可爱',
- disabled: false
- },
- {
- name: '一般',
- disabled: false
- },
- {
- name: '不可爱',
- disabled: false
- },
- ],
- // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
- radiovalue7: '可爱',
- }
- },
- watch: {
- radiovalue1(newValue, oldValue) {
- console.log('v-model', newValue);
- }
- },
- methods: {
- groupChange(n) {
- console.log('groupChange', n);
- },
- radioChange(n) {
- console.log('radioChange', n);
- }
- }
- }
- </script>
- <style lang="scss">
- .u-page {
- &__style {
- font-size: 16px;
- color: rgb(96, 98, 102);
- margin-bottom: 20rpx;
- font-weight: bold;
- }
- &__title {
- font-size: 16px;
- color: rgb(96, 98, 102);
- margin-bottom: 20rpx;
- }
- }
- </style>
|