Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 68551f25 编写于 作者: M mikasayw 提交者： GitHub
浏览文件
操作

feat(checkbox): add checkbox new props of shape (#1978) 

* feat(checkbox): add checkbox new props of shape

* docs: 修改demo单独增加一个示例
上级 d83d972e
隐藏空白更改
内联 并排
Showing with 130 addition and 8 deletion
src/packages/__VUE/checkbox/__tests__/__snapshots__/checkbox.spec.ts.snap
浏览文件 @ 68551f25
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`basic usage 1`] = `
"<view class=\\"nut-checkbox \\"><i class=\\"nutui-iconfont nut-icon nut-icon-checked nut-checkbox__icon\\" src=\\"\\"></i>
"<view class=\\"nut-checkbox nut-checkbox--round \\"><i class=\\"nutui-iconfont nut-icon nut-icon-checked nut-checkbox__icon\\" src=\\"\\"></i>
<view class=\\"nut-checkbox__label \\"></view>
</view>"
`;
src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts
浏览文件 @ 68551f25
......@@ -145,3 +145,22 @@ test('should emit "update:modelValue" event when checkbox is clicked', async ()
wrapper.trigger('click');
expect(wrapper.emitted('update:modelValue')![1]).toEqual([false]);
});
test('checkbox shape test', async () => {
const wrapper = mount({
components: {
'nut-checkbox': Checkbox
},
template: `
<template>
<nut-checkbox shape="button"></nut-checkbox>
<nut-checkbox></nut-checkbox>
</template>
`
});
const items = wrapper.findAll('.nut-checkbox');
expect((items[0] as any).find('.nut-checkbox__button').exists()).toBeTruthy();
expect((items[1] as any).find('.nut-checkbox__button').exists()).toBeFalsy();
});
src/packages/__VUE/checkbox/common.ts
浏览文件 @ 68551f25
......@@ -49,6 +49,10 @@ export const component = (componentName: string, nutIcon: object) => {
indeterminate: {
type: Boolean,
default: false
},
shape: {
type: String,
default: 'round' // button
}
},
emits: ['change', 'update:modelValue'],
......@@ -124,6 +128,18 @@ export const component = (componentName: string, nutIcon: object) => {
);
};
const renderButton = () => {
return h(
'view',
{
class: `${componentName}__button ${pValue.value && `${componentName}__button--active`} ${
pDisabled.value ? `${componentName}__button--disabled` : ''
}`
},
slots.default?.()
);
};
const handleClick = (e: MouseEvent | TouchEvent) => {
if (pDisabled.value) return;
if (checked.value && state.partialSelect) {
......@@ -133,9 +149,9 @@ export const component = (componentName: string, nutIcon: object) => {
}
emitChange(!checked.value, slots.default?.()[0].children as string);
if (hasParent.value) {
let value = parent.value.value;
let max = parent.max.value;
let { label } = props;
const value = parent.value.value;
const max = parent.max.value;
const { label } = props;
const index = value.indexOf(label);
if (index > -1) {
value.splice(index, 1);
......@@ -161,10 +177,12 @@ export const component = (componentName: string, nutIcon: object) => {
return h(
'view',
{
class: `${componentName} ${props.textPosition === 'left' ? `${componentName}--reverse` : ''}`,
class: `${componentName} ${componentName}--${props.shape} ${
props.textPosition === 'left' ? `${componentName}--reverse` : ''
}`,
onClick: handleClick
},
[renderIcon(), renderLabel()]
[props.shape == 'button' ? renderButton() : [renderIcon(), renderLabel()]]
);
};
}
......
src/packages/__VUE/checkbox/demo.vue
浏览文件 @ 68551f25
......@@ -128,6 +128,15 @@
>
</nut-checkboxgroup>
</nut-cell-group>
<nut-cell-group :title="translate('useShape')">
<nut-cell>
<nut-checkboxgroup v-model="checkboxgroup6">
<nut-checkbox label="1" shape="button">{{ translate('useShape') }}</nut-checkbox>
<nut-checkbox label="2" shape="button">{{ translate('useShape') }}</nut-checkbox>
</nut-checkboxgroup>
</nut-cell>
</nut-cell-group>
</div>
</template>
<script lang="ts">
......@@ -158,7 +167,8 @@ const initTranslate = () =>
checkbox: '复选框',
selectedDisable: '选中时禁用状态',
unselectDisable: '未选时禁用状态',
useGroupInte: '全选/半选/取消'
useGroupInte: '全选/半选/取消',
useShape: '按钮形状'
},
'en-US': {
basic: 'Basic usage - left and right',
......@@ -180,7 +190,8 @@ const initTranslate = () =>
checkbox: 'check box',
selectedDisable: 'Disabled when selected',
unselectDisable: 'Disabled when not selected',
useGroupInte: 'Select all / half / cancel'
useGroupInte: 'Select all / half / cancel',
useShape: 'Button shape'
}
});
export default createDemo({
......@@ -204,6 +215,7 @@ export default createDemo({
checkboxgroup3: ['2'],
checkboxgroup4: ['2'],
checkboxgroup5: [],
checkboxgroup6: [],
checkboxsource: [
{ label: '1', value: translate('combine') },
{ label: '2', value: translate('combine') },
......
src/packages/__VUE/checkbox/doc.en-US.md
浏览文件 @ 68551f25
......@@ -385,6 +385,7 @@ When the value changes, the `change` event will be triggered
| icon-font-class-name | Basic class name of custom icon font | String | `nutui-iconfont`
| label | Text content of the check box | String | -
| indeterminate | Whether half selection status is currently supported. It is generally used in select all operation | Boolean | `false` |
| shape `v3.3.4` | Shape, optional values：`button`、`round` | String | `round` |
### CheckboxGroup Props
......
src/packages/__VUE/checkbox/doc.md
浏览文件 @ 68551f25
......@@ -389,6 +389,7 @@ app.use(Icon);
| icon-font-class-name | 自定义 icon 字体基础类名 | String | `nutui-iconfont` |
| label | 复选框的文本内容 | String | -
| indeterminate | 当前是否支持半选状态，一般用在全选操作中 | Boolean | `false` |
| shape `v3.3.4` | 形状，可选值：`button`、`round` | String | `round` |
### CheckboxGroup Props
| 字段 | 说明 | 类型 | 默认值
......
src/packages/__VUE/checkbox/index.scss
浏览文件 @ 68551f25
......@@ -6,6 +6,14 @@
color: $checkbox-label-disable-color;
}
}
&__button {
background: $dark-background;
color: $dark-color;
&--disabled {
color: $checkbox-label-disable-color;
border: 1px solid $checkbox-label-disable-color;
}
}
}
}
.nut-checkbox {
......@@ -18,6 +26,26 @@
margin-left: 0;
}
}
&__button {
display: inline-flex;
align-items: center;
padding: $checkbox-button-padding;
font-size: $checkbox-button-font-size;
background: $checkbox-label-button-bg-color;
border-radius: $checkbox-button-border-radius;
color: $checkbox-label-color;
box-sizing: border-box;
border: 1px solid $checkbox-label-button-border-color;
&--active {
background: $checkbox-label-button-bg-active-color;
color: $checkbox-label-font-active-color;
border: 1px solid $checkbox-label-button-border-active-color;
}
&--disabled {
color: $checkbox-label-disable-color;
border: none;
}
}
&__label {
flex: 1;
margin-left: $checkbox-label-margin-left;
......
src/packages/styles/variables-jdb.scss
浏览文件 @ 68551f25
......@@ -509,6 +509,14 @@ $checkbox-label-margin-left: 15px !default;
$checkbox-label-font-size: 14px !default;
$checkbox-icon-font-size: 18px !default;
$checkbox-icon-disable-color2: $help-color !default;
$checkbox-button-padding: 5px 18px !default;
$checkbox-button-font-size: 12px !default;
$checkbox-button-border-radius: 15px !default;
$checkbox-label-button-bg-color: #f6f7f9 !default;
$checkbox-label-button-border-color: #f6f7f9 !default;
$checkbox-label-button-bg-active-color: rgba($primary-color, 0.05) !default;
$checkbox-label-button-border-active-color: $primary-color !default;
$checkbox-label-font-active-color: $primary-color !default;
//radio
$radio-label-font-color: #1d1e1e !default;
......
src/packages/styles/variables-jddkh.scss
浏览文件 @ 68551f25
......@@ -440,6 +440,14 @@ $checkbox-label-margin-left: 15px !default;
$checkbox-label-font-size: 14px !default;
$checkbox-icon-font-size: 18px !default;
$checkbox-icon-disable-color2: $checkbox-icon-disable-color !default;
$checkbox-button-padding: 5px 18px !default;
$checkbox-button-font-size: 12px !default;
$checkbox-button-border-radius: 15px !default;
$checkbox-label-button-bg-color: #f6f7f9 !default;
$checkbox-label-button-border-color: #f6f7f9 !default;
$checkbox-label-button-bg-active-color: rgba($primary-color, 0.05) !default;
$checkbox-label-button-border-active-color: $primary-color !default;
$checkbox-label-font-active-color: $primary-color !default;
//radio
$radio-label-font-color: #1d1e1e !default;
......
src/packages/styles/variables-jdt.scss
浏览文件 @ 68551f25
......@@ -416,6 +416,14 @@ $checkbox-label-margin-left: 8px !default;
$checkbox-label-font-size: 16px !default;
$checkbox-icon-font-size: 20px !default;
$checkbox-icon-disable-color2: $help-color !default;
$checkbox-button-padding: 5px 18px !default;
$checkbox-button-font-size: 12px !default;
$checkbox-button-border-radius: 15px !default;
$checkbox-label-button-bg-color: #f6f7f9 !default;
$checkbox-label-button-border-color: #f6f7f9 !default;
$checkbox-label-button-bg-active-color: rgba($primary-color, 0.05) !default;
$checkbox-label-button-border-active-color: $primary-color !default;
$checkbox-label-font-active-color: $primary-color !default;
//radio
$radio-label-font-color: rgba(0, 0, 0, 0.85) !default;
......
src/packages/styles/variables.scss
浏览文件 @ 68551f25
......@@ -440,6 +440,14 @@ $checkbox-label-margin-left: 15px !default;
$checkbox-label-font-size: 14px !default;
$checkbox-icon-font-size: 18px !default;
$checkbox-icon-disable-color2: $help-color !default;
$checkbox-button-padding: 5px 18px !default;
$checkbox-button-font-size: 12px !default;
$checkbox-button-border-radius: 15px !default;
$checkbox-label-button-bg-color: #f6f7f9 !default;
$checkbox-label-button-border-color: #f6f7f9 !default;
$checkbox-label-button-bg-active-color: rgba($primary-color, 0.05) !default;
$checkbox-label-button-border-active-color: $primary-color !default;
$checkbox-label-font-active-color: $primary-color !default;
//radio
$radio-label-font-color: #1d1e1e !default;
......
src/sites/mobile-taro/vue/src/dentry/pages/checkbox/index.vue
浏览文件 @ 68551f25
......@@ -50,6 +50,8 @@
<nut-checkbox label="2">组合复选框</nut-checkbox>
<nut-checkbox label="3">组合复选框</nut-checkbox>
<nut-checkbox label="4">组合复选框</nut-checkbox>
<nut-checkbox label="5" shape="button">组合复选框</nut-checkbox>
<nut-checkbox label="6" shape="button">组合复选框</nut-checkbox>
</nut-checkboxgroup>
</nut-cell>
<nut-cell>
......@@ -106,6 +108,14 @@
<nut-cell><nut-checkbox label="4">组合复选框</nut-checkbox></nut-cell>
</nut-checkboxgroup>
</nut-cell-group>
<nut-cell-group title="按钮形状">
<nut-cell>
<nut-checkboxgroup v-model="checkboxgroup6">
<nut-checkbox label="1" shape="button">按钮形状</nut-checkbox>
<nut-checkbox label="2" shape="button">按钮形状</nut-checkbox>
</nut-checkboxgroup>
</nut-cell>
</nut-cell-group>
</div>
</template>
<script lang="ts">
......@@ -130,6 +140,7 @@ export default {
checkboxgroup3: ['2'],
checkboxgroup4: ['2'],
checkboxgroup5: [],
checkboxgroup6: [],
checkboxsource: [
{ label: '1', value: '组合复选框' },
{ label: '2', value: '组合复选框' },
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或