升级到 vue3

2021-12-03 22:11:11 +08:00
parent c6635e554a
commit 8059d9cd73
260 changed files with 14443 additions and 10979 deletions
@@ -0,0 +1,102 @@
+<template>
+<input
+  :class="$style.input"
+  ref="dom_input"
+  :type="type"
+  :placeholder="placeholder"
+  :value="modelValue"
+  :disabled="disabled"
+  @input="handleInput"
+  @change="$emit('change', $event.target.value.trim())"
+  @keyup.enter="$emit('submit', $event.target.value.trim())"
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+  },
+  emits: ['update:modelValue', 'keydown', 'blur', 'submit', 'change', 'focus'],
+  methods: {
+    handleInput(event) {
+      let value = event.target.value.trim()
+      event.target.value = value
+      this.$emit('update:modelValue', value)
+    },
+    focus() {
+      this.$refs.dom_input.focus()
+    },
+  },
+}
+</script>
+
+
+<style lang="less" module>
+@import '@renderer/assets/styles/layout.less';
+
+.input {
+  display: inline-block;
+  border: none;
+  border-radius: @form-radius;
+  padding: 7px 8px;
+  color: @color-btn;
+  outline: none;
+  transition: background-color 0.2s ease;
+  background-color: @color-btn-background;
+  font-size: 13.3px;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[disabled] {
+    opacity: .4;
+  }
+
+  &:hover, &:focus {
+    background-color: @color-theme_2-hover;
+  }
+  &:active {
+    background-color: @color-theme_2-active;
+  }
+}
+
+.min {
+  padding: 3px 8px;
+  font-size: 12px;
+}
+
+each(@themes, {
+  :global(#root.@{value}) {
+    .input {
+      color: ~'@{color-@{value}-btn}';
+      background-color: ~'@{color-@{value}-btn-background}';
+      &:hover, &:focus {
+        background-color: ~'@{color-@{value}-theme_2-hover}';
+      }
+      &:active {
+        background-color: ~'@{color-@{value}-theme_2-active}';
+      }
+    }
+  }
+})
+
+</style>