@ebiz/designer-components 0.1.2 → 0.1.4

package/src/views/TdesignInput.vue

@@ -1,253 +1,253 @@
-<template>
-  <div class="tdesign-input-demo">
-    <h2>TDesign 输入框示例</h2>
-    
-    <div class="section">
-      <h3>基础输入框</h3>
-      <div class="input-row">
-        <ebiz-tdesign-input placeholder="请输入内容" />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>不同尺寸</h3>
-      <div class="input-row">
-        <ebiz-tdesign-input placeholder="小尺寸" size="small" />
-        <ebiz-tdesign-input placeholder="中尺寸" size="medium" />
-        <ebiz-tdesign-input placeholder="大尺寸" size="large" />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>不同状态</h3>
-      <div class="input-row">
-        <ebiz-tdesign-input placeholder="默认状态" />
-        <ebiz-tdesign-input placeholder="禁用状态" disabled />
-        <ebiz-tdesign-input placeholder="只读状态" readonly />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>带清除按钮的输入框</h3>
-      <div class="input-row">
-        <ebiz-tdesign-input placeholder="可清除内容" clearable />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>带前缀和后缀的输入框</h3>
-      <div class="input-row">
-        <ebiz-tdesign-input placeholder="带前缀标签">
-          <template #label>
-            <span>账号：</span>
-          </template>
-        </ebiz-tdesign-input>
-        
-        <ebiz-tdesign-input placeholder="带后缀标签">
-          <template #suffix>
-            <span>元</span>
-          </template>
-        </ebiz-tdesign-input>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>带前缀和后缀图标的输入框</h3>
-      <div class="input-row">
-        <ebiz-tdesign-input placeholder="带前缀图标">
-          <template #prefixIcon>
-            <ebiz-tdesign-icon name="search" />
-          </template>
-        </ebiz-tdesign-input>
-        
-        <ebiz-tdesign-input placeholder="带后缀图标">
-          <template #suffixIcon>
-            <ebiz-tdesign-icon name="lock-on" />
-          </template>
-        </ebiz-tdesign-input>
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>不同类型的输入框</h3>
-      <div class="input-row">
-        <ebiz-tdesign-input placeholder="文本输入框" type="text" />
-        <ebiz-tdesign-input placeholder="数字输入框" type="number" />
-        <ebiz-tdesign-input placeholder="密码输入框" type="password" />
-        <ebiz-tdesign-input placeholder="URL输入框" type="url" />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>带字数限制的输入框</h3>
-      <div class="input-row">
-        <ebiz-tdesign-input 
-          placeholder="最多输入20个字符" 
-          maxlength="20" 
-          show-limit-number
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>带状态提示的输入框</h3>
-      <div class="input-row">
-        <ebiz-tdesign-input 
-          placeholder="成功状态" 
-          status="success" 
-          tips="验证通过" 
-        />
-        
-        <ebiz-tdesign-input 
-          placeholder="警告状态" 
-          status="warning" 
-          tips="请注意格式" 
-        />
-        
-        <ebiz-tdesign-input 
-          placeholder="错误状态" 
-          status="error" 
-          tips="输入有误，请重新输入" 
-        />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>对齐方式</h3>
-      <div class="input-row">
-        <ebiz-tdesign-input placeholder="左对齐" align="left" />
-        <ebiz-tdesign-input placeholder="居中对齐" align="center" />
-        <ebiz-tdesign-input placeholder="右对齐" align="right" />
-      </div>
-    </div>
-    
-    <div class="section">
-      <h3>事件处理</h3>
-      <div class="input-row">
-        <ebiz-tdesign-input 
-          placeholder="监听输入与焦点事件" 
-          @input="handleInput"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @enter="handleEnter"
-        />
-      </div>
-      <div v-if="inputValue" class="event-output">
-        当前输入值: {{ inputValue }}
-      </div>
-      <div v-if="focusState" class="event-output focus">
-        输入框获得焦点
-      </div>
-      <div v-if="blurState" class="event-output blur">
-        输入框失去焦点
-      </div>
-      <div v-if="enterState" class="event-output enter">
-        按下回车键，输入值: {{ enterValue }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { EbizTdesignInput, EbizTdesignIcon } from '../index.js'
-
-export default {
-  name: 'TdesignInputDemo',
-  components: {
-    EbizTdesignInput,
-    EbizTdesignIcon
-  },
-  data() {
-    return {
-      inputValue: '',
-      focusState: false,
-      blurState: false,
-      enterState: false,
-      enterValue: ''
-    }
-  },
-  methods: {
-    handleInput(value) {
-      this.inputValue = value;
-      this.blurState = false;
-    },
-    handleFocus() {
-      this.focusState = true;
-      this.blurState = false;
-    },
-    handleBlur() {
-      this.blurState = true;
-      this.focusState = false;
-    },
-    handleEnter(value) {
-      this.enterState = true;
-      this.enterValue = value;
-      // 3秒后自动清除状态
-      setTimeout(() => {
-        this.enterState = false;
-      }, 3000);
-    }
-  }
-}
-</script>
-
-<style scoped>
-.tdesign-input-demo {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.section {
-  margin-bottom: 30px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 20px;
-}
-
-h2 {
-  margin-bottom: 20px;
-  font-size: 24px;
-  color: #0052d9;
-}
-
-h3 {
-  margin-bottom: 12px;
-  font-size: 18px;
-  color: #333;
-}
-
-.input-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin-bottom: 10px;
-}
-
-.input-row > * {
-  min-width: 240px;
-  max-width: 100%;
-}
-
-.event-output {
-  margin-top: 10px;
-  padding: 8px;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.focus {
-  background-color: #e6f7ff;
-  color: #1890ff;
-}
-
-.blur {
-  background-color: #f6ffed;
-  color: #52c41a;
-}
-
-.enter {
-  background-color: #fff7e6;
-  color: #fa8c16;
-}
+<template>
+  <div class="tdesign-input-demo">
+    <h2>TDesign 输入框示例</h2>
+    
+    <div class="section">
+      <h3>基础输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="请输入内容" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>不同尺寸</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="小尺寸" size="small" />
+        <ebiz-tdesign-input placeholder="中尺寸" size="medium" />
+        <ebiz-tdesign-input placeholder="大尺寸" size="large" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>不同状态</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="默认状态" />
+        <ebiz-tdesign-input placeholder="禁用状态" disabled />
+        <ebiz-tdesign-input placeholder="只读状态" readonly />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带清除按钮的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="可清除内容" clearable />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带前缀和后缀的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="带前缀标签">
+          <template #label>
+            <span>账号：</span>
+          </template>
+        </ebiz-tdesign-input>
+        
+        <ebiz-tdesign-input placeholder="带后缀标签">
+          <template #suffix>
+            <span>元</span>
+          </template>
+        </ebiz-tdesign-input>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带前缀和后缀图标的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="带前缀图标">
+          <template #prefixIcon>
+            <ebiz-tdesign-icon name="search" />
+          </template>
+        </ebiz-tdesign-input>
+        
+        <ebiz-tdesign-input placeholder="带后缀图标">
+          <template #suffixIcon>
+            <ebiz-tdesign-icon name="lock-on" />
+          </template>
+        </ebiz-tdesign-input>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>不同类型的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="文本输入框" type="text" />
+        <ebiz-tdesign-input placeholder="数字输入框" type="number" />
+        <ebiz-tdesign-input placeholder="密码输入框" type="password" />
+        <ebiz-tdesign-input placeholder="URL输入框" type="url" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带字数限制的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input 
+          placeholder="最多输入20个字符" 
+          maxlength="20" 
+          show-limit-number
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带状态提示的输入框</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input 
+          placeholder="成功状态" 
+          status="success" 
+          tips="验证通过" 
+        />
+        
+        <ebiz-tdesign-input 
+          placeholder="警告状态" 
+          status="warning" 
+          tips="请注意格式" 
+        />
+        
+        <ebiz-tdesign-input 
+          placeholder="错误状态" 
+          status="error" 
+          tips="输入有误，请重新输入" 
+        />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>对齐方式</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input placeholder="左对齐" align="left" />
+        <ebiz-tdesign-input placeholder="居中对齐" align="center" />
+        <ebiz-tdesign-input placeholder="右对齐" align="right" />
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>事件处理</h3>
+      <div class="input-row">
+        <ebiz-tdesign-input 
+          placeholder="监听输入与焦点事件" 
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @enter="handleEnter"
+        />
+      </div>
+      <div v-if="inputValue" class="event-output">
+        当前输入值: {{ inputValue }}
+      </div>
+      <div v-if="focusState" class="event-output focus">
+        输入框获得焦点
+      </div>
+      <div v-if="blurState" class="event-output blur">
+        输入框失去焦点
+      </div>
+      <div v-if="enterState" class="event-output enter">
+        按下回车键，输入值: {{ enterValue }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignInput, EbizTdesignIcon } from '../index.js'
+
+export default {
+  name: 'TdesignInputDemo',
+  components: {
+    EbizTdesignInput,
+    EbizTdesignIcon
+  },
+  data() {
+    return {
+      inputValue: '',
+      focusState: false,
+      blurState: false,
+      enterState: false,
+      enterValue: ''
+    }
+  },
+  methods: {
+    handleInput(value) {
+      this.inputValue = value;
+      this.blurState = false;
+    },
+    handleFocus() {
+      this.focusState = true;
+      this.blurState = false;
+    },
+    handleBlur() {
+      this.blurState = true;
+      this.focusState = false;
+    },
+    handleEnter(value) {
+      this.enterState = true;
+      this.enterValue = value;
+      // 3秒后自动清除状态
+      setTimeout(() => {
+        this.enterState = false;
+      }, 3000);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tdesign-input-demo {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #0052d9;
+}
+
+h3 {
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #333;
+}
+
+.input-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 10px;
+}
+
+.input-row > * {
+  min-width: 240px;
+  max-width: 100%;
+}
+
+.event-output {
+  margin-top: 10px;
+  padding: 8px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.focus {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.blur {
+  background-color: #f6ffed;
+  color: #52c41a;
+}
+
+.enter {
+  background-color: #fff7e6;
+  color: #fa8c16;
+}
 </style>