Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.

组件介绍

头部组件

# 使用方法
<hand-header
    :userInfo="userInfo"
    collapse
    :defaultActive="menuActive"
    :menuList="menuList"
    ref="menuRef"
>

* 组件属性定义
{Object} userInfo - 用户信息
{Object} menuList - 导航列表（包含name系统名称和list菜单列表）
{string} defaultActive - 默认选中的菜单路径
{boolean} collapse - 是否启用折叠功能
{number} asideWidth - 侧边栏宽度 - 展开时宽度
{number} asideCollapseWidth - 侧边栏宽度 - 收起时宽度
{number} contentWidth - 内容模块宽度
{boolean} showDefaltOpen - 是否默认展开所有菜单项
* 暴露方法（通过 ref 调用）
{Function} getMenu() - 处理传入的导航菜单
{Function} setMenuActive(path) - 设置菜单选中状态，参数 path 为菜单路径
{Function} setNormal(value) - 判断是否在 content inner_content 类名上添加 normal 类名

询问窗口组件

# 使用方法
handConfirmNew({
    text: '塑料袋建设路口封建势力扩大发啦建设<br />路口到付件老师的开<b>发老师快</b>递费了收快递费塑料袋建设路口封建势力扩大发啦建设路口到付件老师的开发老师快递费了收快递费',
    type:2,
    title:'提示',
    dangerouslyUseHTMLString: true,
}).then(() => {
    console.log('确认删除')
}).catch(() => {
    console.log('取消删除')
})

* 组件属性定义
    {Object} options - 配置选项
    {number} [options.type=1] - 类型：1(自定义/常用样式), 2(默认)
    {string} options.text - 提示内容
    {string} [options.title=''] - 提示标题（type为2时才传）
    {boolean} [options.showCancelButton=true] - 是否显示取消按钮
    {string} [options.icon='warning'] - 图标
    {string} [options.confirmButtonText='确定'] - 确认按钮文本
    {string} [options.cancelButtonText='取消'] - 取消按钮文本
    {string} [options.customClass=''] - 自定义样式类
    {boolean} [options.dangerouslyUseHTMLString=false] - 是否把传入的文案当成html处理

弹窗组件

# 使用方法
<hand-dialog
    v-model="dialogAcess"
    title="添加/编辑快捷入口"
    :center="false"
    @cancel="dialogAcess = false"
    @confirm="saveAccess"
    >
    <template #content>
      <h1>
        添加/编辑快捷入口
      </h1>
    </template>
</hand-dialog>
* 组件属性定义
{string} customClass - 自定义样式类名
{boolean} showClose - 是否显示右上角关闭按钮
{boolean} modelValue - 弹窗显示状态（v-model 默认prop）
{string} title - 弹窗标题
{string} title_img_url - 标题图片地址
{string} title_img_style - 标题图片样式
{string} title_img_class - 标题图片类名
{number} width - 弹窗宽度（像素）
{boolean} center - 是否居中布局
{number} btnCount - 按钮数量（0/1/2）
{string} confirmText - 确定按钮文本
{string} cancelText - 取消按钮文本
{string} cancelTextClass - 取消按钮类名
{string} cancelTextStyle - 取消按钮样式
{string} confirmTextClass - 确定按钮类名
{string} confirmTextStyle - 确定按钮样式

分页组件

# 使用方法
<hand-paging @@page-change="handlePageChange" />
# 按钮方法
const handlePageChange = (v) => {
    handPagingRef.value.page = v.page
    handPagingRef.value.pageSize = v.pageSize
}
* 组件属性定义
{number} currentPage - 当前页码
{number} pageSize - 每页条数
{number} total - 总记录数
{boolean} disabled - 是否禁用分页
{boolean} hideOnSingle - 只有一页时是否隐藏
{string} layout - 分页布局（'total,sizes,prev, pager, next'）
{string} size - 分页大小（'small' | 'default' | 'large'） 默认'small'

空数据提示组件

# 使用方法
<hand-no-data title="暂无数据" />
* 组件属性定义
{string} title - 提示标题

图片预览组件

# 使用方法
<hand-see-img ref="handSeeImgRef" @click="openPreview($event.target.currentSrc)"/>
# 按钮方法
const openPreview = (imageSrc) => {
    handSeeImgRef.value.openPreview(imageSrc)
}
* 暴露方法（通过 ref 调用）
{Function} openPreview(imageSrc) -  打开图片预览

Tab组件

# 使用方法
<hand-tab :list="[{ label: '全部', value: 'all' }, { label: '待处理是的', value: 'pending' }, { label: '已处理', value: 'processed' }]" @getStatus="getStatus" />
# 按钮方法
const getStatus = (v) => {
    console.log(v)
}
* 组件属性定义
{array} list - Tab列表，每个元素为{ label: '标签', value: '值' }
* 暴露方法（通过 ref 调用）
{Function} setIndex(index) - 设置当前选中的标签索引，参数 index 为要选中的标签索引

自定义指令

# 防抖指令 节流指令
# 输入框方法
<el-input v-model="inputValue" v-debounce:input="handleInput" placeholder="请输入"></el-input>
<el-input v-model="inputValue" v-throttle:input="handleInput" placeholder="请输入"></el-input>
# 按钮方法
<el-button v-debounce="[openConfirm,200,[1,2,3,4,5,6,7]]" type="success">打开询问窗口</el-button>
<el-button v-throttle="[openConfirm,200,[1,2,3,4,5,6,7]]" type="success">打开询问窗口</el-button>

# 复制指令
<el-button v-copy="['这是复制的内容',copyBack]">点击复制</el-button>
# 按钮方法
const copyBack = (err, success) => {
    if (success) {
        console.log('复制成功')
    } else {
        console.log(err || '复制失败')
    }
}

# 金额格式指令
<el-input v-model="inputMoney" v-money="{max:100,min:0}" placeholder="请输入"></el-input>
# 数字格式指令
<el-input v-model="inputNumber" v-number="{max:100,min:0}" placeholder="请输入"></el-input>

更新版本的信息

# 1.1.40 handHeader 组件布局更改，去掉了 getMainHeight 和 loadImg 方法，不需要了
# 1.1.60 修改了主题颜色 #06f 为 #0C73FF
# 1.1.70 修复了 handHeader 组件在滚动时宽度问题,菜单栏收起时宽度问题