Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(input): 新增slots #2098

Merged
merged 3 commits into from
Feb 10, 2023
Merged

feat(input): 新增slots #2098

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e56e8e6
fix: calendar 添加自定义方法
Jan 31, 2023
f944ffe
fix: input组件新增插槽slots
Feb 8, 2023
5b4d8a5
Merge branch 'upstream_v4' into V4_input
Feb 8, 2023
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
23 changes: 19 additions & 4 deletions src/packages/__VUE/input/demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,19 @@
@clear="clear"
@click-input="clickInput"
/>
<h2>{{ translate('title11') }}</h2>
<nut-input v-model="state.slotsValue" clearable :placeholder="translate('slots')">
<template #left> <Ask></Ask> </template>
<template #right>
<nut-button type="primary" size="small">{{ translate('slotText') }}</nut-button>
</template>
</nut-input>
</div>
</template>

<script lang="ts">
import { reactive } from 'vue';
import { Close } from '@nutui/icons-vue';
import { Close, Ask } from '@nutui/icons-vue';
import { showToast } from '@/packages/nutui.vue';
import { createComponent } from '@/packages/utils/create';
const { createDemo, translate } = createComponent('input');
Expand All @@ -88,6 +95,7 @@ const initTranslate = () =>
title8: '对齐方式',
title9: '无边框',
title10: '事件演示',
title11: '插槽演示',
text: '文本',
textPlaceholder: '请输入文本',
passwordPlaceholder: '请输入密码',
Expand All @@ -107,6 +115,8 @@ const initTranslate = () =>
message: '请输入留言',
noBorder: '输入框无边框',
event: '事件演示',
slots: '插槽演示',
slotText: '获取验证码',
placeholder1: '在输入时执行格式化',
placeholder2: '在失焦时执行格式化',
placeholder3: '请输入留言',
Expand All @@ -124,7 +134,8 @@ const initTranslate = () =>
title7: 'Show Word Limit',
title8: 'Input Align',
title9: 'No Border',
title10: 'Event Demonstration',
title10: 'Event Demo',
title11: 'Slots',
text: 'Text',
textPlaceholder: 'Text',
passwordPlaceholder: 'Password',
Expand All @@ -144,6 +155,8 @@ const initTranslate = () =>
message: 'Message',
noBorder: 'No Border',
event: 'Event',
slots: 'Slots',
slotText: 'Verification Code',
placeholder1: 'Format On Change',
placeholder2: 'Format On Blur',
placeholder3: 'Message',
Expand All @@ -153,7 +166,8 @@ const initTranslate = () =>
});
export default createDemo({
components: {
Close
Close,
Ask
},
setup() {
initTranslate();
Expand Down Expand Up @@ -181,7 +195,8 @@ export default createDemo({
noBorder2: '',
clear: '',
clear2: '',
event: ''
event: '',
slotsValue: ''
});
setTimeout(function () {
// state.val1 = '异步数据';
Expand Down
41 changes: 39 additions & 2 deletions src/packages/__VUE/input/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,7 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
```

:::
### Event Demonstration
### Event Demo

:::demo

Expand Down Expand Up @@ -363,6 +363,42 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
</script>
```

:::

### Slots Demo

:::demo

```html
<template>
<nut-input
v-model="state.slotValue"
placeholder="Slots Demo"
clearable
>
<template #left> <Ask></Ask> </template>
<template #right> <nut-button type='primary' size="small">Verification Code</nut-button> </template>
</nut-input>
</template>
<script lang="ts">
import { reactive } from 'vue';
import { Ask } from '@nutui/icons-vue';

export default {
components:{
Ask
},
setup() {
const state = reactive({
slotValue: ''
});
return {
state,
};
}
}
</script>
```
:::
## API
### Props
Expand Down Expand Up @@ -402,7 +438,8 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
| Name | Description |
|-------|----------|
| clear | Customize the end of the input box to clear the button |

| left `4.0.1` | Customize the slot content on the left side of the input box |
| right `4.0.1`| Customize the slot content on the right side of the input box |
## Theming

### CSS Variables
Expand Down
41 changes: 40 additions & 1 deletion src/packages/__VUE/input/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@

``` javascript
import { createApp } from 'vue';
import { Input } from '@nutui/nutui';
import { Input,Button } from '@nutui/nutui';

const app = createApp();
app.use(Input);
app.use(Button);
```

### 基础用法
Expand Down Expand Up @@ -366,6 +367,42 @@ app.use(Input);
</script>
```

:::

### 插槽演示

:::demo

```html
<template>
<nut-input
v-model="state.slotValue"
placeholder="插槽演示"
clearable
>
<template #left> <Ask></Ask> </template>
<template #right> <nut-button type='primary' size="small">获取验证码</nut-button> </template>
</nut-input>
</template>
<script lang="ts">
import { reactive } from 'vue';
import { Ask } from '@nutui/icons-vue';

export default {
components:{
Ask
},
setup() {
const state = reactive({
slotValue: ''
});
return {
state,
};
}
}
</script>
```
:::
## API
### Props
Expand Down Expand Up @@ -403,6 +440,8 @@ app.use(Input);
| 名称 | 说明 |
|-------|----------|
| clear | 自定义输入框尾部清除按钮 |
| left `4.0.1` | 自定义输入框左侧插槽内容 |
| right `4.0.1`| 自定义输入框右侧插槽内容 |

## 主题定制

Expand Down
42 changes: 40 additions & 2 deletions src/packages/__VUE/input/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,11 @@

``` javascript
import { createApp } from 'vue';
import { Input } from '@nutui/nutui-taro';
import { Input,Button } from '@nutui/nutui-taro';

const app = createApp();
app.use(Input);
app.use(Button);
```

### 基础用法
Expand Down Expand Up @@ -379,6 +380,42 @@ app.use(Input);
</script>
```

:::

### 插槽演示

:::demo

```html
<template>
<nut-input
v-model="state.slotValue"
placeholder="插槽演示"
clearable
>
<template #left> <Ask></Ask> </template>
<template #right> <nut-button type='primary' size="small">获取验证码</nut-button> </template>
</nut-input>
</template>
<script lang="ts">
import { reactive } from 'vue';
import { Ask } from '@nutui/icons-vue-taro';

export default {
components:{
Ask
},
setup() {
const state = reactive({
slotValue: ''
});
return {
state,
};
}
}
</script>
```
:::
## API
### Props
Expand Down Expand Up @@ -419,7 +456,8 @@ app.use(Input);
| 名称 | 说明 |
|-------|----------|
| clear | 自定义输入框尾部清除按钮 |

| left `4.0.1` | 自定义输入框左侧插槽内容 |
| right `4.0.1`| 自定义输入框右侧插槽内容 |
## 主题定制

### 样式变量
Expand Down
14 changes: 6 additions & 8 deletions src/packages/__VUE/input/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ textarea {
position: relative;
width: 100%;
display: flex;
flex: 1;
}
&-disabled-mask {
position: absolute;
Expand All @@ -95,17 +96,16 @@ textarea {
// margin-top: -50%;
// line-height: var(--van-field-word-limit-line-height);
}
&-left-icon,
&-right-icon {
&-left-box,
&-right-box {
display: flex;
align-items: center;
font-size: 0;
}
&-clear,
&-right-icon {
&-right-box {
margin-left: 4px;
}
&-left-icon {
&-left-box {
margin-right: 4px;
}
&-clear-box {
Expand All @@ -119,9 +119,7 @@ textarea {
height: 16px;
color: #c8c9cc;
cursor: pointer;
}
.nut-button {
margin-left: 10px;
margin: 0 4px;
}
&--required {
&::before {
Expand Down
7 changes: 6 additions & 1 deletion src/packages/__VUE/input/index.taro.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
<view :class="classes">
<view class="nut-input-value">
<view class="nut-input-inner">
<view class="nut-input-left-box">
<slot name="left"></slot>
</view>
<view class="nut-input-box">
<component
:is="renderInput(type)"
Expand Down Expand Up @@ -45,11 +48,13 @@
</MaskClose>
</slot>
</view>
<view class="nut-input-right-box">
<slot name="right"> </slot>
</view>
</view>
</view>
</view>
</template>
<!-- eslint-disable @typescript-eslint/no-non-null-assertion -->
<script lang="ts">
import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, InputHTMLAttributes, h } from 'vue';
import { createComponent } from '@/packages/utils/create';
Expand Down
7 changes: 6 additions & 1 deletion src/packages/__VUE/input/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
<view :class="classes">
<view class="nut-input-value">
<view class="nut-input-inner">
<view class="nut-input-left-box">
<slot name="left"></slot>
</view>
<view class="nut-input-box">
<component
:is="renderInput(type)"
Expand Down Expand Up @@ -42,11 +45,13 @@
</MaskClose>
</slot>
</view>
<view class="nut-input-right-box">
<slot name="right"> </slot>
</view>
</view>
</view>
</view>
</template>
<!-- eslint-disable @typescript-eslint/no-non-null-assertion -->
<script lang="ts">
import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, InputHTMLAttributes, h } from 'vue';
import { createComponent } from '@/packages/utils/create';
Expand Down
11 changes: 10 additions & 1 deletion src/sites/mobile-taro/vue/src/dentry/pages/input/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,17 +69,25 @@
@click-input="clickInput"
/>
<nut-toast :msg="state.msg" v-model:visible="state.show" type="text" />
<h2>插槽演示</h2>
<nut-input v-model="state.slotsValue" placeholder="插槽演示" clearable :adjust-position="state.adjustPosition">
<template #left> <Ask></Ask> </template>
<template #right>
<nut-button type="primary" size="small">获取验证码</nut-button>
</template>
</nut-input>
</div>
</template>

<script lang="ts">
import { reactive } from 'vue';
import { Close } from '@nutui/icons-vue-taro';
import { Close, Ask } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
export default {
components: {
Close,
Ask,
Header
},
setup() {
Expand All @@ -106,6 +114,7 @@ export default {
align1: '',
align2: '',
event: '',
slotsValue: '',
clear: '',
clear2: '',
adjustPosition: false,
Expand Down