init
This commit is contained in:
122
uni_modules/nutui-uni/components/radio/index.scss
Normal file
122
uni_modules/nutui-uni/components/radio/index.scss
Normal file
@@ -0,0 +1,122 @@
|
||||
@import "../radiogroup/index";
|
||||
|
||||
.nut-theme-dark {
|
||||
.nut-radio {
|
||||
&__label {
|
||||
color: $dark-color;
|
||||
|
||||
&--disabled {
|
||||
color: $radio-label-disable-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
color: $dark-color;
|
||||
background: $dark-background;
|
||||
|
||||
&--disabled {
|
||||
color: $radio-label-disable-color;
|
||||
border: 1px solid $radio-label-disable-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nut-radio {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&--reverse {
|
||||
.nut-radio__label {
|
||||
margin-right: $radio-label-margin-left;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: $radio-button-padding;
|
||||
font-size: $radio-button-font-size;
|
||||
color: $radio-label-font-color;
|
||||
background: #f6f7f9;
|
||||
border: 1px solid #f6f7f9;
|
||||
border-radius: $radio-button-border-radius;
|
||||
|
||||
&--active {
|
||||
position: relative;
|
||||
color: $radio-label-font-active-color;
|
||||
background: transparent;
|
||||
border: 1px solid $radio-label-button-border-color;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: $radio-label-button-background;
|
||||
border-radius: $radio-button-border-radius;
|
||||
opacity: 0.05;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: $radio-label-disable-color;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&--large {
|
||||
height: $button-large-height;
|
||||
font-size: $button-large-font-size;
|
||||
line-height: $button-large-line-height;
|
||||
}
|
||||
|
||||
&--small {
|
||||
height: $button-small-height;
|
||||
padding: $button-small-padding;
|
||||
font-size: $button-small-font-size;
|
||||
line-height: $button-small-line-height;
|
||||
}
|
||||
|
||||
&--mini {
|
||||
height: $button-mini-height;
|
||||
padding: $button-mini-padding;
|
||||
font-size: $button-mini-font-size;
|
||||
line-height: $button-mini-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: 1;
|
||||
margin-left: $radio-label-margin-left;
|
||||
font-size: $radio-label-font-size;
|
||||
color: $radio-label-font-color;
|
||||
|
||||
&--disabled {
|
||||
color: $radio-label-disable-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
color: $radio-label-font-active-color;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: color, border-color, background-color;
|
||||
}
|
||||
|
||||
&__icon--unchecked {
|
||||
color: $radio-icon-disable-color;
|
||||
}
|
||||
|
||||
&__icon--disable {
|
||||
color: $radio-icon-disable-color2;
|
||||
}
|
||||
}
|
||||
1
uni_modules/nutui-uni/components/radio/index.ts
Normal file
1
uni_modules/nutui-uni/components/radio/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './radio'
|
||||
32
uni_modules/nutui-uni/components/radio/radio.ts
Normal file
32
uni_modules/nutui-uni/components/radio/radio.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import type { ExtractPropTypes } from 'vue'
|
||||
import { commonProps, makeNumericProp, makeStringProp, nullableBooleanProp } from '../_utils'
|
||||
|
||||
export const radioProps = {
|
||||
...commonProps,
|
||||
/**
|
||||
* @description 是否禁用选择
|
||||
*/
|
||||
disabled: nullableBooleanProp,
|
||||
/**
|
||||
* @description 图标尺寸
|
||||
*/
|
||||
iconSize: makeNumericProp(''),
|
||||
/**
|
||||
* @description 单选框标识
|
||||
*/
|
||||
label: {
|
||||
type: [String, Number, Boolean],
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* @description 形状，可选值为 button、round
|
||||
*/
|
||||
shape: makeStringProp<'round' | 'button'>('round'),
|
||||
/**
|
||||
* @description 尺寸，可选值为 `large` `small` `mini` `normal`，仅在 shape 为 `button` 时生效
|
||||
*/
|
||||
size: makeStringProp<'large' | 'normal' | 'small' | 'mini'>('normal'),
|
||||
}
|
||||
|
||||
export type RadioProps = ExtractPropTypes<typeof radioProps>
|
||||
export const RADIO_KEY = Symbol('nut-radio')
|
||||
119
uni_modules/nutui-uni/components/radio/radio.vue
Normal file
119
uni_modules/nutui-uni/components/radio/radio.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, defineComponent, toRef } from 'vue'
|
||||
import { PREFIX } from '../_constants'
|
||||
import { useInject } from '../_hooks'
|
||||
import { getMainClass, pxCheck } from '../_utils'
|
||||
import { useFormDisabled } from '../form/form'
|
||||
import NutIcon from '../icon/icon.vue'
|
||||
import { RADIO_KEY, radioProps } from './radio'
|
||||
|
||||
const props = defineProps(radioProps)
|
||||
const { parent }: any = useInject(RADIO_KEY)
|
||||
const disabled = useFormDisabled(toRef(props, 'disabled'))
|
||||
|
||||
const reverseState = computed(() => parent.position.value === 'left')
|
||||
|
||||
const classes = computed(() => {
|
||||
return getMainClass(props, componentName, {
|
||||
[`${componentName}--reverse`]: reverseState.value,
|
||||
[`${componentName}--${props.shape}`]: true,
|
||||
})
|
||||
})
|
||||
function handleClick() {
|
||||
if (isCurValue.value || disabled.value)
|
||||
return
|
||||
parent.updateValue(props.label)
|
||||
}
|
||||
const isCurValue = computed(() => {
|
||||
return parent.label.value === props.label
|
||||
})
|
||||
|
||||
const color = computed(() => {
|
||||
return !disabled.value
|
||||
? isCurValue.value
|
||||
? 'nut-radio__icon'
|
||||
: 'nut-radio__icon--unchecked'
|
||||
: 'nut-radio__icon--disable'
|
||||
})
|
||||
|
||||
const getButtonClass = computed(() => {
|
||||
return `${componentName}__button ${componentName}__button--${props.size} ${isCurValue.value && `${componentName}__button--active`} ${disabled.value ? `${componentName}__button--disabled` : ''}`
|
||||
})
|
||||
|
||||
const getLabelClass = computed(() => {
|
||||
return `${componentName}__label ${disabled.value ? `${componentName}__label--disabled` : ''}`
|
||||
})
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
const componentName = `${PREFIX}-radio`
|
||||
|
||||
export default defineComponent({
|
||||
name: componentName,
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view :class="classes" :style="customStyle" @click="handleClick">
|
||||
<view v-if="shape === 'button'" :class="getButtonClass">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
<template v-else-if="reverseState">
|
||||
<view :class="getLabelClass">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
<slot v-if="!isCurValue" name="icon">
|
||||
<NutIcon
|
||||
name="check-normal"
|
||||
:size="pxCheck(iconSize)"
|
||||
:width="pxCheck(iconSize)"
|
||||
:height="pxCheck(iconSize)"
|
||||
:pop-class="color"
|
||||
/>
|
||||
</slot>
|
||||
<slot v-else name="checkedIcon">
|
||||
<NutIcon
|
||||
name="check-checked"
|
||||
:size="pxCheck(iconSize)"
|
||||
:width="pxCheck(iconSize)"
|
||||
:height="pxCheck(iconSize)"
|
||||
:pop-class="color"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template v-else>
|
||||
<slot v-if="!isCurValue" name="icon">
|
||||
<NutIcon
|
||||
name="check-normal"
|
||||
:size="pxCheck(iconSize)"
|
||||
:width="pxCheck(iconSize)"
|
||||
:height="pxCheck(iconSize)"
|
||||
:pop-class="color"
|
||||
/>
|
||||
</slot>
|
||||
<slot v-else name="checkedIcon">
|
||||
<NutIcon
|
||||
name="check-checked"
|
||||
:size="pxCheck(iconSize)"
|
||||
:width="pxCheck(iconSize)"
|
||||
:height="pxCheck(iconSize)"
|
||||
:pop-class="color"
|
||||
/>
|
||||
</slot>
|
||||
<view :class="getLabelClass">
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import './index';
|
||||
</style>
|
||||
Reference in New Issue
Block a user