Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 3 additions & 11 deletions packages/devui-vue/devui/radio/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,14 @@ import type { App } from 'vue';
import Radio from './src/radio';
import RadioGroup from './src/radio-group';

Radio.install = function(app: App) {
app.component(Radio.name, Radio);
};

RadioGroup.install = function(app: App) {
app.component(RadioGroup.name, RadioGroup);
};

export { Radio, RadioGroup };

export default {
title: 'Radio 单选框',
category: '数据录入',
status: '100%',
install(app: App): void {
app.use(Radio as any);
app.use(RadioGroup as any);
}
app.component(Radio.name, Radio);
app.component(RadioGroup.name, RadioGroup);
},
};
11 changes: 5 additions & 6 deletions packages/devui-vue/devui/radio/src/radio-group.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default defineComponent({
name: toRef(props, 'name'),
disabled: toRef(props, 'disabled'),
beforeChange: props.beforeChange,
emitChange
emitChange,
});
},
render() {
Expand Down Expand Up @@ -54,12 +54,11 @@ export default defineComponent({
'devui-radio-group',
{
'is-row': direction === 'row',
'is-column': direction === 'column'
}
]}
>
'is-column': direction === 'column',
},
]}>
{getContent()}
</div>
);
}
},
});
8 changes: 2 additions & 6 deletions packages/devui-vue/devui/radio/src/radio.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,7 @@
.devui-radio-material-inner {
opacity: 1;
transform: scale(1);
transition:
transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
}

Expand Down Expand Up @@ -83,9 +81,7 @@
opacity: 0;
transform: scale(0);
transform-origin: 50% 50%;
transition:
transform 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06),
opacity 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
transition: transform 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06), opacity 200ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
fill: $devui-icon-fill-active;
}

Expand Down
33 changes: 13 additions & 20 deletions packages/devui-vue/devui/radio/src/radio.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default defineComponent({
});
/** radio 的 name 属性 */
const radioName = computed(() => {
return radioGroupConf ? radioGroupConf.name.value : props.name;
return radioGroupConf ? radioGroupConf.name.value : props.name || void 0;
});

/** 判断是否允许切换 */
Expand Down Expand Up @@ -59,45 +59,38 @@ export default defineComponent({
radioGroupConf?.emitChange(_value); // 触发父组件的change
emit('update:modelValue', _value);
emit('change', _value);
}
},
};
},
render() {
const {
disabled,
radioName,
value,
isChecked,
$slots,
handleChange
} = this;
const { disabled, radioName, value, isChecked, $slots, handleChange } = this;
const labelCls = [
'devui-radio',
{
active: isChecked,
disabled
}
disabled,
},
];

return (
<label class={labelCls}>
<input
type="radio"
type='radio'
name={radioName}
class="devui-radio-input"
class='devui-radio-input'
disabled={disabled}
onChange={handleChange}
value={value}
checked={isChecked}
/>
<span class="devui-radio-material">
<svg height="100%" width="100%" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<circle class="devui-radio-material-outer" cx="512" cy="512" r="486.5" stroke-width="51" />
<circle class="devui-radio-material-inner" cx="512" fill-rule="nonzero" cy="512" r="320" />
<span class='devui-radio-material'>
<svg height='100%' width='100%' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'>
<circle class='devui-radio-material-outer' cx='512' cy='512' r='486.5' stroke-width='51' />
<circle class='devui-radio-material-inner' cx='512' fill-rule='nonzero' cy='512' r='320' />
</svg>
</span>
<span class="devui-radio-label">{$slots.default?.()}</span>
<span class='devui-radio-label'>{$slots.default?.()}</span>
</label>
);
}
},
});