字符串相关

INFO

安装请参考工具函数安装。

字符串排序

类型微信联系人排序

• 数字优先级最高，按照从小到大排序
• 英文和汉字按照26个字母顺序排序，同字母顺序，英文优先级比汉字高
• 特殊符号优先级最低
• 例子：1abc>3abc>aabc>阿abc>babc>菜菜菜菜111>！2abc

引入

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

示例：

列表项:

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

排序后:

1abc3abcaabc阿abcbabc菜菜菜菜111！2abc

点我看代码

template

<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>

script

<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>

style

<style lang="scss" scoped>
.str-sort {
  padding: 15px;
  background-color: cadetblue;

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

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

获取中文字符拼音首字母

传入中文字符，返回其拼音首字母

引入

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

示例：

中文：

拼音首字母：

点我看代码

template

<template>
  <div class="get-pinyin">
    <p>中文：<el-input v-model:model-value="inputValue"></el-input></p>
    <p>拼音首字母：{{ pinyin }}</p>
  </div>
</template>

script

<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>

style

<style lang="scss" scoped>
.get-pinyin {
  padding: 15px;
  background-color: cadetblue;

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

按byte长度裁剪字符串

一个中文占2个byte长度，有时需要根据byte长度裁剪字符，此方法提供这个功能。

引入

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

示例：

字符串：

裁剪byte长度：

结果：

点我看代码

template

<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>

script

<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>

style

<style lang="scss" scoped>
.sub-str {
  padding: 15px;
  background-color: cadetblue;

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