feat(input): 新增slots (#2098)

* fix: calendar 添加自定义方法 * fix: input组件新增插槽slots --------- Co-authored-by: lkjh3214 <[email protected]>
jdf2e · Feb 10, 2023 · ce617e2 · ce617e2
1 parent 34294f9
commit ce617e2
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 20 deletions.
diff --git a/src/packages/__VUE/input/demo.vue b/src/packages/__VUE/input/demo.vue
@@ -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');
@@ -88,6 +95,7 @@ const initTranslate = () =>
       title8: '对齐方式',
       title9: '无边框',
       title10: '事件演示',
+      title11: '插槽演示',
       text: '文本',
       textPlaceholder: '请输入文本',
       passwordPlaceholder: '请输入密码',
@@ -107,6 +115,8 @@ const initTranslate = () =>
       message: '请输入留言',
       noBorder: '输入框无边框',
       event: '事件演示',
+      slots: '插槽演示',
+      slotText: '获取验证码',
       placeholder1: '在输入时执行格式化',
       placeholder2: '在失焦时执行格式化',
       placeholder3: '请输入留言',
@@ -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',
@@ -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',
@@ -153,7 +166,8 @@ const initTranslate = () =>
   });
 export default createDemo({
   components: {
-    Close
+    Close,
+    Ask
   },
   setup() {
     initTranslate();
@@ -181,7 +195,8 @@ export default createDemo({
       noBorder2: '',
       clear: '',
       clear2: '',
-      event: ''
+      event: '',
+      slotsValue: ''
     });
     setTimeout(function () {
       // state.val1 = '异步数据';

diff --git a/src/packages/__VUE/input/doc.en-US.md b/src/packages/__VUE/input/doc.en-US.md
@@ -322,7 +322,7 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 ```
 
 :::
-### Event Demonstration
+### Event Demo
 
 :::demo
 
@@ -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
@@ -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

diff --git a/src/packages/__VUE/input/doc.md b/src/packages/__VUE/input/doc.md
@@ -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);
 ```
 
 ### 基础用法
@@ -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
@@ -403,6 +440,8 @@ app.use(Input);
 | 名称  | 说明     | 
 |-------|----------|
 | clear | 自定义输入框尾部清除按钮 |
+| left `4.0.1` | 自定义输入框左侧插槽内容 |
+| right `4.0.1`| 自定义输入框右侧插槽内容 |
 
 ## 主题定制
 

diff --git a/src/packages/__VUE/input/doc.taro.md b/src/packages/__VUE/input/doc.taro.md
@@ -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);
 ```
 
 ### 基础用法
@@ -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
@@ -419,7 +456,8 @@ app.use(Input);
 | 名称  | 说明     | 
 |-------|----------|
 | clear | 自定义输入框尾部清除按钮 |
-
+| left `4.0.1` | 自定义输入框左侧插槽内容 |
+| right `4.0.1`| 自定义输入框右侧插槽内容 |
 ## 主题定制
 
 ### 样式变量

diff --git a/src/packages/__VUE/input/index.scss b/src/packages/__VUE/input/index.scss
@@ -77,6 +77,7 @@ textarea {
     position: relative;
     width: 100%;
     display: flex;
+    flex: 1;
   }
   &-disabled-mask {
     position: absolute;
@@ -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 {
@@ -119,9 +119,7 @@ textarea {
     height: 16px;
     color: #c8c9cc;
     cursor: pointer;
-  }
-  .nut-button {
-    margin-left: 10px;
+    margin: 0 4px;
   }
   &--required {
     &::before {

diff --git a/src/packages/__VUE/input/index.taro.vue b/src/packages/__VUE/input/index.taro.vue
@@ -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)"
@@ -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';

diff --git a/src/packages/__VUE/input/index.vue b/src/packages/__VUE/input/index.vue
@@ -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)"
@@ -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';

diff --git a/src/sites/mobile-taro/vue/src/dentry/pages/input/index.vue b/src/sites/mobile-taro/vue/src/dentry/pages/input/index.vue
@@ -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() {
@@ -106,6 +114,7 @@ export default {
       align1: '',
       align2: '',
       event: '',
+      slotsValue: '',
       clear: '',
       clear2: '',
       adjustPosition: false,