fix(input): [input] fix textarea disabled style error (#2151)

examples/sites/demos/pc/app/input/disabled-composition-api.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="demo-input">
+    <tiny-input v-model="input" disabled placeholder="input"></tiny-input>
+    <tiny-input type="textarea" disabled v-model="input" placeholder="textarea"></tiny-input>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Input as TinyInput } from '@opentiny/vue'
+
+const input = ref('')
+</script>
+
+<style scoped>
+.demo-input {
+  width: 300px;
+}
+
+.demo-input > div {
+  margin-top: 10px;
+}
+</style>

examples/sites/demos/pc/app/input/disabled.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('disabled', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('input#disabled')
+  const demo = page.locator('#disabled')
+  const input = demo.getByRole('textbox', { name: 'input' })
+  const textarea = page.getByRole('textbox', { name: 'textarea' })
+  await expect(input).toHaveAttribute('disabled', '')
+  await expect(textarea).toHaveAttribute('disabled', '')
+})

examples/sites/demos/pc/app/input/disabled.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="demo-input">
+    <tiny-input v-model="input" disabled placeholder="input"></tiny-input>
+    <tiny-input type="textarea" disabled v-model="input" placeholder="textarea"></tiny-input>
+  </div>
+</template>
+
+<script>
+import { Input } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyInput: Input
+  },
+  data() {
+    return {
+      input: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-input {
+  width: 300px;
+}
+
+.demo-input > div {
+  margin-top: 10px;
+}
+</style>

examples/sites/demos/pc/app/input/webdoc/input.js

@@ -27,6 +27,19 @@ export default {
       },
       codeFiles: ['clearable.vue']
     },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用',
+        'en-US': 'Disabled'
+      },
+      desc: {
+        'zh-CN': '<p>可通过 <code>disabled</code> 属性设置输入框的禁用状态。</p>',
+        'en-US':
+          '<p>You can set the <code>clearable</code> attribute to display the clear icon button in the text box </p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
     {
       demoId: 'show-password',
       name: {

packages/theme/src/textarea/index.less

@@ -30,7 +30,7 @@
 
   &:before {
     content: '';
-    width: calc(100% - 16px);
+    width: calc(100% - 20px);
     height: 8px;
     position: absolute;
     left: 2px;
@@ -42,7 +42,7 @@
 
   &:after {
     content: '';
-    width: calc(100% - 19px);
+    width: calc(100% - 20px);
     height: 16px;
     position: absolute;
     left: 2px;
@@ -63,6 +63,14 @@
   &.is-disabled {
     background-color: var(--ti-textarea-disabled-bg-color);
 
+    &:before {
+      background-color: var(--ti-textarea-disabled-bg-color);
+    }
+
+    &:after {
+      background-color: var(--ti-textarea-disabled-bg-color);
+    }
+
     &:hover {
       border-color: var(--ti-textarea-border-color);
     }
@@ -175,9 +183,9 @@
 
   &.is-display-only {
     .@{textarea-prefix-cls}-display-only.@{textarea-prefix-cls}__inner-con
-    .@{textarea-prefix-cls}-display-only__content,
+      .@{textarea-prefix-cls}-display-only__content,
     .@{textarea-prefix-cls}-autosize-display-only.@{textarea-prefix-cls}__inner-con
-    .@{textarea-prefix-cls}-display-only__content {
+      .@{textarea-prefix-cls}-display-only__content {
       position: relative;
       left: 0;
       max-width: 100%;