Havue

English

简体中文

English

简体中文

Appearance

String Related ​

INFO

For installation, please refer to Tool Functions Installation.

String Sorting ​

WeChat contact-like sorting rules:

  • Numbers have highest priority, sorted in ascending order
  • English and Chinese characters sorted alphabetically, with English having higher priority than Chinese when same initial exists
  • Special symbols have lowest priority
  • Example: 1abc > 3abc > aabc > 阿abc > babc > 菜菜菜菜111 > !2abc

Import ​

ts
import { stringSortFn } from 'havue'
// or
import { stringSortFn } from '@havue/tools'

Examples

列表项:

aabc1abc阿abc3abc！2abc菜菜菜菜111babc

排序后:

1abc3abcaabc阿abcbabc菜菜菜菜111！2abc
Click to view code
vue
<template>
  <div class="str-sort">
    <p>列表项:</p>
    <div class="orgin">
      <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
        {{ tag }}
      </el-tag>
      <el-input
        v-if="inputVisible"
        ref="InputRef"
        v-model="inputValue"
        class="input"
        size="small"
        @keyup.enter="handleInputConfirm"
        @blur="handleInputConfirm"
      />
      <el-button v-else class="button-new-tag" size="small" @click="showInput"> + New Tag </el-button>
    </div>
    <p>排序后:</p>
    <div class="after">
      <el-tag v-for="tag in sortedTags" :key="tag" :disable-transitions="false">
        {{ tag }}
      </el-tag>
    </div>
  </div>
</template>
vue
<script setup lang="ts">
import { nextTick, ref, computed } from 'vue'
import type { InputInstance } from 'element-plus'
import { stringSortFn } from '@havue/tools'

const inputValue = ref('')
const dynamicTags = ref(['aabc', '1abc', '阿abc', '3abc', '！2abc', '菜菜菜菜111', 'babc'])
const inputVisible = ref(false)
const InputRef = ref<InputInstance>()

const sortedTags = computed(() => {
  const arr = [...dynamicTags.value]
  return arr.sort(stringSortFn)
})

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>
vue
<style lang="scss" scoped>
.str-sort {
  padding: 15px;
  background-color: cadetblue;

  .el-tag {
    margin-right: 5px;
  }

  .el-input {
    width: 100px;
  }
}
</style>

Get Chinese Character Pinyin Initial ​

Returns the pinyin initial of Chinese characters.

Import ​

ts
import { getPinyinInitial  } from 'havue'
// or
import { getPinyinInitial  } from '@havue/tools'

Examples

中文：

拼音首字母：

Click to view code点我看代码
vue
<template>
  <div class="get-pinyin">
    <p>中文：<el-input v-model:model-value="inputValue"></el-input></p>
    <p>拼音首字母：{{ pinyin }}</p>
  </div>
</template>
vue
<script setup lang="ts">
import { ref, computed } from 'vue'
import { getPinyinInitial } from '@havue/tools'

const inputValue = ref('')

const pinyin = computed(() => {
  return getPinyinInitial(inputValue.value)
})
</script>
vue
<style lang="scss" scoped>
.get-pinyin {
  padding: 15px;
  background-color: cadetblue;

  .el-input {
    width: 100px;
  }
}
</style>

Substring by Byte Length ​

Chinese characters occupy 2 bytes. This method provides byte-length based string truncation.

Import ​

ts
import { subStrByByteLen  } from 'havue'
// or
import { subStrByByteLen  } from '@havue/tools'

Examples

字符串：

裁剪byte长度：

结果：

Click to view code
vue
<template>
  <div class="sub-str">
    <p>字符串：<el-input v-model="str"></el-input></p>
    <p>裁剪byte长度：<el-input-number v-model="subByteLen"></el-input-number></p>
    <p>结果：{{ result }}</p>
  </div>
</template>
vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { subStrByByteLen } from '@havue/tools'

const str = ref('')
const subByteLen = ref(0)

const result = computed(() => {
  return subStrByByteLen(str.value, subByteLen.value)
})
</script>
vue
<style lang="scss" scoped>
.sub-str {
  padding: 15px;
  background-color: cadetblue;

  .el-input {
    width: 300px;
  }
}
</style>