refactor: use setup refactor

This commit is contained in:
xiaoxian521 2021-09-18 22:24:52 +08:00
parent 67db3cb1c3
commit 85f4917f26
18 changed files with 1139 additions and 1214 deletions

View File

@ -11,6 +11,20 @@ module.exports = {
$shallowRef: "readonly",
$computed: "readonly",
// index.d.ts
// global.d.ts
Fn: "readonly",
PromiseFn: "readonly",
RefType: "readonly",
LabelValueOptions: "readonly",
EmitType: "readonly",
TargetContext: "readonly",
ComponentElRef: "readonly",
ComponentRef: "readonly",
ElRef: "readonly",
global: "readonly",
ForDataType: "readonly",
// script setup
defineProps: "readonly",
defineEmits: "readonly",

View File

@ -8,7 +8,7 @@
"build": "rimraf dist && cross-env vite build",
"preview": "vite preview",
"preview:build": "yarn build && vite preview",
"clean:cache": "rm -rf node_modules && rm -rf .eslintcache && yarn cache clean && yarn install",
"clean:cache": "rm -rf node_modules && rm -rf .eslintcache && yarn cache clean && yarn",
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
@ -21,7 +21,7 @@
"@amap/amap-jsapi-loader": "^1.0.1",
"@logicflow/core": "^0.4.6",
"@logicflow/extension": "^0.4.6",
"@vueuse/core": "^6.0.0",
"@vueuse/core": "^6.4.1",
"animate.css": "^4.1.1",
"await-to-js": "^3.0.0",
"axios": "^0.21.1",
@ -43,11 +43,11 @@
"responsive-storage": "^1.0.9",
"sortablejs": "1.13.0",
"v-contextmenu": "^3.0.0",
"vue": "^3.2.11",
"vue": "^3.2.12",
"vue-i18n": "^9.2.0-beta.3",
"vue-json-pretty": "^2.0.2",
"vue-router": "^4.0.11",
"vue-types": "^4.0.3",
"vue-types": "^4.1.0",
"vuedraggable": "^4.1.0",
"vxe-table": "^4.0.27",
"wangeditor": "^4.7.7",
@ -66,7 +66,7 @@
"@typescript-eslint/parser": "^4.31.0",
"@vitejs/plugin-vue": "^1.6.0",
"@vitejs/plugin-vue-jsx": "^1.1.7",
"@vue/compiler-sfc": "^3.2.11",
"@vue/compiler-sfc": "^3.2.12",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"autoprefixer": "^10.2.4",

View File

@ -1,27 +1,7 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group appear name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span
v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
class="no-redirect"
>{{ $t(item.meta.title) }}</span
>
<a v-else @click.prevent="handleLink(item)">
{{ $t(item.meta.title) }}
</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script lang="ts">
import { ref, defineComponent, watch, Ref } from "vue";
<script setup lang="ts">
import { ref, watch, Ref } from "vue";
import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
export default defineComponent({
name: "ReBreadCrumb",
setup() {
const levelList: Ref<RouteLocationMatched[]> = ref([]);
const route = useRoute();
const router = useRouter();
@ -65,12 +45,25 @@ export default defineComponent({
}
router.push(path);
};
return { levelList, handleLink };
}
});
</script>
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group appear name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span
v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
class="no-redirect"
>{{ $t(item.meta.title) }}</span
>
<a v-else @click.prevent="handleLink(item)">
{{ $t(item.meta.title) }}
</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
display: inline-block;

View File

@ -1,48 +1,17 @@
<template>
<div class="flip-clock">
<flippers ref="flipperHour1" />
<flippers ref="flipperHour2" />
<em>:</em>
<flippers ref="flipperMinute1" />
<flippers ref="flipperMinute2" />
<em>:</em>
<flippers ref="flipperSecond1" />
<flippers ref="flipperSecond2" />
</div>
</template>
<script lang="ts">
<script setup lang="ts">
import { ref, unref, nextTick, onUnmounted } from "vue";
import { templateRef } from "@vueuse/core";
import flippers from "./Filpper";
import { templateRef } from "@vueuse/core";
export default {
name: "Flop",
components: {
flippers
},
setup() {
let timer = ref(null);
let flipObjs = ref([]);
const flipperHour1 = templateRef<HTMLElement | null>("flipperHour1", null);
const flipperHour2 = templateRef<HTMLElement | null>("flipperHour2", null);
const flipperMinute1 = templateRef<HTMLElement | null>(
"flipperMinute1",
null
);
const flipperMinute2 = templateRef<HTMLElement | null>(
"flipperMinute2",
null
);
const flipperSecond1 = templateRef<HTMLElement | null>(
"flipperSecond1",
null
);
const flipperSecond2 = templateRef<HTMLElement | null>(
"flipperSecond2",
null
);
const flipperMinute1 = templateRef<HTMLElement | null>("flipperMinute1", null);
const flipperMinute2 = templateRef<HTMLElement | null>("flipperMinute2", null);
const flipperSecond1 = templateRef<HTMLElement | null>("flipperSecond1", null);
const flipperSecond2 = templateRef<HTMLElement | null>("flipperSecond2", null);
//
const init = () => {
@ -133,25 +102,21 @@ export default {
timer.value = null;
}
});
return {
timer,
flipObjs,
init,
run,
formatDate,
padLeftZero,
flipperHour1,
flipperHour2,
flipperMinute1,
flipperMinute2,
flipperSecond1,
flipperSecond2
};
}
};
</script>
<template>
<div class="flip-clock">
<flippers ref="flipperHour1" />
<flippers ref="flipperHour2" />
<em>:</em>
<flippers ref="flipperMinute1" />
<flippers ref="flipperMinute2" />
<em>:</em>
<flippers ref="flipperSecond1" />
<flippers ref="flipperSecond2" />
</div>
</template>
<style>
.flip-clock .m-flipper {
margin: 0 3px;

View File

@ -1,53 +1,25 @@
<template>
<div class="control-container">
<!-- 功能按钮 -->
<ul>
<li
v-for="(item, key) in titleLists"
:key="key"
:title="item.text"
:style="{ background: focusIndex === key ? '#ccc' : '' }"
@mouseenter.prevent="onEnter(key)"
@mouseleave.prevent="focusIndex = -1"
>
<button
:ref="'controlButton' + key"
:disabled="item.disabled"
:style="{
cursor: item.disabled === false ? 'pointer' : 'not-allowed'
}"
@click="onControl(item, key)"
>
<span :class="'iconfont ' + item.icon"></span>
<p>{{ item.text }}</p>
</button>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref, onMounted } from "vue";
<script setup lang="ts">
import { ref, unref, onMounted } from "vue";
import { templateRef } from "@vueuse/core";
import { LogicFlow } from "@logicflow/core";
export default defineComponent({
name: "Control",
props: {
lf: null,
catTurboData: Boolean
},
emits: ["catData"],
setup(props, { emit }) {
const controlButton3 = templateRef<HTMLElement | any>(
"controlButton3",
null
);
const controlButton4 = templateRef<HTMLElement | any>(
"controlButton4",
null
);
interface Props {
lf: LogicFlow;
catTurboData?: boolean;
}
let focusIndex = ref(-1);
const props = withDefaults(defineProps<Props>(), {
lf: null
});
const emit = defineEmits<{
(e: "catData"): void;
}>();
const controlButton3 = templateRef<HTMLElement | any>("controlButton3", null);
const controlButton4 = templateRef<HTMLElement | any>("controlButton4", null);
let focusIndex = ref<Number>(-1);
let titleLists = ref([
{
icon: "icon-zoom-out-hs",
@ -109,23 +81,40 @@ export default defineComponent({
onMounted(() => {
props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
unref(titleLists)[3].disabled = unref(controlButton3).disabled =
!undoAble;
unref(titleLists)[4].disabled = unref(controlButton4).disabled =
!redoAble;
unref(titleLists)[3].disabled = unref(controlButton3).disabled = !undoAble;
unref(titleLists)[4].disabled = unref(controlButton4).disabled = !redoAble;
});
});
return {
focusIndex,
titleLists,
onControl,
onEnter
};
}
});
</script>
<template>
<div class="control-container">
<!-- 功能按钮 -->
<ul>
<li
v-for="(item, key) in titleLists"
:key="key"
:title="item.text"
:style="{ background: focusIndex === key ? '#ccc' : '' }"
@mouseenter.prevent="onEnter(key)"
@mouseleave.prevent="focusIndex = -1"
>
<button
:ref="'controlButton' + key"
:disabled="item.disabled"
:style="{
cursor: item.disabled === false ? 'pointer' : 'not-allowed'
}"
@click="onControl(item, key)"
>
<span :class="'iconfont ' + item.icon"></span>
<p>{{ item.text }}</p>
</button>
</li>
</ul>
</div>
</template>
<style scoped>
@import "./assets/iconfont/iconfont.css";

View File

@ -1,23 +1,17 @@
<script setup lang="ts">
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";
const props = defineProps({
graphData: Object
});
</script>
<template>
<vue-json-pretty
:path="'res'"
:deep="3"
:showLength="true"
:data="graphData"
:data="props.graphData"
></vue-json-pretty>
</template>
<script lang="ts">
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";
import { defineComponent } from "vue";
export default defineComponent({
name: "DataDialog",
props: {
graphData: Object
},
components: {
VueJsonPretty
}
});
</script>

View File

@ -1,9 +1,36 @@
<script setup lang="ts">
import { ref, unref } from "vue";
import { LogicFlow } from "@logicflow/core";
interface Props {
lf: LogicFlow;
nodeList: ForDataType<undefined>;
}
const props = withDefaults(defineProps<Props>(), {
lf: null,
nodeList: null
});
let properties = ref({
a: "efrwe",
b: "wewe"
});
const nodeDragNode = item => {
props.lf.dnd.startDrag({
type: item.type,
properties: unref(properties)
});
};
</script>
<template>
<!-- 左侧bpmn元素选择器 -->
<div class="node-panel">
<div
class="node-item"
v-for="item in nodeList"
v-for="item in props.nodeList"
:key="item.text"
@mousedown="nodeDragNode(item)"
>
@ -18,43 +45,6 @@
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from "vue";
export default defineComponent({
name: "NodePanel",
props: {
lf: Object,
nodeList: Array
},
setup(props) {
let node = ref({
type: "rect",
property: {
a: "efrwe",
b: "wewe"
}
});
let properties = ref({
a: "efrwe",
b: "wewe"
});
const nodeDragNode = item => {
props.lf.dnd.startDrag({
type: item.type,
properties: unref(properties)
});
};
return {
node,
properties,
nodeDragNode
};
}
});
</script>
<style scoped>
.node-panel {
position: absolute;

View File

@ -1,8 +1,26 @@
<script setup lang="ts">
export interface Props {
isActive: boolean;
}
const props = withDefaults(defineProps<Props>(), {
isActive: false
});
const emit = defineEmits<{
(e: "toggleClick"): void;
}>();
const toggleClick = () => {
emit("toggleClick");
};
</script>
<template>
<div style="padding: 0 15px" @click="toggleClick">
<div :class="classes.container" @click="toggleClick">
<svg
:class="{ 'is-active': isActive }"
class="hamburger"
:class="props.isActive ? 'is-active' : ''"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
width="64"
@ -15,26 +33,11 @@
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "HamBurger",
props: {
isActive: {
type: Boolean,
default: false
<style module="classes" scoped>
.container {
padding: 0 15px;
}
},
emits: ["toggleClick"],
setup(props, ctx) {
const toggleClick = () => {
ctx.emit("toggleClick");
};
return { toggleClick };
}
});
</script>
</style>
<style scoped>
.hamburger {
@ -44,7 +47,7 @@ export default defineComponent({
height: 20px;
}
.hamburger.is-active {
.is-active {
transform: rotate(180deg);
}
</style>

View File

@ -1,3 +1,97 @@
<script setup lang="ts">
import { ref, PropType, getCurrentInstance, watch, nextTick, toRef } from "vue";
import { useRouter, useRoute } from "vue-router";
import { initRouter } from "/@/router";
import { storageSession } from "/@/utils/storage";
export interface ContextProps {
userName: string;
passWord: string;
verify: number | null;
svg: any;
telephone?: number;
dynamicText?: string;
}
const props = defineProps({
ruleForm: {
type: Object as PropType<ContextProps>
}
});
const emit = defineEmits<{
(e: "onBehavior", evt: Object): void;
(e: "refreshVerify"): void;
}>();
const instance = getCurrentInstance();
const model = toRef(props, "ruleForm");
let tips = ref<string>("注册");
let tipsFalse = ref<string>("登录");
const route = useRoute();
const router = useRouter();
watch(
route,
async ({ path }): Promise<void> => {
await nextTick();
path.includes("register")
? (tips.value = "登录") && (tipsFalse.value = "注册")
: (tips.value = "注册") && (tipsFalse.value = "登录");
},
{ immediate: true }
);
const rules: Object = ref({
userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
passWord: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, message: "密码长度必须不小于6位", trigger: "blur" }
],
verify: [
{ required: true, message: "请输入验证码", trigger: "blur" },
{ type: "number", message: "验证码必须是数字类型", trigger: "blur" }
]
});
//
const onBehavior = (evt: Object): void => {
instance.refs.ruleForm.validate((valid: boolean) => {
if (valid) {
emit("onBehavior", evt);
} else {
return false;
}
});
};
//
const refreshVerify = (): void => {
emit("refreshVerify");
};
//
const resetForm = (): void => {
instance.refs.ruleForm.resetFields();
};
//
const changPage = (): void => {
tips.value === "注册" ? router.push("/register") : router.push("/login");
};
const noSecret = (): void => {
storageSession.setItem("info", {
username: "admin",
accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
});
initRouter("admin").then(() => {});
router.push("/");
};
</script>
<template>
<div class="info">
<el-form :model="model" :rules="rules" ref="ruleForm" class="rule-form">
@ -47,123 +141,6 @@
</div>
</template>
<script lang="ts">
import {
ref,
defineComponent,
PropType,
getCurrentInstance,
watch,
nextTick,
toRef
} from "vue";
import { storageSession } from "/@/utils/storage";
export interface ContextProps {
userName: string;
passWord: string;
verify: number | null;
svg: any;
telephone?: number;
dynamicText?: string;
}
import { useRouter, useRoute } from "vue-router";
import { initRouter } from "/@/router";
export default defineComponent({
name: "Info",
props: {
ruleForm: {
type: Object as PropType<ContextProps>,
require: true
}
},
emits: ["onBehavior", "refreshVerify"],
setup(props, ctx) {
const instance = getCurrentInstance();
const model = toRef(props, "ruleForm");
let tips = ref("注册");
let tipsFalse = ref("登录");
const route = useRoute();
const router = useRouter();
watch(
route,
async ({ path }): Promise<void> => {
await nextTick();
path.includes("register")
? (tips.value = "登录") && (tipsFalse.value = "注册")
: (tips.value = "注册") && (tipsFalse.value = "登录");
},
{ immediate: true }
);
const rules: Object = ref({
userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
passWord: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, message: "密码长度必须不小于6位", trigger: "blur" }
],
verify: [
{ required: true, message: "请输入验证码", trigger: "blur" },
{ type: "number", message: "验证码必须是数字类型", trigger: "blur" }
]
});
//
const onBehavior = (evt: Object): void => {
instance.refs.ruleForm.validate((valid: boolean) => {
if (valid) {
ctx.emit("onBehavior", evt);
} else {
return false;
}
});
};
//
const refreshVerify = (): void => {
ctx.emit("refreshVerify");
};
//
const resetForm = (): void => {
instance.refs.ruleForm.resetFields();
};
//
const changPage = (): void => {
tips.value === "注册" ? router.push("/register") : router.push("/login");
};
const noSecret = (): void => {
storageSession.setItem("info", {
username: "admin",
accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
});
initRouter("admin").then(() => {});
router.push("/");
};
return {
model,
rules,
tips,
tipsFalse,
resetForm,
onBehavior,
refreshVerify,
changPage,
noSecret
};
}
});
</script>
<style lang="scss" scoped>
.info {
width: 30vw;

View File

@ -1,6 +1,5 @@
import { App } from "vue";
import amap from "./src/Amap.vue";
import baiduMap from "./src/BaiduMap.vue";
export const Amap = Object.assign(amap, {
install(app: App) {
@ -8,13 +7,6 @@ export const Amap = Object.assign(amap, {
}
});
export const BaiduMap = Object.assign(baiduMap, {
install(app: App) {
app.component(baiduMap.name, baiduMap);
}
});
export default {
Amap,
BaiduMap
Amap
};

View File

@ -1,45 +1,17 @@
<template>
<div
id="mapview"
ref="mapview"
v-loading="loading"
element-loading-text="地图加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
></div>
</template>
<script lang="ts">
<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import {
reactive,
toRefs,
defineComponent,
onBeforeMount,
getCurrentInstance
} from "vue";
import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from "vue";
import { mapJson } from "/@/api/mock";
import { deviceDetection } from "/@/utils/deviceDetection";
import greenCar from "/@/assets/green.png";
let MarkerCluster;
export interface MapConfigureInter {
// eslint-disable-next-line no-undef
on: Fn;
// eslint-disable-next-line no-undef
destroy?: Fn;
// eslint-disable-next-line no-undef
clearEvents?: Fn;
// eslint-disable-next-line no-undef
addControl?: Fn;
// eslint-disable-next-line no-undef
setCenter?: Fn;
// eslint-disable-next-line no-undef
setZoom?: Fn;
// eslint-disable-next-line no-undef
plugin?: Fn;
}
@ -47,12 +19,11 @@ export interface mapInter {
loading: boolean;
}
export default defineComponent({
name: "Amap",
setup() {
const instance = getCurrentInstance();
let MarkerCluster;
let map: MapConfigureInter;
const instance = getCurrentInstance();
const mapSet: mapInter = reactive({
loading: deviceDetection() ? false : true
});
@ -66,17 +37,9 @@ export default defineComponent({
}
};
//
const destroyMap = (): void => {
if (map) {
map.destroy() && map.clearEvents("click");
}
};
onBeforeMount(() => {
if (!instance) return;
let { MapConfigure } =
instance.appContext.config.globalProperties.$config;
let { MapConfigure } = instance.appContext.config.globalProperties.$config;
let { options } = MapConfigure;
AMapLoader.load({
@ -100,7 +63,8 @@ export default defineComponent({
});
MarkerCluster = new AMap.MarkerCluster(map, [], {
gridSize: 80, //
//
gridSize: 80,
maxZoom: 14,
renderMarker(ctx) {
let { marker, data } = ctx;
@ -112,8 +76,10 @@ export default defineComponent({
marker.setContent(content);
marker.setLabel({
direction: "bottom",
offset: new AMap.Pixel(-4, 0), //
content: `<div> ${plateNumber}(${driver})</div>` //
//
offset: new AMap.Pixel(-4, 0),
//
content: `<div> ${plateNumber}(${driver})</div>`
});
marker.setOffset(new AMap.Pixel(-18, -10));
marker.on("click", ({ lnglat }) => {
@ -147,16 +113,25 @@ export default defineComponent({
});
});
return {
...toRefs(mapSet),
complete,
destroyMap,
greenCar
};
onUnmounted(() => {
if (map) {
//
map.destroy() && map.clearEvents("click");
}
});
</script>
<template>
<div
id="mapview"
ref="mapview"
v-loading="mapSet.loading"
element-loading-text="地图加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
></div>
</template>
<style lang="scss" scoped>
#mapview {
height: 100%;

View File

@ -1,14 +0,0 @@
<template>
<div></div>
</template>
<script lang="ts">
export default {
name: "BaiduMap",
setup() {
return {};
}
};
</script>
<style scoped></style>

View File

@ -1,41 +1,6 @@
<template>
<div :ref="'wrap' + classOption['key']">
<div
:style="leftSwitch"
v-if="navigation"
:class="leftSwitchClass"
@click="leftSwitchClick"
>
<slot name="left-switch"></slot>
</div>
<div
:style="rightSwitch"
v-if="navigation"
:class="rightSwitchClass"
@click="rightSwitchClick"
>
<slot name="right-switch"></slot>
</div>
<div
:ref="'realBox' + classOption['key']"
:style="pos"
@mouseenter="enter"
@mouseleave="leave"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
@mousewheel="wheel"
>
<div :ref="'slotList' + classOption['key']" :style="float">
<slot></slot>
</div>
<div v-html="copyHtml" :style="float"></div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, computed, ref, unref, nextTick } from "vue";
<script setup lang="ts">
import { computed, ref, unref, nextTick } from "vue";
import type { CSSProperties, PropType } from "vue";
import {
tryOnMounted,
tryOnUnmounted,
@ -46,35 +11,29 @@ import * as utilsMethods from "./utils";
const { animationFrame, copyObj } = utilsMethods;
animationFrame();
export default defineComponent({
name: "SeamlessScroll",
props: {
const props = defineProps({
data: {
type: Array,
default: () => {
return [];
}
type: Array as PropType<unknown>
},
classOption: {
type: Object,
default: () => {
return {};
type: Object as PropType<unknown>
}
}
},
emits: ["ScrollEnd"],
setup(props, { emit }) {
let xPos = ref(0);
let yPos = ref(0);
let delay = ref(0);
let copyHtml = ref("");
let height = ref(0);
//
let width = ref(0);
//
let realBoxWidth = ref(0);
let realBoxHeight = ref(0);
});
const emit = defineEmits<{
(e: "scrollEnd"): void;
}>();
let xPos = ref<number>(0);
let yPos = ref<number>(0);
let delay = ref<number>(0);
let height = ref<number>(0);
//
let width = ref<number>(0);
//
let realBoxWidth = ref<number>(0);
let realBoxHeight = ref<number>(0);
let copyHtml = ref("");
// single
let singleWaitTime = null;
// moveanimationFrame
@ -95,10 +54,7 @@ export default defineComponent({
classOption["key"] = 0;
}
const wrap = templateRef<HTMLElement | null>(
`wrap${classOption["key"]}`,
null
);
const wrap = templateRef<HTMLElement | null>(`wrap${classOption["key"]}`, null);
const slotList = templateRef<HTMLElement | null>(
`slotList${classOption["key"]}`,
null
@ -150,7 +106,7 @@ export default defineComponent({
return copyObj({}, unref(defaultOption), classOption);
});
let leftSwitchClass = computed(() => {
const leftSwitchClass = computed(() => {
return unref(leftSwitchState) ? "" : unref(options).switchDisabledClass;
});
@ -158,7 +114,7 @@ export default defineComponent({
return unref(rightSwitchState) ? "" : unref(options).switchDisabledClass;
});
let leftSwitch = computed(() => {
let leftSwitch = computed((): CSSProperties => {
return {
position: "absolute",
margin: `${unref(height) / 2}px 0 0 -${unref(options).switchOffset}px`,
@ -166,7 +122,7 @@ export default defineComponent({
};
});
let rightSwitch = computed(() => {
let rightSwitch = computed((): CSSProperties => {
return {
position: "absolute",
margin: `${unref(height) / 2}px 0 0 ${
@ -178,12 +134,11 @@ export default defineComponent({
let isHorizontal = computed(() => {
return (
unref(options).direction !== "bottom" &&
unref(options).direction !== "top"
unref(options).direction !== "bottom" && unref(options).direction !== "top"
);
});
let float = computed(() => {
let float = computed((): CSSProperties => {
return unref(isHorizontal)
? { float: "left", overflow: "hidden" }
: { overflow: "hidden" };
@ -221,9 +176,7 @@ export default defineComponent({
let baseFontSize = computed(() => {
return unref(options).isSingleRemUnit
? parseInt(
window.getComputedStyle(document.documentElement, null).fontSize
)
? parseInt(window.getComputedStyle(document.documentElement, null).fontSize)
: 1;
});
@ -386,28 +339,28 @@ export default defineComponent({
if (direction === "top") {
//
if (Math.abs(unref(yPos)) >= h) {
emit("ScrollEnd");
emit("scrollEnd");
yPos.value = 0;
}
yPos.value -= step.value;
} else if (direction === "bottom") {
//
if (unref(yPos) >= 0) {
emit("ScrollEnd");
emit("scrollEnd");
yPos.value = h * -1;
}
yPos.value += step.value;
} else if (direction === "left") {
//
if (Math.abs(unref(xPos)) >= w) {
emit("ScrollEnd");
emit("scrollEnd");
xPos.value = 0;
}
xPos.value -= step.value;
} else if (direction === "right") {
//
if (unref(xPos) >= 0) {
emit("ScrollEnd");
emit("scrollEnd");
xPos.value = w * -1;
}
xPos.value += step.value;
@ -415,10 +368,7 @@ export default defineComponent({
if (singleWaitTime) clearTimeout(singleWaitTime);
if (unref(realSingleStopHeight)) {
//
if (
Math.abs(unref(yPos)) % unref(realSingleStopHeight) <
unref(step)
) {
if (Math.abs(unref(yPos)) % unref(realSingleStopHeight) < unref(step)) {
// waitTime
singleWaitTime = setTimeout(() => {
scrollMove();
@ -427,10 +377,7 @@ export default defineComponent({
scrollMove();
}
} else if (unref(realSingleStopWidth)) {
if (
Math.abs(unref(xPos)) % unref(realSingleStopWidth) <
unref(step)
) {
if (Math.abs(unref(xPos)) % unref(realSingleStopWidth) < unref(step)) {
// waitTime
singleWaitTime = setTimeout(() => {
scrollMove();
@ -501,6 +448,19 @@ export default defineComponent({
scrollCancle();
}
//
function wheel(e) {
e.preventDefault();
if (
unref(options).direction === "left" ||
unref(options).direction === "right"
)
return;
useDebounceFn(() => {
e.deltaY > 0 ? (yPos.value -= step.value) : (yPos.value += step.value);
}, 50)();
}
// watchEffect(() => {
// const watchData = data;
// if (!watchData) return;
@ -516,19 +476,6 @@ export default defineComponent({
// }
// });
//
function wheel(e) {
e.preventDefault();
if (
unref(options).direction === "left" ||
unref(options).direction === "right"
)
return;
useDebounceFn(() => {
e.deltaY > 0 ? (yPos.value -= step.value) : (yPos.value += step.value);
}, 50)();
}
tryOnMounted(() => {
scrollInitMove();
});
@ -538,48 +485,43 @@ export default defineComponent({
clearTimeout(singleWaitTime);
});
return {
xPos,
yPos,
delay,
copyHtml,
height,
width,
realBoxWidth,
leftSwitchState,
rightSwitchState,
options,
leftSwitchClass,
rightSwitchClass,
leftSwitch,
rightSwitch,
isHorizontal,
float,
pos,
navigation,
autoPlay,
scrollSwitch,
hoverStopSwitch,
canTouchScroll,
baseFontSize,
realSingleStopWidth,
realSingleStopHeight,
step,
reset,
leftSwitchClick,
rightSwitchClick,
scrollCancle,
touchStart,
touchMove,
touchEnd,
enter,
leave,
scrollMove,
scrollInitMove,
scrollStartMove,
scrollStopMove,
wheel
};
}
defineExpose({
reset
});
</script>
<template>
<div :ref="'wrap' + classOption['key']">
<div
:style="leftSwitch"
v-if="navigation"
:class="leftSwitchClass"
@click="leftSwitchClick"
>
<slot name="left-switch"></slot>
</div>
<div
:style="rightSwitch"
v-if="navigation"
:class="rightSwitchClass"
@click="rightSwitchClick"
>
<slot name="right-switch"></slot>
</div>
<div
:ref="'realBox' + classOption['key']"
:style="pos"
@mouseenter="enter"
@mouseleave="leave"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
@mousewheel="wheel"
>
<div :ref="'slotList' + classOption['key']" :style="float">
<slot></slot>
</div>
<div v-html="copyHtml" :style="float"></div>
</div>
</div>
</template>

View File

@ -2,7 +2,7 @@
* @desc AnimationFrame简单兼容hack
*/
export const animationFrame = () => {
window.cancelAnimationFrame = (function () {
window.cancelAnimationFrame = (() => {
return (
window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||

View File

@ -24,7 +24,7 @@
"/#/*": ["types/*"]
},
"types": ["node", "vite/client"],
"typeRoots": ["./node_modules/@types/", "./types"]
"typeRoots": ["./node_modules/@types/", "./types", "./vue-types"]
},
"include": [
"src/**/*.ts",

13
types/global.d.ts vendored
View File

@ -20,13 +20,14 @@ declare global {
// Global vue app instance
__APP__: App<Element>;
webkitCancelAnimationFrame: (handle: number) => void;
mozCancelAnimationFrame: (handle: number) => void;
oCancelAnimationFrame: (handle: number) => void;
msCancelAnimationFrame: (handle: number) => void;
webkitRequestAnimationFrame: (callback: FrameRequestCallback) => number;
mozCancelAnimationFrame: (id?: string) => any;
oCancelAnimationFrame: (id?: string) => any;
msCancelAnimationFrame: (id?: string) => any;
mozRequestAnimationFrame: (id?: string) => any;
oRequestAnimationFrame: (id?: string) => any;
msRequestAnimationFrame: (id?: string) => any;
mozRequestAnimationFrame: (callback: FrameRequestCallback) => number;
oRequestAnimationFrame: (callback: FrameRequestCallback) => number;
msRequestAnimationFrame: (callback: FrameRequestCallback) => number;
}
// vue

4
types/index.d.ts vendored
View File

@ -25,3 +25,7 @@ declare type ComponentRef<T extends HTMLElement = HTMLDivElement> =
ComponentElRef<T> | null;
declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
declare type ForDataType<T> = {
[P in T]?: ForDataType<T[P]>;
};

124
yarn.lock
View File

@ -786,6 +786,17 @@
estree-walker "^2.0.2"
source-map "^0.6.1"
"@vue/compiler-core@3.2.12":
version "3.2.12"
resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.12.tgz#23998d6986a45e1ab0424130cc0ad00e33da1101"
integrity sha512-IGJ0JmrAaAl5KBBegPAKkoXvsfDFgN/h7K1t/+0MxqpZF1fTDVUOp3tG7q9gWa7fwzGEaIsPhjtT5C3qztdLKg==
dependencies:
"@babel/parser" "^7.15.0"
"@babel/types" "^7.15.0"
"@vue/shared" "3.2.12"
estree-walker "^2.0.2"
source-map "^0.6.1"
"@vue/compiler-dom@3.2.11":
version "3.2.11"
resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.11.tgz#d066f8e1f1812b4e881593819ade0fe6d654c776"
@ -794,7 +805,15 @@
"@vue/compiler-core" "3.2.11"
"@vue/shared" "3.2.11"
"@vue/compiler-sfc@^3.0.11", "@vue/compiler-sfc@^3.2.11":
"@vue/compiler-dom@3.2.12":
version "3.2.12"
resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.12.tgz#d6ba00114e73adb8b18940c3ff18797cc2b0514f"
integrity sha512-MulvKilA2USm8ubPfvXvNY55HVTn+zHERsXeNg437TXrmM4FRCis6zjWW47QZ3ZyxEkCdqOmuiFCtXbpnuthyw==
dependencies:
"@vue/compiler-core" "3.2.12"
"@vue/shared" "3.2.12"
"@vue/compiler-sfc@^3.0.11":
version "3.2.11"
resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.11.tgz#628fa12238760d9b9b339ac2e125a759224fadbf"
integrity sha512-cUIaS8mgJrQ6yucj2AupWAwBRITK3W/a8wCOn9g5fJGtOl8h4APY8vN3lzP8HIJDyEeRF3I8SfRhL+oX97kSnw==
@ -818,6 +837,30 @@
postcss-selector-parser "^6.0.4"
source-map "^0.6.1"
"@vue/compiler-sfc@^3.2.12":
version "3.2.12"
resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.12.tgz#39555550d96051508753ba934f7260dc5ee5211e"
integrity sha512-EjzeMQ7H2ICj+JRw2buSFXTocdCg8e5yWQTlNM/6h/u68sTwMbIfiOJBFEwBhG/wCG7Nb6Nnz888AfHTU3hdrA==
dependencies:
"@babel/parser" "^7.15.0"
"@babel/types" "^7.15.0"
"@types/estree" "^0.0.48"
"@vue/compiler-core" "3.2.12"
"@vue/compiler-dom" "3.2.12"
"@vue/compiler-ssr" "3.2.12"
"@vue/ref-transform" "3.2.12"
"@vue/shared" "3.2.12"
consolidate "^0.16.0"
estree-walker "^2.0.2"
hash-sum "^2.0.0"
lru-cache "^5.1.1"
magic-string "^0.25.7"
merge-source-map "^1.1.0"
postcss "^8.1.10"
postcss-modules "^4.0.0"
postcss-selector-parser "^6.0.4"
source-map "^0.6.1"
"@vue/compiler-ssr@3.2.11":
version "3.2.11"
resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.11.tgz#702cef3429651645bdbe09fe5962803b5a621abb"
@ -826,6 +869,14 @@
"@vue/compiler-dom" "3.2.11"
"@vue/shared" "3.2.11"
"@vue/compiler-ssr@3.2.12":
version "3.2.12"
resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.12.tgz#32e5d4bc31c371c125b43e9d07b8a8f70442b080"
integrity sha512-sY+VbLQ17FPr1CgirnqEgY+jbC7wI5c2Ma6u8le0+b4UKMYF9urI2pybAZc1nKz6O78FWA3OSnQFxTTLppe+9Q==
dependencies:
"@vue/compiler-dom" "3.2.12"
"@vue/shared" "3.2.12"
"@vue/devtools-api@^6.0.0-beta.13", "@vue/devtools-api@^6.0.0-beta.14", "@vue/devtools-api@^6.0.0-beta.15":
version "6.0.0-beta.15"
resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
@ -852,6 +903,13 @@
dependencies:
"@vue/shared" "3.2.11"
"@vue/reactivity@3.2.12":
version "3.2.12"
resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.12.tgz#b482a737cbdc891f9b1ec3100f3c1804b56d080b"
integrity sha512-Lr5CTQjFm5mT/6DGnVNhptmba/Qg1DbD6eNWWmiHLMlpPt4q2ww9A2orEjVw0qNcdTJ04JLPEVAz5jhTZTCfIg==
dependencies:
"@vue/shared" "3.2.12"
"@vue/ref-transform@3.2.11":
version "3.2.11"
resolved "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.11.tgz#4d282b9570d1485a73e7bf5d57cce27b4a7aa690"
@ -863,6 +921,17 @@
estree-walker "^2.0.2"
magic-string "^0.25.7"
"@vue/ref-transform@3.2.12":
version "3.2.12"
resolved "https://registry.npmjs.org/@vue/ref-transform/-/ref-transform-3.2.12.tgz#6f7fa46dd84447ddcf54adfb1b689b1cf4243de0"
integrity sha512-lS7TDda61iSf3ljokXVfN0VbOsQdmpST6MZLjxzBydFCECCJaEAr6o+K8VZ7NhUCSrl+gKXHpdXxmcvwdk66aQ==
dependencies:
"@babel/parser" "^7.15.0"
"@vue/compiler-core" "3.2.12"
"@vue/shared" "3.2.12"
estree-walker "^2.0.2"
magic-string "^0.25.7"
"@vue/runtime-core@3.2.11":
version "3.2.11"
resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.11.tgz#0dbe801be4bd0bfde253226797e7d304c8fdda30"
@ -871,6 +940,14 @@
"@vue/reactivity" "3.2.11"
"@vue/shared" "3.2.11"
"@vue/runtime-core@3.2.12":
version "3.2.12"
resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.12.tgz#422662fd5b85f787222d2aea840264ba97e84a13"
integrity sha512-LO+ztgcmsomavYUaSq7BTteh8pmnUmvUnXUFVYdlcg3VCdYRS0ImlclpYsNHqjAk2gU+H09dr2PP0kL961xUfQ==
dependencies:
"@vue/reactivity" "3.2.12"
"@vue/shared" "3.2.12"
"@vue/runtime-dom@3.2.11":
version "3.2.11"
resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.11.tgz#04f9054a9e64bdf156c2fc22cad67cfaa8b84616"
@ -880,17 +957,31 @@
"@vue/shared" "3.2.11"
csstype "^2.6.8"
"@vue/runtime-dom@3.2.12":
version "3.2.12"
resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.12.tgz#d9fe865dca36f9ca33ba327afdeb89ae2aa03f4c"
integrity sha512-+NSDqivgihvoPYbKFDmzFu1tW7SOzwc7r0b7T8vsJtooVPGxwtfAFZ6wyLtteOXXrCpyTR3kpyTCIp31uY7aJg==
dependencies:
"@vue/runtime-core" "3.2.12"
"@vue/shared" "3.2.12"
csstype "^2.6.8"
"@vue/shared@3.2.11":
version "3.2.11"
resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.11.tgz#01899f54949caf1ac241de397bd17069632574de"
integrity sha512-ovfXAsSsCvV9JVceWjkqC/7OF5HbgLOtCWjCIosmPGG8lxbPuavhIxRH1dTx4Dg9xLgRTNLvI3pVxG4ItQZekg==
"@vueuse/core@^6.0.0":
version "6.3.3"
resolved "https://registry.npmjs.org/@vueuse/core/-/core-6.3.3.tgz#0682c01b50d28e91d3d76f27278600ee1692fa24"
integrity sha512-qa/0WYqcvqFKQmlkgsLGlXBrYcQeUi3fzHMIaxsD/lO/zm0IWBSN8CTFu91LwER5qNYs4DGhU5pu7jOdrTzAIQ==
"@vue/shared@3.2.12":
version "3.2.12"
resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.12.tgz#304064a4b56fc6c7b9169d80e9ee62ecb4bf0a1c"
integrity sha512-5CkaifUCJwcTuru7FDwKFacPJuEoGUTw0LKSa5bw40B23s0TS+MGlYR1285nbV/ju3QUGlA6d6PD+GJkWy7uFg==
"@vueuse/core@^6.4.1":
version "6.4.1"
resolved "https://registry.npmjs.org/@vueuse/core/-/core-6.4.1.tgz#21416997a23bfb4924a5082ed6fa959027f80d04"
integrity sha512-FRFeEPVq77gcMZP0mCloJY+lyHJaUQmUMaPp5fBds3fs/BbkAt7HTMMizFKHWDVjbmA20vBOjmC9tTnfD+DdEA==
dependencies:
"@vueuse/shared" "6.3.3"
"@vueuse/shared" "6.4.1"
vue-demi "*"
"@vueuse/core@~6.1.0":
@ -908,10 +999,10 @@
dependencies:
vue-demi "*"
"@vueuse/shared@6.3.3":
version "6.3.3"
resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-6.3.3.tgz#4e5c600ad1ed5bf2a8630ad0bd38edb1f4269f37"
integrity sha512-2+YPRhFNUXEhhvKNTWBtNU6hGkft9+mfYSVjI4hZu2U8KDbNNKF/215lBPzMYI2twScDtPsAssQ+vu5t9PBy0g==
"@vueuse/shared@6.4.1":
version "6.4.1"
resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-6.4.1.tgz#5bc84be107cead84e11c21d2c57b1e9f2c376975"
integrity sha512-zsaYxxZwACQbMmGg+UBjPUVemi325sDdnnB0mn+PNizE0fVC57B+vbLgdj45NBmr6P4nw6a0Y2rMupebwDWsdw==
dependencies:
vue-demi "*"
@ -4498,14 +4589,14 @@ vue-router@^4.0.11:
dependencies:
"@vue/devtools-api" "^6.0.0-beta.14"
vue-types@^4.0.3:
vue-types@^4.1.0:
version "4.1.0"
resolved "https://registry.npmjs.org/vue-types/-/vue-types-4.1.0.tgz#8dcbbaccf9d5c3815449ac7cb8ae5864454cfff0"
integrity sha512-oPAeKKx5vY5Q8c7lMQPQyrBIbmWQGael5XEHqO1f+Y3V/RUZNuISz7KxI4woGjh79Vy/gDDaPX9j9zKYpaaA2g==
dependencies:
is-plain-object "5.0.0"
vue@^3.1.1, vue@^3.2.11:
vue@^3.1.1:
version "3.2.11"
resolved "https://registry.npmjs.org/vue/-/vue-3.2.11.tgz#6b92295048df705ddac558fd3e3ed553e55e57c8"
integrity sha512-JkI3/eIgfk4E0f/p319TD3EZgOwBQfftgnkRsXlT7OrRyyiyoyUXn6embPGZXSBxD3LoZ9SWhJoxLhFh5AleeA==
@ -4514,6 +4605,15 @@ vue@^3.1.1, vue@^3.2.11:
"@vue/runtime-dom" "3.2.11"
"@vue/shared" "3.2.11"
vue@^3.2.12:
version "3.2.12"
resolved "https://registry.npmjs.org/vue/-/vue-3.2.12.tgz#b44f55506fb6a7c4b65635e609deb5f9368aa2ce"
integrity sha512-VV14HtubmB56uuQaSvLkJZgoocPiN8CJI3zZA9y8h7q/Z5hcknDIFkbq5d8ku0ukZ6AJPQqMsZWcq0qryF0jgg==
dependencies:
"@vue/compiler-dom" "3.2.12"
"@vue/runtime-dom" "3.2.12"
"@vue/shared" "3.2.12"
vuedraggable@^4.1.0:
version "4.1.0"
resolved "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"