@planckdev/element-plus

@planckdev/element-plus

一个基于element-plus开发的库

英文 | 中文

安装

pnpm install @planckdev/element-plus

指令 Directives

用法

StickyTable

把el-table的表头和横向滚动条随页面滚动固定的vue3指令

在 main.js or main.ts：

import { StickyTable } from '@planckdev/element-plus/directives'
const app = createApp(App)
app.directive('StickyElTable', StickyTable)

在 you-page.vue：

<el-table v-sticky-el-table></el-table>

选项

export interface StickyTableOptions {
  /**
   * 是否启用
   * 
   * 默认为启用
   */
  enable?: boolean;
  /**
   * 粘性定位顶部距离
   * 默认为0px，可设置为其他值，例如：20px、20vh
   */
  top?: string
}

通用函数 Utils

用法

Popconfirm

通过函数的方式，调用popconfirm 在 you-page.vue：

 <el-button @click="showPop">测试</el-button>

import { popconfirm } from '@planckdev/element-plus/utils'

const showPop = async (e: MouseEvent) => {
  await popconfirm(e, {
    title: '是否删除？'
  })
  console.log('确定---确定')
}

选项

export type PopoverProps = {
    title: string;
    confirmButtonText?: string;
    cancelButtonText?: string;
    placement?: string;
};
export declare function popconfirm(ev: MouseEvent, props: PopoverProps): Promise<void>;

Preview

通过函数的方式，预览图片

<el-button type="primary" @click="previewImage">
  preview按钮
</el-button>

import { preview } from '@planckdev/element-plus/utils'

const previewImage = async () => {
  await preview('https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg')
  console.log('关闭预览')
}

选项

export declare function preview(url: string, imgList?: string[]): Promise<void>;