@fast-snail/vue-components

一个文件预览插件

Usage

安装

npm install @fast-snail/vue-components

ts 配置

如果在全局 app.use 了，则在全局的 *.d.ts (比如 vite-env.d.ts) 中添加

/// <reference types="@fast-snail/vue-components/es/components.d.ts" />

修改全局配置

import VueCom, { InputNumber, globalConfig } from '@fast-snail/vue-components'

// 组件配置在全局引用前修改
Object.assign(InputNumber.props, {
  tip: {
    type: Boolean,
    default: true
  }
})
app.use(VueCom)

// 其他全局配置项修改
Object.assign(globalConfig, {
  //
})

版本要求

package.json

"element-plus": "^2.4.4",
"vue": "^3.4.0"

API

RowCol

对 el-row 和 el-col 的简写，内部同级元素默认按一行 3 列排布

• gutter: 每列间距 number 默认 20
• baseSpan: 每列占据 24 等分的几份 number 默认 8

如果想对但列处理，在列上添加 span 属性

<template>
  <RowCol :gutter="20" :baseSpan="8">
    <div>占据8</div>
    <div v-if="false">占据0</div>
    <div :span="24">占据24</div>
  </RowCol>
</template>

useMountActivated

组件显示或激活的回调，主要因为页面初始化 mount 和 activate 会都执行，但只想要其中一个执行

useMountActivated(
  () => {
    // 页面Mount或Activate执行了
  },
  sources,
  fn
)

sources 和 fn 为非必要。为 watch 的前两个参数

useElementRect

获取元素的位置信息，内部调用了 dom.getBoundingClientRect()方法，如果不在 hook 中则直接使用 getBoundingClientRect

const { rect, updateRect } = useElementRect(el, (interval = true))

watch(
  () => rect.value.top,
  val => {
    console.log('距离顶部', val)
  }
)

interval 为轮训参数，如果知道页面什么时候变动可以直接调用 updateRect

useTableSelect

管理 el-table 的多选事件

<template>
  <el-table
    :data="list"
    row-key="id"
    ref="tableRef"
    @select="toggleSelection"
    @select-all="toggleAllSelection"
  >
    <el-table-column type="selection" width="50" align="center" />
  </el-table>
</template>
<script setup lang="ts">
/**
 * 列表多选变化方法
 * tableData: 表格数据
 * selectData: 选中数据
 * rowKey: 行key
 * ref: 表格ref
 * cb: 选中内容的回调
 *
 * 请将返回值
 * toggleAllSelection, toggleSelection
 * 传递给el-table
 */

const list = ref([]) // 列表数据
const selectData = ref([]) // 选中数据
const tableRef = ref(null) // el-table的ref
const { toggleSelection, toggleAllSelection } = useTableSelect({
  tableData: list,
  selectData,
  ref: tableRef,
  cb: resp => {
    selectData.value = resp || []
  }
})
</script>

useBaseTable 和 useDataTable

处理列表分页和静态数据分页

/**
// 简单使用示例
const { pagination, paginationEvent, rows, loading, query, reset } =
  useBaseTable(api, { handlePlayed: (params) => params.other = '123' });

// 分页使用示例
<div style="text-align: right">
  <el-pagination v-bind="pagination" v-on="paginationEvent" />
</div>
 */

InputNumber

数字输入框

• min?: number | string
• max?: number | string
• precision?: number | string // 精度
• symbol?: string | boolean // 符号 默认为%
• tip?: boolean // 大写提示

注意输入框的部分配置会在 globalConfig 中调整

import { globalConfig } from '@fast-snail/vue-components'

Object.assign(globalConfig, {
  MAXLENGTH: 100, // 最大位数，默认16
  MAX_SAFE_INTEGER: 'Infinity', // 最大安全值，默认900...
  DECIMAL_ROUNDING: Decimal.ROUND_DOWN // 默认四舍五入
})

简单的数字输入框和万元输入框改造。

1. 输入框为字符串，但后端可能要求是数字的情况
2. 展示金额要求为万元的形式
3. 注意，此时MAXLENGTH和MAX_SAFE_INTEGER请不要调大，只能不调或调小。因为会有精度丢失

<!-- WanInputNumber -->
<template>
  <InputNumber v-model="modelValue" :precision="precision" :symbol="symbol" />
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed } from 'vue'
import Decimal from 'decimal.js'
import { isEmpty } from '@fast-snail/vue-components'

const props = defineProps<{
  modelValue?: number
  symbol?: string
  precision?: number
}>()

// 是万元，默认保留7位小数到毫
const precision = computed(() => {
  if (props.symbol === '万元') {
    return isEmpty(props.precision) ? 7 : props.precision
  }
  return isEmpty(props.precision) ? undefined : props.precision
})

const emit = defineEmits<{
  (e: 'update:modelValue', value?: number): void
  (e: 'change', value?: number): void
  (e: 'input', value?: number): void
}>()
const modelValue = computed({
  get: () => {
    if (props.symbol === '万元') {
      return isEmpty(props.modelValue)
        ? ''
        : new Decimal(props.modelValue).div(10000).toFixed()
    }
    return isEmpty(props.modelValue) ? '' : props.modelValue.toString()
  },
  set: (val?: string) => {
    const change = (e?: number) => {
      emit('update:modelValue', e)
      emit('input', e)
      emit('change', e)
    }

    if (!val) {
      change(undefined)
      return
    }
    if (props.symbol === '万元') {
      change(new Decimal(val).mul(10000).toNumber())
    } else {
      change(Number(val))
    }
  }
})
</script>

使用

<WanInputNumber v-model="wanInputValue" symbol="万元" />

format-money

数字格式化操作 formatMoney(number, fixed = 2)，默认保留两位小数

• 第一位为数字或字符串
• 第二位为要保留的小数，默认 2 number。如果为负数则有几位就保留几位

转万元formatMoneyWan(number, fixed = 6, div = 10000)

• div 表示除以多少 number 默认一万

import { globalConfig } from '@fast-snail/vue-components'

// 调整默认配置
Object.assign(globalConfig.formatMoney, {
  fixed: 4
})
Object.assign(globalConfig.formatMoneyWan, {
  fixed: 4,
  div: 10000
})

numToCapital

数字转汉字numToCapital(number, big?: boolean)

• 第二位为转大写汉字

checkEllipsis

检查 dom 节点文字是否超出隐藏了，返回 true 或 false

numToCapital(document.querySelector('body'))