Vue3输入框(Input)

这篇具有很好参考价值的文章主要介绍了Vue3输入框(Input)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

APIs

参数 说明 类型 默认值 必传
width 输入框宽度 string | number ‘100%’ false
addonBefore 设置前置标签 string | slot ‘’ false
addonAfter 设置后置标签 string | slot ‘’ false
allowClear 可以点击清除图标删除内容 boolean false false
password 是否启用密码框 boolean false false
disabled 是否禁用 boolean false false
maxlength 最大长度 number undefined false
showCount 是否展示字数 boolean false false
size 输入框大小 ‘large’ | ‘middle’ | ‘small’ ‘middle’ false
prefix 前缀图标 string ‘’ false
suffix 后缀图标 string ‘’ false
value(v-model) 输入框内容 string ‘’ false

Events

事件名称 说明 参数
change 输入框内容变化时的回调 (e: Event) => void
enter 按下回车的回调 (e: Event) => void

效果如下图:在线预览

Vue3输入框(Input),vue3,ts,less,Vue3,typescript
Vue3输入框(Input),vue3,ts,less,Vue3,typescript

创建输入框组件Input.vue

<script lang="ts">
/*
  一个根节点时,禁用组件根节点自动继承 attribute,必须使用这种写法!然后在要继承 attribute 的节点上绑定 v-bind="$attrs" 即可
  多个根节点时,只需在要继承 attribute 的节点上绑定 v-bind="$attrs" 即可
*/
export default {
  inheritAttrs: false
}
</script>
<script setup lang="ts">
import { ref, computed, useSlots } from 'vue'
interface Props {
  width?: string|number // 输入框宽度
  addonBefore?: string // 设置前置标签 string | slot
  addonAfter?: string // 设置后置标签 string | slot
  allowClear?: boolean // 可以点击清除图标删除内容
  password?: boolean // 是否启用密码框
  disabled?: boolean // 是否禁用
  maxlength?: number // 最大长度
  showCount?: boolean // 是否展示字数
  size?: 'large'|'middle'|'small' // 输入框大小
  prefix?: string // 前缀图标 string | slot
  suffix?: string // 后缀图标 string | slot
  value?: string // 输入框内容(v-model)
  valueModifiers?: object // 用于访问组件的v-model上添加的修饰符
}
const props = withDefaults(defineProps<Props>(), {
  width: '100%',
  addonBefore: '',
  addonAfter: '',
  allowClear: false,
  password: false,
  disabled: false,
  maxlength: undefined,
  showCount: false,
  size: 'middle',
  prefix: '',
  suffix: '',
  value: '',
  valueModifiers: () => ({})
})
const inputWidth = computed(() => {
  if (typeof props.width === 'number') {
    return props.width + 'px'
  }
  return props.width
})
const showCountNum = computed(() => {
  if (props.maxlength) {
    return props.value.length + ' / ' + props.maxlength
  }
  return props.value.length
})
const slots = useSlots()
const showPrefix = computed(() => {
  const prefixSlots = slots.prefix?.()
  if (prefixSlots) {
    return Boolean(prefixSlots[0].children !== 'v-if' && prefixSlots?.length)
  }
  return props.prefix
})
const showSuffix = computed(() => {
  const suffixSlots = slots.suffix?.()
  if (suffixSlots) {
    return Boolean(suffixSlots[0].children !== 'v-if' && suffixSlots?.length)
  }
  return props.suffix
})
const showBefore = computed(() => {
  const addonBeforeSlots = slots.addonBefore?.()
  if (addonBeforeSlots) {
    return Boolean(addonBeforeSlots[0].children !== 'v-if' && addonBeforeSlots?.length)
  }
  return props.addonBefore
})
const showAfter = computed(() => {
  const addonAfterSlots = slots.addonAfter?.()
  if (addonAfterSlots) {
    return Boolean(addonAfterSlots[0].children !== 'v-if' && addonAfterSlots?.length)
  }
  return props.addonAfter
})
const emits = defineEmits(['update:value', 'change', 'enter'])
function onInput (e: any) {
  if (!('lazy' in props.valueModifiers)) {
    emits('update:value', e.target.value)
    emits('change', e)
  }
}
function onChange (e: any) {
  if ('lazy' in props.valueModifiers) {
    emits('update:value', e.target.value)
    emits('change', e)
  }
}
function onKeyboard (e: any) {
  if (e.key === 'Enter') {
    e.preventDefault() // 消除enter键换行
    emits('enter', e)
  }
}
const input = ref()
function onClear () {
  emits('update:value', '')
  input.value.focus()
}
const showPassword = ref(false)
function onPassword () {
  showPassword.value = !showPassword.value
}
</script>
<template>
  <div class="m-input-wrap" :style="`width: ${inputWidth};`">
    <span class="m-addon" :class="{before: showBefore}" v-if="showBefore">
      <slot name="addonBefore">{{ addonBefore }}</slot>
    </span>
    <div
      class="m-input"
      :class="[`${size}`, {disabled: disabled, 'input-before': showBefore, 'input-after': showAfter}]"
      tabindex="1">
      <span class="m-prefix" v-if="showPrefix">
        <slot name="prefix">{{ prefix }}</slot>
      </span>
      <input
        class="u-input"
        ref="input"
        :type="password && !showPassword ? 'password':'text'"
        :value="value"
        :maxlength="maxlength"
        :disabled="disabled"
        @input="onInput"
        @change="onChange"
        @keydown="onKeyboard"
        v-bind="$attrs" />
      <span class="m-suffix" v-if="showSuffix">
        <span class="m-action" v-if="!disabled&&allowClear&&value" @click="onClear">
          <svg focusable="false" class="u-clear" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg>
        </span>
        <span class="m-action" v-if="password" @click="onPassword">
          <svg focusable="false" v-show="showPassword" class="u-eye" data-icon="eye" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"></path></svg>
          <svg focusable="false" v-show="!showPassword" class="u-eye" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg>
        </span>
        <span class="m-count" v-if="showCount">{{ showCountNum }}</span>
        <slot name="suffix">{{ suffix }}</slot>
      </span>
    </div>
    <span class="m-addon" :class="{after: showAfter}" v-if="showAfter">
      <slot name="addonAfter">{{ addonAfter }}</slot>
    </span>
  </div>
</template>
<style lang="less" scoped>
.m-input-wrap {
  width: 100%;
  text-align: start;
  vertical-align: top;
  position: relative;
  display: inline-table;
  border-collapse: separate;
  border-spacing: 0;
  .m-addon {
    position: relative;
    padding: 0 11px;
    color: rgba(0, 0, 0, .88);
    font-weight: normal;
    font-size: 14px;
    text-align: center;
    background-color: rgba(0, 0, 0, .02);
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    transition: all .3s;
    line-height: 1;
    display: table-cell;
    width: 1px;
    white-space: nowrap;
    vertical-align: middle;
  }
  .before {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: 0;
  }
  .after {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-start: 0;
  }
  .m-input {
    font-size: 14px;
    color: rgba(0, 0, 0, .88);
    line-height: 1.5714285714285714;
    position: relative;
    display: inline-flex;
    width: 100%;
    min-width: 0;
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    transition: all .2s;
    &:hover {
      border-color: #4096ff;
      border-inline-end-width: 1px;
      z-index: 1;
    }
    &:focus-within {
      border-color: #4096ff;
      box-shadow: 0 0 0 2px rgba(5, 145, 255, .1);
      border-inline-end-width: 1px;
      outline: 0;
    }
    .m-prefix {
      margin-inline-end: 4px;
      display: flex;
      flex: none;
      align-items: center;
    }
    .u-input {
      font-size: 14px;
      line-height: 1.5714285714285714;
      position: relative;
      display: inline-block;
      width: 100%;
      min-width: 0;
      background-color: #ffffff;
      border: none;
      outline: none;
      text-overflow: ellipsis;
      transition: all .2s;
    }
    input:disabled {
      color: rgba(0, 0, 0, .25);
    }
    input::-webkit-input-placeholder {
      color: rgba(0, 0, 0, .25);
    }
    input:-moz-placeholder {
      color: rgba(0, 0, 0, .25);
    }
    input::-moz-placeholder {
      color: rgba(0, 0, 0, .25);
    }
    input:-ms-input-placeholder {
      color: rgba(0, 0, 0, .25);
    }
    .m-suffix {
      margin-inline-start: 4px;
      display: flex;
      flex: none;
      align-items: center;
      span {
        margin-right: 4px;
      }
      .m-action {
        cursor: pointer;
        .u-clear {
          font-size: 12px;
          display: inline-block;
          fill: rgba(0, 0, 0, .25);
          text-align: center;
          line-height: 0;
          vertical-align: -.08em;
          transition: fill .3s;
          &:hover {
            fill: rgba(0, 0, 0, .45);
          }
        }
        .u-eye {
          font-size: 14px;
          display: inline-block;
          fill: rgba(0, 0, 0, .45);
          text-align: center;
          line-height: 1;
          vertical-align: -.125em;
          transition: fill .3s;
          &:hover {
            fill: rgba(0, 0, 0, .85);
          }
        }
      }
      .m-count {
        color: rgba(0, 0, 0, .45);
      }
    }
  }
  .large {
    padding: 7px 11px;
    font-size: 16px;
    line-height: 1.5714285714285714;
    border-radius: 8px;
  }
  .middle {
    padding: 4px 11px;
    border-radius: 6px;
  }
  .small {
    padding: 0px 7px;
    border-radius: 4px;
  }
  .input-before {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  .input-after {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
  .disabled {
    color: rgba(0, 0, 0, .25);
    background-color: rgba(0, 0, 0, .04);
    cursor: not-allowed;
    &:hover {
      border-color: #d9d9d9;
    }
    &:focus-within {
      border-color: #d9d9d9;
      box-shadow: none
    }
    .u-input {
      background-color: transparent;
      cursor: not-allowed;
    }
  }
}
</style>

在要使用的页面引入

其中引入使用了 Vue3间距(Space)文章来源地址https://www.toymoban.com/news/detail-608931.html

<script setup lang="ts">
import Input from './Input.vue'
import { ref, watchEffect } from 'vue'
const value = ref('')
const lazyValue = ref('')
watchEffect(() => {
  console.log('value:', value.value)
})
watchEffect(() => {
  console.log('lazyValue:', lazyValue.value)
})
function onChange (e: Event) {
  console.log('change e:', e)
}
function onEnter (e: KeyboardEvent) {
  console.log('enter e:', e)
}
</script>
<template>
  <div>
    <h1>Input 输入框</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Space direction="vertical">
      <Input
        v-model:value="value"
        placeholder="Basic usage"
        @change="onChange"
        @enter="onEnter" />
      <Input
        v-model:value.lazy="lazyValue"
        placeholder="Lazy usage"
        @change="onChange" />
    </Space>
    <h2 class="mt30 mb10">前缀和后缀</h2>
    <Space direction="vertical">
      <Input v-model:value="value" placeholder="Basic usage">
        <template #prefix>
          <svg focusable="false" class="u-svg" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
        </template>
        <template #suffix>
          <Tooltip :max-width="150" title="Extra information">
            <svg focusable="false" class="u-svg" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path></svg>
          </Tooltip>
        </template>
      </Input>
      <Input v-model:value="value" prefix="¥" suffix="RMB" />
    </Space>
    <h2 class="mt30 mb10">三种大小</h2>
    <Space direction="vertical">
      <Input
        size="large"
        :width="500"
        show-count
        :maxlength="20"
        allow-clear
        v-model:value="value"
        placeholder="large size"
        prefix="¥"
        suffix="RMB"
        addon-before="Http://"
        addon-after=".com" />
      <Input
        :width="500"
        show-count
        :maxlength="20"
        allow-clear
        v-model:value="value"
        placeholder="default size"
        prefix="¥"
        suffix="RMB"
        addon-before="Http://"
        addon-after=".com" />
      <Input
        size="small"
        :width="500"
        show-count
        :maxlength="20"
        allow-clear
        v-model:value="value"
        placeholder="small size"
        prefix="¥"
        suffix="RMB"
        addon-before="Http://"
        addon-after=".com" />
    </Space>
    <h2 class="mt30 mb10">前置/后置标签</h2>
    <Space direction="vertical">
      <Input
        :width="300"
        disabled
        show-count
        :maxlength="20"
        v-model:value="value"
        placeholder="Basic usage"
        prefix="¥"
        suffix="RMB"
        addon-before="Http://"
        addon-after=".com" />
      <Input v-model:value="value">
        <template #addonAfter>
          <svg focusable="false" class="u-svg" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg>
        </template>
      </Input>
    </Space>
    <h2 class="mt30 mb10">带移除图标</h2>
    <Space>
      <Input allow-clear v-model:value="value" placeholder="input with clear icon" suffix="RMB" />
    </Space>
    <h2 class="mt30 mb10">密码框</h2>
    <Space>
      <Input password allow-clear v-model:value="value" suffix="RMB" placeholder="input password" />
    </Space>
    <h2 class="mt30 mb10">带数字提示</h2>
    <Space>
      <Input show-count allow-clear v-model:value="value" suffix="RMB"/>
    </Space>
    <h2 class="mt30 mb10">禁用</h2>
    <Space>
      <Input disabled v-model:value="value" suffix="RMB"/>
    </Space>
  </div>
</template>
<style lang="less" scoped>
.u-svg {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-align: center;
  vertical-align: -0.125em;
  fill: rgba(0, 0, 0, 0.88);
}
</style>

到了这里,关于Vue3输入框(Input)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite中配置less,vue3中配置less

    如果赶时间请直接使用目录跳到解决问题的部分。 使用的项目使用vue脚手架生成。 版本如下 由于近期在学less,心想如果不能将其应用到vue项目中,无异于纸上谈兵。于是立即用vue脚手架创建了一个新的vue项目,兴冲冲地安装上了less依赖,于是漫长之路开始了。 需要强调的

    2024年03月16日
    浏览(46)
  • vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

    本文依旧沿用 ant design vue 组件库和 ts 语言🔥🔥更多内容见Ant Design Vue官方文档 🔥🔥 vue3 antd项目实战——Form表单【后台管理系统 v-model数据的双向绑定,input输入框、Radio单选框的嵌套使用】 在上期文章中,我们完成了 UI界面的渲染 (渲染效果如下图),本期文章将带着大

    2023年04月22日
    浏览(86)
  • Vue3动态路由(Vite+Vue3+TS+Mock)

    Vue通过路由进行页面管理,不同的路由绑定到不同的页面。一般来说,前端直接写好的路由为静态路由,在不修改代码的情况下,路由表是不会改变的。对于不需要动态改变路由表的网站,静态路由就已经足够了,但是当页面需要与权限进行绑定时,不同用户允许浏览的页面

    2024年02月02日
    浏览(123)
  • vue3项目+TypeScript前端项目—— vue3搭建项目+eslint+husky

    今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范,需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复,需要使用husky来做commit拦截,需要使用commitlint来统一提交规范,需要使用preinstall来统一包管理工具。 下面我们就用这一套规范

    2024年02月22日
    浏览(82)
  • vue3 + ts

    在 vue3.2 中,我们只需在script标签中添加setup。就可以做到,组件只需引入不用注册,属性和方法也不用 return 才能于 template 中使用,也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动获得。 一、模板语法 1.使用 JavaScript 表达式 我们仅在

    2024年02月07日
    浏览(44)
  • 前端vue3+typescript架构

    1、vue creat 项目名称 选择自定义  选择需要的依赖  选择vue3  一路enter,选择eslist+prettier  继续enter,等待安装 按步骤操作,项目启动成功  2、vscode安装5款插件  2、代码保存自动格式化,保证每个开发人员代码一致,根目录新建三个文件.editorconfig和.prettierrc和.prettierignore

    2024年02月11日
    浏览(40)
  • csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

    大家好,我是yma16,本文分享利用inscode搭建vue3(ts)+antd前端模板。 2023 新星计划 vue(ts)+antd赛道报名入口:https://bbs.csdn.net/topics/616574177 搭建vue3+ts+antd的指引:认识vite_vue3 初始化项目到打包 InsCode 是一个一站式的软件开发服务平台,从开发-部署-运维-运营,都可以在 InsCode 轻松

    2024年02月16日
    浏览(50)
  • Vue3 +TypeScript 引入 BabylonJs(Vue3实现3D)【一篇文章精通系列】

    本文主要介绍如何使用Vue3和TypeScript引入BabylonJs技术实现3D效果。结合实际案例,详细讲解了如何在Vue3项目中引入BabylonJs,并了解其相关知识。通过本文的学习,相信读者可以轻松掌握Vue3实现3D效果以及BabylonJs的相关知识。 1、创建Vue3 + TypeScript项目 将生成的js文件都修改为

    2024年02月04日
    浏览(43)
  • vue3+ts:shims-vue.d.ts

    一、本文引子 uniapp(3.8.4.20230531)+ vue3 + ts + vite 项目 在搭建这个base项目的时候出现红素波浪线如图,代码运行正常,但是看起来很难受,于是各种查找,能找到的资料很少,可能和我提问不够准确也有关系,有人说删除tsconfig.js就可以了,我测试了,结果真的可以,但是这

    2024年02月10日
    浏览(42)
  • Vue3项目中使用TypeScript

    在单文件组件中使用 TypeScript,需要在 小结: 注意 当 script 中使用了 ts ,模板 template 在绑定表达式时也支持ts。 如果在表达式中不指名类型时,编译器会报警告提示。 正确写法 表达式指定类型 基于运行时声明 当使用 基于类型声明 通过泛型来定义 Props 语法规定 传递给

    2023年04月20日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包