wip: 重构中
This commit is contained in:
kailong321200875
@@ -1,98 +0,0 @@
|
||||
// 常用的增删改查 hook
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { Message } from '_c/Message'
|
||||
|
||||
interface DefalutParams {
|
||||
pageIndex: number // 页码
|
||||
pageSize: number // 页数
|
||||
}
|
||||
|
||||
interface DelsParmas {
|
||||
noDataText?: string // 没有选中数据时的提示
|
||||
text?: string // 删除前的提示
|
||||
hiddenVerify?: boolean // 是否隐藏前置判断
|
||||
}
|
||||
|
||||
export function useExample() {
|
||||
// 请求接口的基本参数
|
||||
const defalutParams = reactive<DefalutParams>({
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
|
||||
// 多选数据
|
||||
const selectionData = ref<any[]>([])
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref<any[]>([])
|
||||
|
||||
// 表格加载状态
|
||||
const loading = ref<boolean>(true)
|
||||
|
||||
// 表格总条数
|
||||
const total = ref<number>(0)
|
||||
|
||||
// 是否展示弹窗
|
||||
const dialogVisible = ref<boolean>(false)
|
||||
|
||||
// 弹窗标题
|
||||
const title = ref<string>('')
|
||||
|
||||
// 组件名称
|
||||
const comName = ref<string>('')
|
||||
|
||||
// 表格展示条目改变时候重置基本参数
|
||||
function sizeChange(val: number) {
|
||||
loading.value = true
|
||||
defalutParams.pageIndex = 1
|
||||
defalutParams.pageSize = val
|
||||
}
|
||||
|
||||
// 表格分页改变时候重置基本参数
|
||||
function currentChange(val: number) {
|
||||
loading.value = true
|
||||
defalutParams.pageIndex = val
|
||||
}
|
||||
|
||||
// 删除多选
|
||||
function delData(callBack: Function, config?: DelsParmas) {
|
||||
if (selectionData.value.length === 0 && !config?.hiddenVerify) {
|
||||
Message.warning(config?.noDataText || '请选择需要删除的数据！')
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(config?.text || '此操作将永久删除选中数据, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async() => {
|
||||
await callBack()
|
||||
})
|
||||
}
|
||||
|
||||
// 多选变化的时候
|
||||
function handleSelectionChange(selection: any[]) {
|
||||
selectionData.value = selection
|
||||
}
|
||||
|
||||
// 改变弹窗dialogVisible
|
||||
function toggleVisible(val = false) {
|
||||
dialogVisible.value = val
|
||||
}
|
||||
|
||||
return {
|
||||
defalutParams,
|
||||
tableData,
|
||||
selectionData,
|
||||
loading,
|
||||
total,
|
||||
dialogVisible,
|
||||
title,
|
||||
comName,
|
||||
sizeChange,
|
||||
currentChange,
|
||||
delData,
|
||||
handleSelectionChange,
|
||||
toggleVisible
|
||||
}
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
import { isFunction, isUnDef } from '@/utils/is'
|
||||
import { ref, unref } from 'vue'
|
||||
import { requestAnimationFrame } from '@/utils/animation'
|
||||
|
||||
export interface ScrollToParams {
|
||||
el: HTMLElement
|
||||
position: string
|
||||
to: number
|
||||
duration?: number
|
||||
callback?: () => any
|
||||
}
|
||||
|
||||
const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
|
||||
t /= d / 2
|
||||
if (t < 1) {
|
||||
return (c / 2) * t * t + b
|
||||
}
|
||||
t--
|
||||
return (-c / 2) * (t * (t - 2) - 1) + b
|
||||
}
|
||||
const move = (el: HTMLElement, position: string, amount: number) => {
|
||||
el[position] = amount
|
||||
}
|
||||
|
||||
export function useScrollTo({ el, position = 'scrollLeft', to, duration = 500, callback }: ScrollToParams) {
|
||||
const isActiveRef = ref(false)
|
||||
const start = el[position]
|
||||
const change = to - start
|
||||
const increment = 20
|
||||
let currentTime = 0
|
||||
duration = isUnDef(duration) ? 500 : duration
|
||||
|
||||
const animateScroll = function() {
|
||||
if (!unref(isActiveRef)) {
|
||||
return
|
||||
}
|
||||
currentTime += increment
|
||||
const val = easeInOutQuad(currentTime, start, change, duration)
|
||||
move(el, position, val)
|
||||
if (currentTime < duration && unref(isActiveRef)) {
|
||||
requestAnimationFrame(animateScroll)
|
||||
} else {
|
||||
if (callback && isFunction(callback)) {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
}
|
||||
const run = () => {
|
||||
isActiveRef.value = true
|
||||
animateScroll()
|
||||
}
|
||||
|
||||
const stop = () => {
|
||||
isActiveRef.value = false
|
||||
}
|
||||
|
||||
return { start: run, stop }
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
declare interface Fn<T = any, R = T> {
|
||||
(...arg: T[]): R
|
||||
}
|
||||
|
||||
import { getCurrentInstance, onBeforeUnmount, ref, Ref, unref } from 'vue'
|
||||
|
||||
const domSymbol = Symbol('watermark-dom')
|
||||
|
||||
export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.body)) {
|
||||
let func: Fn = () => {}
|
||||
const id = domSymbol.toString()
|
||||
const clear = () => {
|
||||
const domId = document.getElementById(id)
|
||||
if (domId) {
|
||||
const el = unref(appendEl)
|
||||
el && el.removeChild(domId)
|
||||
}
|
||||
window.removeEventListener('resize', func)
|
||||
}
|
||||
const createWatermark = (str: string) => {
|
||||
clear()
|
||||
|
||||
const can = document.createElement('canvas')
|
||||
can.width = 300
|
||||
can.height = 240
|
||||
|
||||
const cans = can.getContext('2d')
|
||||
if (cans) {
|
||||
cans.rotate((-20 * Math.PI) / 120)
|
||||
cans.font = '15px Vedana'
|
||||
cans.fillStyle = 'rgba(0, 0, 0, 0.15)'
|
||||
cans.textAlign = 'left'
|
||||
cans.textBaseline = 'middle'
|
||||
cans.fillText(str, can.width / 20, can.height)
|
||||
}
|
||||
|
||||
const div = document.createElement('div')
|
||||
div.id = id
|
||||
div.style.pointerEvents = 'none'
|
||||
div.style.top = '0px'
|
||||
div.style.left = '0px'
|
||||
div.style.position = 'absolute'
|
||||
div.style.zIndex = '100000000'
|
||||
div.style.width = document.documentElement.clientWidth + 'px'
|
||||
div.style.height = document.documentElement.clientHeight + 'px'
|
||||
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
|
||||
const el = unref(appendEl)
|
||||
el && el.appendChild(div)
|
||||
return id
|
||||
}
|
||||
|
||||
function setWatermark(str: string) {
|
||||
createWatermark(str)
|
||||
func = () => {
|
||||
createWatermark(str)
|
||||
}
|
||||
window.addEventListener('resize', func)
|
||||
const instance = getCurrentInstance()
|
||||
if (instance) {
|
||||
onBeforeUnmount(() => {
|
||||
clear()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return { setWatermark, clear }
|
||||
}
|
||||
Reference in New Issue
Block a user