侧边栏折叠按钮
左边是普通状态, 右边是移入状态
仿造Native UI 的sider 折叠按钮写的组件,移入有不同效果
<template>
<div class="go-toggle-bar" :class="{ isPack: !chartLayoutStore.getCharts }" @click="onToggle">
<div class="bar-top"></div>
<div class="bar-bottom"></div>
</div>
</template>
<script setup lang="ts">
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
const chartLayoutStore = useChartLayoutStore()
/**
* 收放左侧侧边栏
*/
const onToggle = () => {
chartLayoutStore.setItem(ChartLayoutStoreEnum.CHARTS, !chartLayoutStore.getCharts)
}
</script>
<style lang="scss" scoped>
@include go('toggle-bar') {
position: fixed;
top: calc(50% - 6px);
left: 328px;
transform: rotate(0deg);
height: 72px;
width: 32px;
cursor: pointer;
z-index: 999;
transition: left 0.3s;
&.isPack {
transform: rotate(180deg);
left: 63px;
}
&:hover {
.bar-top {
transform: rotate(12deg) scale(1.15) translateY(-2px);
}
.bar-bottom {
transform: rotate(-12deg) scale(1.15) translateY(2px);
}
}
.bar-top,
.bar-bottom {
position: absolute;
left: 14px;
width: 4px;
border-radius: 2px;
height: 38px;
background-color: rgba(64, 64, 67, 1);
transition: background-color .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}
.bar-bottom {
top: 34px;
}
}
</style>
svg容器组件
封装svg 容器组件, 生成el-icon的使用方式
方案一: vite-plugin-svg-icons
1. 安装依赖
npm install vite-plugin-svg-icons -D 2. vite配置 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
// 指定目录(svg存放目录）
iconDirs: [path.resolve(process.cwd(), "src/assets/svgs")],
// 使用 svg 图标的格式（name为图片名称）
symbolId: "icon-[name]",
//生成组件插入位置 只有两个值 boby-last | body-first
inject: 'body-last'
})
],
})
3. main引入 main.js
import 'virtual:svg-icons-register';
4. 封装svgIcon组件 src/components/svgIcon/index.vue
<template>
<svg
aria-hidden="true"
:width="width"
:height="height"
:fill="color"
v-bind="$attrs"
>
<use :xlink:href="`#icon-${name}`"/>
</svg>
</template>
<script setup lang="ts">
defineProps({
name: String,
width: {
type: String,
default: '20',
},
height: {
type: String,
default: '20',
},
color: {
type: String,
default: 'red',
}
})
</script>
5. 使用
<template>
<SvgIcon name="close" width="24" height="24"></SvgIcon>
</template>
<script setup>
import SvgIcon from "@/components/svg-icon/svg-icon.vue";
</script>
方案二: 利用css 遮罩实现
CSS 中的 mask 属性用于创建遮罩效果，它可以通过另一个图像或者 SVG 图像来定义遮罩的形状。mask 属性可以应用于任何可视元素，并将遮罩应用于元素的内容和背景。
<template>
<div class="bot-svg-icon" :style="svgStyle"></div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
const props = defineProps({
url: String,
width: {
type: String,
default: '20',
},
height: {
type: String,
default: '20',
},
color: {
type: String,
default: 'red',
},
})
const svgStyle = computed(() => ({
width: props.width + 'px',
height: props.height + 'px',
backgroundColor: props.color,
maskImage: `url(${props.url})`,
}));
</script>
<style scoped>
.bot-svg-icon {
display: inline-block;
mask-repeat: no-repeat;
mask-size: cover;
}
</style>
tabs
灵活自定义化的tabs, 方便生成带下横线或者背景图的tabs
<template>
<div :class="['tabs', options && options.class]">
<div
v-for="(item, index) in tabs"
:key="item.name"
:class="['tabs-item', activeTab === index ? 'active' : '']"
@click="handleClick(item, index)"
>
<!-- 下划线 -->
<img v-if="options && options.class === 'tabs-line' && activeTab === index" src="@/assets/images/tab下划线.svg" />
{{ item.name }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
interface ITabs {
[key: string]: string;
}
interface IOptions {
class: string;
activeTab?: number;
}
const props = defineProps<{ tabs: ITabs[]; options?: IOptions }>();
const emit = defineEmits(['tabChange']);
//选中tab
const activeTab = ref(0);
onMounted(() => {
activeTab.value = (props.options && props.options.activeTab) || 0;
});
/**
* tabs点击方法
* @param {{}} item
*/
const handleClick = (item, index) => {
activeTab.value = index;
emit('tabChange', item);
};
</script>
<style scoped lang="scss">
.tabs {
display: flex;
.tabs-item {
cursor: pointer;
}
.active {
font-weight: 550;
}
}
/* 背景图式 */
.tabs-bg {
padding: 2px;
background: url('../../../assets/images/tab背景.svg') 0 0 / 100% 100% no-repeat !important;
.tabs-item {
padding: 5px 8px;
}
.active {
background: #0d8b92;
}
}
/* 下划线式 */
.tabs-line {
.tabs-item {
position: relative;
padding: 0 10px;
img {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
}
}
.active {
color: #2acdd5;
}
}
</style>
其他组件调用
// template
<Tabs class="dealTabs" :tabs="dealTabs" :options="{ class: 'tabs-line' }" />
// js
import Tabs from '@/components/common/tabs/index.vue';
const dealTabs = ref([{ name: '待处理' }, { name: '已处理' }]);
// css重写部分样式
:deep(.dealTabs) {
.active {
}
}
WebSocket
使用es6 webSocket 编写hook方法useWebSocket
暴露属性和方法 socketData, Socket, send
import { ref } from 'vue';
const useWebSocket = () => {
const socketData = ref('');
const Socket = new WebSocket('ws://192.168.19.248:9399/websocket/1630840326631677953');
/**
* 连接建立时触发
*/
Socket.onopen = function () {
console.log('socket连接成功');
};
interface IEvt {
data: string;
}
/**
* 客户端接收服务端数据时触发
* @param {type} 参数
* @returns {type} 返回值
*/
Socket.onmessage = function (evt: IEvt) {
//获取服务器端推送过来的消息
socketData.value = evt.data;
};
/**
* 连接关闭时触发
*/
Socket.onclose = function () {
console.log('socket已经关闭');
};
/**
* 通信发生错误时触发
*/
Socket.onerror = function (err) {
console.log('WebSocket连接发生错误', err);
};
/**
* 发送消息给服务器
*/
function send() {
Socket.send('message');
}
return { socketData, Socket, send };
};
export default useWebSocket;
webSocket 增加心跳检测
通过定时器去不断发送心跳消息保证 WebSocket 的连接 监听onclose事件去重新调用连接方法 通过事件监听器抛出原生的 onopen onmessage onclose onerror 和send 方法
import { ref } from "vue";
const useWebSocket = ({ url }) => {
const socketData = ref(""); // websocket数据
const sockInstance = ref(); // websocket实例
const maxReconnectAttempts = 5; // 最大重连数
const reconnectInterval = 10000; // 重连间隔
const heartbeatInterval = 1000 * 30; // 发送心跳数据间隔
const listeners = {}; // 事件监听器
let heartbeatTimer = undefined; // 计时器id
let reconnectAttempts = 0; // 重连次数
let stopWs = false; // 彻底终止ws
/**
* 连接websocket
*/
const connect = () => {
if (
sockInstance.value &&
sockInstance.value.readyState === WebSocket.OPEN
) {
return;
}
sockInstance.value = new WebSocket(url);
/**
* 连接建立时触发
*/
sockInstance.value.onopen = function (event) {
stopWs = false;
// 重置重连尝试成功连接
reconnectAttempts = 0;
// 在连接成功时停止当前的心跳检测并重新启动
startHeartbeat();
dispatchEvent("open", event);
};
/**
* 客户端接收服务端数据时触发
*/
sockInstance.value.onmessage = function (event) {
//获取服务器端推送过来的消息
socketData.value = evt.data;
dispatchEvent("message", event);
startHeartbeat();
};
/**
* 连接关闭时触发
*/
sockInstance.value.onclose = function (event) {
console.log("socket已经关闭", event);
if (!stopWs) {
handleReconnect();
}
dispatchEvent("close", event);
};
/**
* 通信发生错误时触发
*/
sockInstance.value.onerror = function (error) {
console.log("WebSocket连接发生错误", error);
closeHeartbeat();
dispatchEvent("error", error);
};
};
connect();
// 生命周期钩子
function onopen(callBack) {
addEventListener("open", callBack);
}
function onmessage(callBack) {
addEventListener("message", callBack);
}
function onclose(callBack) {
addEventListener("close", callBack);
}
function onerror(callBack) {
addEventListener("error", callBack);
}
/**
* 发送消息给服务器
*/
function send(message) {
if (
sockInstance.value &&
sockInstance.value.readyState === WebSocket.OPEN
) {
sockInstance.value.send(message);
} else {
console.error("[WebSocket] 未连接");
}
}
/**
* 断网重连逻辑
*/
function handleReconnect() {
if (reconnectAttempts < maxReconnectAttempts) {
reconnectAttempts++;
setTimeout(connect, reconnectInterval);
} else {
closeHeartbeat();
}
}
/**
* 关闭连接
*/
function close() {
if (sockInstance.value) {
stopWs = true;
sockInstance.value.close();
sockInstance.value = null;
removeEventListener("open");
removeEventListener("message");
removeEventListener("close");
removeEventListener("error");
}
closeHeartbeat();
}
/**
* 开始心跳检测 -> 定时发送心跳消息
*/
function startHeartbeat() {
if (stopWs) return;
if (heartbeatTimer) {
closeHeartbeat();
}
heartbeatTimer = setInterval(() => {
if (sockInstance.value) {
sockInstance.value.send(
JSON.stringify({ type: "heartBeat", data: {} })
);
} else {
console.error("[WebSocket] 未连接");
}
}, heartbeatInterval);
}
/**
* 关闭心跳
*/
function closeHeartbeat() {
clearInterval(heartbeatTimer);
heartbeatTimer = undefined;
}
/**
* 监听事件
*/
function addEventListener(type, listener) {
if (!listeners[type]) {
listeners[type] = [];
}
if (listeners[type].indexOf(listener) === -1) {
listeners[type].push(listener);
}
}
/**
* 移除事件
*/
function removeEventListener(type) {
listeners[type] = [];
}
/**
* 触发事件
*/
function dispatchEvent(type, data) {
const listenerArray = listeners[type] || [];
if (listenerArray.length === 0) return;
listenerArray.forEach((listener) => {
listener.call(this, data);
});
}
return {
socketData,
sockInstance,
send,
onopen,
onmessage,
onclose,
onerror,
close
};
};
export default useWebSocket;
登录
常用的登录页面,包含结构, 样式, 逻辑
<template>
<div class="login">
<div class="login-panel">
<div class="panel-title">登录</div>
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
<el-form-item prop="telephone">
<div class="item-title">账号</div>
<el-input v-model="ruleForm.telephone" size="large" type="text" />
</el-form-item>
<el-form-item prop="password">
<div class="item-title">密码</div>
<el-input v-model="ruleForm.password" size="large" :type="showPass ? 'text' : 'password'" />
<el-icon @click="showPassword"><Hide v-if="!showPass" /><View v-else /></el-icon>
</el-form-item>
<el-form-item prop="code" class="panel-code">
<div class="item-title">验证码</div>
<el-input v-model="ruleForm.code" size="large" type="text" />
<img :src="authCode.image" @click.stop="getAuthCode" />
</el-form-item>
<el-form-item>
<el-button size="large" color="#0FF8F8" @click="login(ruleFormRef)">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onBeforeMount } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { useRouter } from 'vue-router';
import { UserAPI } from '@/service/api/index';
import { Encrypt } from '@/utils/encrypt';
import { UserStore } from '@/store';
import { elmessage } from '@/utils/utils';
import TipsText from '@/assets/data/message';
const userStore = UserStore(); // pinia实例
const router = useRouter(); // 路由实例
// 加密公钥
const pkValue = ref('');
// 显示密码
const showPass = ref(false);
// 表单ref
const ruleFormRef = ref<FormInstance>();
// 验证码图片
const authCode = ref({
key: '',
image: '',
});
// 表单字段
const ruleForm = reactive({
password: '',
telephone: '',
code: '',
});
// 表单校验
const rules = reactive<FormRules>({
telephone: [{ required: true, message: '请输入账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
});
onBeforeMount(() => {
getAuthCode();
getPk();
});
/**
* 获取加密pk
*/
const getPk = async () => {
try {
const res: any = await UserAPI.getPk();
if (res.code === 200) {
pkValue.value = res.data;
}
} catch (err: any) {
console.log(err);
}
};
/**
* 获取验证码
*/
const getAuthCode = async () => {
try {
const res: any = await UserAPI.getAuthCode();
authCode.value = res;
} catch (err: any) {
console.log(err);
}
};
/**
* 登录
* @param {FormInstance} formEl
*/
const login = async (formEl: FormInstance | undefined) => {
if (!formEl) {
return;
}
await formEl.validate(async (valid, fields) => {
if (valid) {
try {
const params = {
tenantId: '004120',
username: ruleForm.telephone,
password: Encrypt.getKeyEncrypt(ruleForm.password, pkValue.value),
grant_type: 'captcha',
client_id: 'saber',
client_secret: 'saber_secret',
scope: 'all',
type: 'account',
};
await userStore.login(params, ruleForm.code, authCode.value.key);
elmessage({ message: TipsText.loginSuccess });
router.push({ path: '/' });
} catch (error: any) {
elmessage({ message: TipsText.loginFail, type: 'error' });
getAuthCode();
}
} else {
console.log('error submit!', fields);
}
});
};
/**
* 显示密码
* @param {type} 参数
* @returns {type} 返回值
*/
const showPassword = () => {
showPass.value = !showPass.value;
};
</script>
<style scoped lang="scss">
@import './index.scss';
</style>
.login {
@include flex(3);
height: 100vh;
color: #fff;
background: $background-color-black-default url('../../../assets/images/login_bg.gif') center no-repeat;
.login-panel {
padding: 32px 32px 48px;
width: vw(400);
height: vh(508);
box-sizing: border-box;
background: #0FF8F81A url('../../../assets/images/login_form.png') 0 0 / 100% 100% no-repeat;
.panel-title {
margin-bottom: vh(50);
font-size: 24px;
font-weight: 500;
}
:deep(.el-form) {
.el-form-item {
margin-bottom: vh(45);
.el-form-item__label {}
.el-form-item__content {
.el-input {
/* 容器 */
.el-input__wrapper {
padding-left: 60px;
box-shadow: none;
background: transparent;
border-bottom: 1px solid #5B66BD;
/* 内容 */
.el-input__inner {
color: #fff;
font-size: 16px;
}
}
}
.item-title {
position: absolute;
left: 0;
top: 5px;
font-size: 16px;
}
.el-icon {
position: absolute;
right: 17px;
top: 10px;
font-size: 16px;
color: #4e5969;
cursor: pointer;
}
}
}
.panel-code {
.el-input {
width: 60%;
}
img {
position: absolute;
right: 0;
top: -6px;
cursor: pointer;
}
}
}
.el-button {
width: 100%;
}
}
}
权限管理
- store
状态管理部分需要包含登录,登出, 获取用户信息,路由权限, 按钮权限, 还有token的持久化
/**
* 用户信息
*/
import { defineStore } from 'pinia';
import { constantRoutes, asyncRoutes, resetRouter } from '@/router';
import { UserAPI } from '@/service/api/index';
import { UserEnum } from '@/assets/data/enum';
const UserStore = defineStore('user', {
state: () => {
return {
routes: [] as any, // 非路由页面权限
token: '' as any,
userInfo: {} as any, // 用户信息
roles: [] as any, // 角色
};
},
actions: {
/**
* 根据路由权限过滤路由
* @param {Array} menus
*/
filterRoutes(menus) {
// 过滤有权限的路由
const routes: any = asyncRoutes;
routes[0].children = routes[0].children.filter((route) => menus.includes(route.path));
// 经过筛选的动态路由,只剩下有权限访问的对象
this.addRoutes(routes);
// 交给路由配置,添加动态路由
return routes;
},
/**
* 存储路由信息
* @param {Array} routes
*/
addRoutes(routes) {
this.routes = [...constantRoutes, ...routes];
},
/**
* 获取用户信息活权限信息
* @param {type} 参数
* @returns {type} 返回值
*/
async getUserInfo() {
const res: any = await UserAPI.getUserRoles('1633734692832501762');
if (res.code === 200) {
this.roles = res.data.map((item) => item.alias);
}
},
/**
* 登录
* @param {Object} data
* @param {string} code
* @param {string} key
*/
async login(data, code: string, key: string) {
const res: any = await UserAPI.login(data, code, key);
if (res && res.access_token) {
this.token = res.access_token;
this.userInfo = res;
}
},
/**
* 登出
*/
async logout() {
const res = await UserAPI.logout();
if (res && res.msg === 'success') {
// 重置路由
resetRouter();
// 设置路由
this.routes = [];
this.token = '';
this.userInfo = {};
this.roles = [];
}
},
/**
* 验证权限
*/
checkPermission(point) {
return this.userInfo.points?.includes(point);
},
},
// pinia数据持久化 npm i pinia-plugin-persist
// main.ts里面 const pinia = createPinia(); pinia.use(piniaPersist);
// 所有数据持久化
// persist: {
// enabled: true,
// },
// 持久化存储插件其他配置
persist: {
enabled: true,
strategies: [
// 修改存储中使用的键名称，默认为当前 Store的 id
// 修改为 sessionStorage，默认为 localStorage
// 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
{ key: UserEnum.UserStore, storage: sessionStorage, paths: ['token', 'userInfo'] }, // routes 和 userInfo字段用sessionStorage存储
// { key: UserEnum.Token, storage: localStorage, paths: ['token'] }, // token字段用 localstorage存储
],
},
});
export default UserStore;
- router
路由配置 注意点
- 动态路由
- 导航守卫
- 第一遍加载不到原地跳一遍 next(to.path);
- 刷新404, 修复方法配置: router.addRoute({ path: '/:pathMatch(.)', name: 'NoFound', redirect: '/404' });
- 重置路由
// 1. 导入
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import login from '../components/business/login/index.vue';
import main from '../components/business/index.vue';
import order from '../components/business/order/index.vue';
import client from '../components/business/client/index.vue';
import system from '../components/business/system/index.vue';
import { UserStore } from '@/store/index';
// 2. 创建路由对象
export const constantRoutes: Array<RouteRecordRaw> = [
{
path: '/login',
name: 'Login',
component: login,
},
{
path: '/404',
name: '404',
component: () => import('../components/business/404/index.vue'),
},
];
export const asyncRoutes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: main,
redirect: '/order',
children: [
{
path: 'order',
name: 'Order',
component: order,
},
{
path: 'client',
name: 'Client',
component: client,
},
{
path: 'system',
name: 'System',
component: system,
},
],
},
];
// vue2
// const handleCreateRouter = () =>
// new Router({
// // mode: 'history', // require service support
// //默认只加载静态路由
// routes: constantRoutes,
// });
// const router = handleCreateRouter();
// export function resetRouter() {
// const newRouter = handleCreateRouter();
// router.matcher = newRouter.matcher; // reset router
// }
// vue3
const router = createRouter({
history: createWebHashHistory(),
routes: constantRoutes,
});
const WHITE_NAME_LIST = ['Login', '404'];
export function resetRouter() {
router.getRoutes().forEach((route) => {
const { name } = route;
if (name && !WHITE_NAME_LIST.includes(name as string)) {
router.hasRoute(name) && router.removeRoute(name);
}
});
}
// 路由守卫
router.beforeEach(async (to, from, next) => {
const userStore = UserStore();
const token = userStore.token;
const name: any = to.name;
// 1.已登录+去登陆页=跳转首页
if (token && name === 'Login') {
next('/');
}
// 2.已登陆+去其他页=放行
if (token && name !== 'Login') {
// 没有用户id获取用户数据
if (!userStore.roles.length) {
await userStore.getUserInfo();
// 拿到数据未进页面前进行路由权限筛选
const routes = await userStore.filterRoutes(userStore.roles);
// 筛选后,拿到有权限的动态路由添加到配置中
// 接收到路由配置, 利用路由组件的 addRoutes 添加路由
routes.forEach((route) => {
router.addRoute(route);
});
router.addRoute({ path: '/:pathMatch(.*)*', name: 'NoFound', redirect: '/404' });
// 非静态路由第一遍没有拿到路由,再原地跳一遍
next(to.path);
} else {
next();
}
}
// 3.未登录+在白名单=放行
if (!token && WHITE_NAME_LIST.indexOf(name) > -1) {
next();
}
// 4.未登录+不在白名单=去登录页
if (!token && !WHITE_NAME_LIST.includes(name)) {
next('/login');
}
});
// 3. 导出
export default router;
登出
/**
* 登出
* @param {type} 参数
* @returns {type} 返回值
*/
const handleLogout = async () => {
await userStore.logout();
router.push({ path: '/login' });
};
drag拖拽
使用es6的drag drog 拖拽方法实现元素的拖拽
封装hook方法useDrag
暴露方法和属性selectNode, endNode, handleDrag, handleDragStart, handleDragEnter, handleDragLeave, handleDragOver, handleDragEnd, handleDrop,
import { ref } from 'vue';
/**
* 拖拽节点
* @param {type} 参数
* @returns {type} 返回值
*/
const useDrag = function () {
// 选中节点
const selectNode = ref('');
// 释放节点
const endNode = ref('');
/**
* 常用
* 当拖拽元素或选中的文本时触发
*/
const handleDrag = (ev: DragEvent) => {
console.log('---drag', ev);
};
/**
* 常用
* 当用户开始拖拽一个元素或选中的文本时触发
*/
const handleDragStart = (ev: DragEvent) => {
console.log('---drag start', ev);
if (ev.currentTarget) {
selectNode.value = (ev.currentTarget as any).innerText || '';
endNode.value = '';
}
};
/**
* 当拖拽元素或选中的文本到一个可释放目标时触发
*/
const handleDragEnter = (ev: DragEvent) => {
console.log('---drag enter', ev);
};
/**
* 常用
* 当拖拽元素或选中的文本离开一个可释放目标时触发
*/
const handleDragLeave = (ev: DragEvent) => {
// console.log('---drag leave', ev);
if (ev.currentTarget) {
(ev.currentTarget as any).parentElement.style.background = '';
(ev.currentTarget as any).parentElement.style.borderTop = '';
}
};
/**
* 常用
* 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次
*/
const handleDragOver = (ev: DragEvent) => {
// console.log('---drag over', ev);
ev.preventDefault();
if (ev.currentTarget) {
(ev.currentTarget as any).parentElement.style.background = '#222942';
(ev.currentTarget as any).parentElement.style.borderTop = '1px solid #1ec2c2';
}
};
/**
* 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)
*/
const handleDragEnd = (ev: DragEvent) => {
console.log('---drag end', ev);
};
/**
* 常用
* 当元素或选中的文本在可释放目标上被释放时触发
*/
const handleDrop = (ev: DragEvent) => {
// console.log('---drop', dropType, ev);
if (ev.currentTarget) {
(ev.currentTarget as any).parentElement.style.background = '';
(ev.currentTarget as any).parentElement.style.borderTop = '';
endNode.value = (ev.currentTarget as any).innerText || '';
}
};
return {
selectNode,
endNode,
handleDrag,
handleDragStart,
handleDragEnter,
handleDragLeave,
handleDragOver,
handleDragEnd,
handleDrop,
};
};
export default useDrag;
- 使用
给被拖拽元素绑定方法
监听释放所在节点的变化来执行处理逻辑
<div v-for="item in switchList" :key="item.name" class="switch-item">
<div
class="item-left"
draggable="true"
@dragstart="handleDragStart"
@dragleave="handleDragLeave"
@dragover="handleDragOver"
@drop="handleDrop"
>
<img src="@/assets/images/Vector.svg" alt="" />
<span class="item-name">{{ item.name }}</span>
</div>
<el-switch v-model="item.checked" />
</div>
import { ref, watch } from 'vue';
import useDrag from './useDrag';
const { selectNode, endNode, handleDragStart, handleDragLeave, handleDragOver, handleDrop } = useDrag();
watch(endNode, (newVal) => {
if (newVal) {
// 选中的下标
const selectIndex = switchList.value.findIndex((item) => item.name === selectNode.value);
// 选中的数据
const selectObj = switchList.value.find((item) => item.name === selectNode.value);
// 释放所在下标
const endIndex = switchList.value.findIndex((item) => item.name === newVal);
// 删除选中原来位置
switchList.value.splice(selectIndex, 1);
if (selectObj) {
// 插入到释放后面
switchList.value.splice(endIndex, 0, selectObj);
}
}
});
clock时钟组件
在dom挂载后触发时钟定时器, 并且卸载时取消定时器
封装hook组件UseClock
暴露时间date
import { ref, onMounted, onBeforeUnmount } from 'vue';
/**
* 时钟组件
*/
const useClock = () => {
// 日期
const date = ref(new Date().toLocaleString().replaceAll('/', '-'));
// 定时器
const timeId = ref<NodeJS.Timer>();
onMounted(() => {
timeId.value = setInterval(() => tick(), 1000);
});
onBeforeUnmount(() => {
clearInterval(timeId.value);
});
/**
* 更新时间
*/
const tick = () => {
date.value = new Date().toLocaleString().replaceAll('/', '-');
};
return { date };
};
export default UseClock;
无限滚动列表
innerHeight(window)：浏览器窗口的视口高度，包括滚动条的高度。pageYOffset(window)：它表示当前页面顶部距离视口顶部的垂直偏移量。clientHeight：元素的可见高度，不包括滚动条的高度。如果元素的内容超出了可见区域，clientHeight只会返回可见区域的高度。offsetHeight：元素的可见高度，包括元素的边框、内边距和滚动条（如果有）。如果元素的内容超出了可见区域，offsetHeight会返回整个元素的高度。scrollHeight：元素内容的总高度(可滚动高度,只读,整数)，包括被隐藏的内容。如果元素的内容没有超出可见区域，scrollHeight的值与clientHeight相等(子元素的clientHeight + 子元素的offsetTop)。offsetTop：元素顶部相对于最近的已定位祖先元素（父元素或更上层的祖先元素）的垂直偏移量。clientTop：元素顶部边框的高度。scrollTop：元素滚动条向下滚动的距离，即元素内容向上滚动的距离。
无限列表实现原理: 总高度scrollHeight - (元素高度clientHeight + 滚动高度scrollTop) < 一列的高度100
图片懒加载实现原理: 图片相对偏移offsetTop < 浏览器视口高度 innerHeight + 浏览器垂直偏移量 pageYOffset
/**
* 无限下拉列表
* @param {String} className
* @param {Funciton} callback
* @returns
*/
const useScrollList = (className = '.content-table .el-table .el-scrollbar__wrap', callback = () => {}) => {
const container: any = document.querySelector(className); // 容器
let timer: any = null; // 定时器
/**
* 添加滚动事件
*/
container.onscroll = () => {
clearTimeout(timer);
timer = setTimeout(() => {
const clientHeight = container.clientHeight; // 实时获取当前容器的clientHeight 盒子高度
const scrollTop = container.scrollTop; // 实时获取当前容器的scrollTop 滚动距离
const scrollHeight = container.scrollHeight; // 实时获取当前容器的scrollHeight 可滚动高度
// 可滚动高度减去容器和滚动距离比容器高度小时请求下一页
if (scrollHeight - (clientHeight + scrollTop) < clientHeight) {
callback();
}
}, 500);
};
/**
* 取消滚动事件
*/
const cancelScroll = () => {
container.onscroll = null;
};
return { cancelScroll };
};
export default useScrollList;
- ** 使用**
传入滚动的外框类名,和滚动条件触发后的回调函数
import useScrollList from './useScrollList';
onMounted(() => {
// 滚动
const { cancelScroll } = useScrollList('.content-table .el-table .el-scrollbar__wrap', () => {
if (tableData.value.length < totalSize.value) {
pageNum.value = pageNum.value + 1;
reqTableList(true);
// cancelScroll();
}
});
});
const reqTableList = (isScroll = false) => {
//...
// 滚动时追加表格数据
if (isScroll) {
tableData.value = tableData.value.concat(data.dataList);
} else {
tableData.value = data.dataList;
}
//...
}
js实现前端分页
传入全部表格数据, 计算页码对应的数据, 追加或者赋值给分页后的表格数据
import { ref } from 'vue'
/**
* js实现前端分页
* @return {Object}{
pagingTableData //当前页展示数据 数组
pageNum //当前页码
pageSize //每页最多显示条数
initTable //数据初始化
pageChange //页码改变
}
*/
const usePagingTable = () => {
const pageNum = ref(1); // 页码
const pageSize = ref(10); // 页大小
const pagingTableData = ref<any>([]); // 分页表格数据
let totalData = [] // 表格总数据
/**
* 数据初始化
* @param {data} 表格初始参数
*/
const initTable = (data = []) => {
totalData = data;
pageNum.value = 1
pagingTableData.value = []
pageChange()
}
/**
* 页码改变
*/
const pageChange = () => {
const length = totalData.length
if (pagingTableData.value.length >= length) return
const start = (pageNum.value - 1) * pageSize.value
const end = pageNum.value * pageSize.value
// 这里是追加逻辑, 分页是 pagingTableData.value = totalData.slice(start, end)
pagingTableData.value = pagingTableData.value.concat(totalData.slice(start, end))
}
return { pageNum, pageSize, pagingTableData, initTable, pageChange }
}
export default usePagingTable
- ** 使用**
表格滚动的回调事件添加页码改变事件, 表格总数据传入初始化函数
const { pageNum, pageSize, pagingTableData, initTable, pageChange } = usePagingTable()
...
initTable(tableData)
...
/**
* 表格滚动
* @param {type} 参数
* @returns {type} 返回值
*/
const tableScroll = () => {
pageNum.value = pageNum.value + 1
pageChange()
}
onMounted(async () => {
// 滚动
useScrollList('.wiring-table.el-table .el-scrollbar__wrap', tableScroll);
})
语音播报功能
使用Html5自带API实现语音播报，SpeechSynthesisUtterance对象和speechSynthesis对象。
封装hook组件useSpeech
暴露出去 startSpeech 和 stopSpeech 方法
/**
* 使用Html5自带API实现语音播报，SpeechSynthesisUtterance对象和speechSynthesis对象。
*/
const useSpeech = () => {
const synth = window.speechSynthesis;
const speech = new SpeechSynthesisUtterance();
let voices: any[] = [];
/**
* 定时器获取声音列表
*/
const getVoices = () => {
return new Promise(function (resolve, reject) {
const id = setInterval(() => {
voices = voices.length ? voices : synth.getVoices();
if (voices.length) {
resolve(voices);
clearInterval(id);
}
}, 50);
});
};
/**
* 开始播报
* @param {String} text 播放内容
* @param {Function} callback 回调
*/
const startSpeech = (text, callback = (event) => {}) => {
getVoices().then((voices: any) => {
// 设置播放声音
speech.voice = voices.filter(function (voice) {
return voice.localService === true && voice.lang === 'zh-CN';
})[0];
// 设置播放内容
speech.text = text;
// 设置话语的音调(0-2 默认1，值越大越尖锐,越低越低沉)
speech.pitch = 0.8;
// 设置说话的速度(0.1-10 默认1，值越大语速越快,越小语速越慢)
speech.rate = 1;
// 设置说话的音量
speech.volume = 10;
// 设置播放语言
speech.lang = 'zh-CN';
// 播放结束后调用
speech.onend = (event) => {
callback(event);
};
// 加入播放队列
synth.speak(speech);
});
};
/**
* 停止播报，停止所有播报队列里面的语音
*/
const stopSpeech = () => {
synth.cancel();
};
return { startSpeech, stopSpeech };
};
export default useSpeech;
fetch实现文件上传
利用原生input和fetch实现文件上传
input样式不好看 通过定位和 opacity: 0 隐藏起来
// html
<div class="date_upload">
<img src="@/assets/images/icon-upload.png" alt="" />
<input ref="fileRef" class="upload_input" type="file" accept=".xlsx,.xls" @change="handleChange" />
</div>
// css
.date_upload {
position: relative;
.upload_input {
position: absolute;
width: 28px;
height: 28px;
opacity: 0;
cursor: pointer;
}
}
// js
import { ref, onMounted } from 'vue';
import useUpload from './useUpload';
// 文件上传ref
const fileRef = ref();
onMounted(() => {
const { handleChange } = useUpload(fileRef.value, () => {
// 上传成功后回调
});
})
封装hook组件useUpload
暴露出去ref 和 change方法
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
/**
* fetch上传文件
* @param {Function} callback
* @returns
*/
const useUpload = (fileRef, callback = () => {}) => {
/**
* 选择文件
* @param {type} 参数
* @returns {type} 返回值
*/
const handleChange = () => {
// 获取上传后的文件信息
const file = fileRef.files[0];
if (!file) {
ElMessage.warning('请选择上传文件');
return;
}
uploadFile(file);
};
/**
* 上传文件
* @param {type} 参数
* @returns {type} 返回值
*/
const uploadFile = async (file) => {
// 处理文件转换成formData格式
const formData = new FormData();
// 传入文件
formData.append('file', file);
// 传入参数
// formData.append('isNeedSync', 1);
// 请求地址
const url = 'xxx';
const res = await fetch(url, { method: 'POST', body: formData }).then((response) => response.json());
if (res && res.code === 2000) {
ElMessage.success('上传成功');
// 执行上传成功后回调
callback();
}
};
return { handleChange };
};
export default useUpload;
input用js动态生成版
// html
<div class="date_upload" @click="handleClick">
<img src="@/assets/images/icon-upload.png" alt="" />
</div>
// js
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
import useUpload from './useUpload';
/**
* 点击上传按钮
*/
const handleClick = () => {
const file = document.createElement('input');
file.setAttribute('type', 'file');
file.setAttribute('accept', '.xlsx,.xls');
const { handleChange } = useUpload(file, () => {
// 上传成功后回调
});
file.onchange = handleChange
}
// css
.date_upload {
position: relative;
cursor: pointer;
}
换行信息列表
利用 flex-wrap 和子项的宽设置单行和换行显示
支持传name 为prop的插槽
默认宽度100%不换行, 传入50%,33%即2列一行,3列一行
type2
/src/components/Info.vue
<template>
<div class="gInfo">
<div class="gInfo-item" :style="{ width }" v-for="{ name, prop, value, width, valueClass } in $attrs.data"
:key="prop">
<div :style="{ 'min-width': $attrs.nameWidth }" :class="$attrs.type == 2 ? 'item-name2' : 'item-name'">
{{ name }}
</div>
<div :class="['item-value', valueClass]" @click="$emit('clickValue', prop)">{{ value }}
</div>
<slot :name="prop"></slot>
</div>
</div>
</template>
<style scoped lang='scss'>
.gInfo {
display: flex;
flex-wrap: wrap;
font-size: 14px;
.gInfo-item {
display: flex;
line-height: 2;
width: 100%;
.item-name {
color: $blue1;
}
.item-name2 {
margin-right: 10px;
min-width: 130px;
text-align: right;
color: $gray1;
}
.item-value {
word-break: break-word;
}
.link {
text-decoration: underline;
color: $primary;
cursor: pointer;
}
.ellipsis {
@include single-line(120)
}
.blue {
color: $blue1;
}
.bold {
color: $primary;
font-weight: bold;
}
}
}
</style>
- 使用
<Info :data="data">
<template v-slot:projectName="scope">
<el-button style="margin-left: 10px" class="setup" type="primary" size="mini">设为最优</el-button>
<el-button class="setup" type="primary" size="mini">设为备选</el-button>
</template>
</Info>
data = [
{ name: '方案名称：', prop: 'projectName', value: '方案一', valueClass: 'bold' },
{ name: '方案状态：', prop: '1', value: '已选为最优' },
{ name: '预估投资金额：', prop: '2', value: '1203万', valueClass: 'blue' },
{ name: '台区：', prop: '3', value: '农垦配变1#', width: '33%', valueClass: 'blue' },
{ name: '调荷前负载率：', prop: '4', value: '90%', width: '33%', valueClass: 'blue' },
{ name: '调荷后负载率：', prop: '5', value: '50%', width: '33%', valueClass: 'blue' },
{ name: '台区：', prop: '6', value: '农垦配变2#', width: '33%', valueClass: 'blue' },
{ name: '调荷前负载率：', prop: '7', value: '90%', width: '33%', valueClass: 'blue' },
{ name: '调荷后负载率：', prop: '8', value: '50%', width: '33%', valueClass: 'blue' },
{ name: '最近编辑时间：', prop: '9', value: '2024年3月11日 20:30' },
]
设备卡片容器
包含侧边栏, 右侧内容卡片, 关闭按钮
/src/components/deviceCard.vue
<template>
<div class="gDeviceCard" :style="{ width }">
<!-- 关闭按钮 -->
<GClose @click="$emit('closeCard')" />
<!-- 侧边tabs -->
<div class="gDeviceCard-sidebar">
<div :class="['sidebar-tab', activeTab === value ? 'active' : '']" @click="onClickTab(value)"
v-for="{ name, value } in tabs" :key="name">
{{ name }}
</div>
</div>
<!-- 动态组件 -->
<div class="gDeviceCard-components">
<slot :activeTab="activeTab" />
</div>
</div>
</template>
<script setup lang='ts'>
import {ref,onMouned} from 'vue'
const props = defineProps<{ tabs?: Array, width?:string}> ()
const activeTab = ref('')
onMouned(()=> {
activeTab.value = props.tabs[0].value
})
<style scoped lang='scss'>
.gDeviceCard {
position: fixed;
right: 20px;
bottom: 20px;
padding: 20px;
border: 1px solid $white2;
border-radius: 4px;
width: 400px;
min-height: 68vh;
transition: 0.3s;
background: $white;
box-shadow: 0 0px 12px 0 $gray5;
.gDeviceCard-sidebar {
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
.sidebar-tab {
padding: 10px;
margin-bottom: 10px;
text-align: center;
color: $white;
width: 50px;
line-height: 1.5em;
border-radius: 8px 0 0 8px;
cursor: pointer;
background-color: $blue3;
box-shadow: -4px 0px 12px 0 $gray5;
&:hover {
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $gray4;
}
}
}
.active {
background-color: $white;
color: $blue3;
}
}
.gDeviceCard-components {
padding: 20px;
height: 100%;
overflow-y: auto;
.container {
display: flex;
flex-direction: column;
height: 100%;
:deep(.container-main) {
flex: 1;
overflow-y: auto;
}
}
}
}
</style>
- 使用
<DeviceCard :tabs="tabs" v-on="$listeners">
<template slot-scope="{activeTab}">
<component :is="tabs.find(v => v.value === activeTab)?.com" />
</template>
</DeviceCard>
/src/components/close.vue
<div class="gClose" v-on="$listeners" :style="{ right, top, fontSize }">
<i class="el-icon-close"></i>
</div>
defineProps<{ right?: string,top?: string,fontSize?: string,}> ()
.gClose {
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
font-size: 20px;
}
vue3 全局注册消息弹窗方法
src/plugins/modal下 注册element的消息弹窗
import { ElMessage, ElMessageBox, ElNotification, ElLoading } from 'element-plus'
let loadingInstance;
export default {
// 消息提示
msg(content) {
ElMessage.info(content)
},
// 错误消息
msgError(content) {
ElMessage.error(content)
},
// 成功消息
msgSuccess(content) {
ElMessage.success(content)
},
// 警告消息
msgWarning(content) {
ElMessage.warning(content)
},
// 弹出提示
alert(content) {
// ElMessageBox.alert(content, "温馨提示", { confirmButtonText: '确定', callback: () => {} })
ElMessageBox.alert( content, '温馨提示', { confirmButtonText: '确定', dangerouslyUseHTMLString: true, callback: () => {} })
},
// 错误提示
alertError(content) {
ElMessageBox.alert(content, "温馨提示", { type: 'error' })
},
// 成功提示
alertSuccess(content) {
ElMessageBox.alert(content, "温馨提示", { type: 'success' })
},
// 警告提示
alertWarning(content) {
ElMessageBox.alert(content, "温馨提示", { type: 'warning' })
},
// 通知提示
notify(content) {
ElNotification.info(content)
},
// 错误通知
notifyError(content) {
ElNotification.error(content);
},
// 成功通知
notifySuccess(content) {
ElNotification.success(content)
},
// 警告通知
notifyWarning(content) {
ElNotification.warning(content)
},
// 确认窗体
confirm(content) {
return ElMessageBox.confirm(content, "温馨提示", {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
})
},
// 提交内容
prompt(content) {
return ElMessageBox.prompt(content, "温馨提示", {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
})
},
// 打开遮罩层
loading(content) {
loadingInstance = ElLoading.service({
lock: true,
text: content,
background: "rgba(0, 0, 0, 0.7)",
})
},
// 关闭遮罩层
closeLoading() {
loadingInstance.close();
}
}
在 src/plugins/index.js 下写全局方法注册方法
import modal from './modal'
export default function installPlugins(app){
// 模态框对象
app.config.globalProperties.$modal = modal
}
在 main.js 注册全局方法
// 注册全局方法
import plugins from './plugins'
const app = createApp(App);
app.component('FormGenerator', FormGenerator) // 全局注册组件
app.use(plugins)
app.mount('#app')
小程序写音频播放组件
小程序不再支持原生audio组件, 只能自己写界面 加 进度条显示播放进度
用 createInnerAudioContext创建音乐实例
监听onPlay播放、onPause暂停、onTimeUpdate时间更新方法, 实时更新进度条时间
还支持上一曲和下一曲, 不过需要获取或者传音乐列表过来
<!-- 歌词详情界面 -->
<template>
<uni-popup ref="audioRef" type="center" @change="closeAudio">
<view class="audio-page">
<view class="page-close">
<uni-icons type="closeempty" size="25" color="#aaa" @click="close"></uni-icons>
</view>
<view class="page-header">{{playerList.song.name}}</view>
<!-- 进度条 -->
<view class="page-progress">
<slider min="0" :max="playerList.musicEndTime" block-size="12" activeColor="#000" backgroundColor="#999"
:value="playerList.musicCurrentTime" @change="setSeekMusic" />
<view class="progress-time">
<view>{{getMusicTime(playerList.musicCurrentTime)}}</view>
<view>{{getMusicTime(playerList.musicEndTime)}}</view>
</view>
</view>
<view class="page-operation">
<!-- 上一条 -->
<uni-icons @click="playTab('pre')" class="operation-icon" custom-prefix="iconfont" type="icon-previous"
size="25"></uni-icons>
<!-- 播放 -->
<uni-icons @click="changeStaus" class="operation-icon" custom-prefix="iconfont"
:type="playerList.isPlay?'icon-stop':'icon-play'" size="25"></uni-icons>
<!-- 下一条 -->
<uni-icons @click="playTab('next')" class="operation-icon" custom-prefix="iconfont" type="icon-next"
size="25"></uni-icons>
</view>
</view>
</uni-popup>
</template>
<script setup>
import {
ref,
onMounted,
onBeforeMount,
watch
} from 'vue'
const emits = defineEmits(['hideAudio'])
const props = defineProps({
showAudio: {
type: Boolean,
default: false
},
activeAudio: {
type: Object,
default: () => ({})
},
fileList: {
type: Array,
default: () => ([])
}
})
// 全局音乐实例
let innerAudioContext = null
const playerList = ref({
isPlay: false,
song: {
"id": null,
"name": "",
},
musicIndex: 0, //歌曲索引值
musicList: [], //歌单数组
musicCurrentTime: 0, //歌曲当前时间
musicEndTime: 0, //歌曲总时长
})
const audioRef = ref()
watch(() => props.showAudio, (val) => {
if (val) {
audioRef.value?.open()
creatAudio(props.activeAudio.path)
playerList.value.song.name = props.activeAudio.name
props.fileList.forEach(v => {
v.id = v.path
})
setMusicList(props.fileList)
}
})
/**
* 切换歌曲
*/
const playTab = (type) => {
if (type === 'pre') {
// 如果当前索引为0点击上一首切换到最后一首
if (playerList.value.musicIndex === 0) {
setMusicIndex(playerList.value.musicList.length - 1)
} else setMusicIndex(playerList.value.musicIndex - 1)
} else {
// 如果当前索引为最后一位点击上一首切换到第一首
if (playerList.value.musicIndex === playerList.value.musicList.length - 1) {
setMusicIndex(0)
} else setMusicIndex(playerList.value.musicIndex + 1)
}
}
/**
* 格式时间
*/
function getMusicTime(time) {
if (time > -1) {
var hour = Math.floor(time / 3600);
var min = Math.floor(time / 60) % 60;
var sec = Math.floor(time % 60);
if (hour < 10) {
time = '0' + hour + ":";
} else {
time = hour + ":";
}
if (min < 10) {
time += "0";
}
time += min + ":";
if (sec < 10) {
time += "0";
}
time += sec;
}
return time;
}
/**
* 暂停或开始音乐
*/
const changeStaus = () => {
const flag = playerList.value.isPlay
if (flag) innerAudioContext.pause()
else innerAudioContext.play()
setIsPlay(!flag)
}
/**
* 关闭音频
*/
const closeAudio = (val) => {
if (!val.show) {
emits('hideAudio')
}
}
/**
* 关闭弹窗
*/
const close = () => {
audioRef.value?.close()
}
// 播放或暂停音乐
const setIsPlay = (val) => {
playerList.value.isPlay = val
}
// 存放歌曲数组
const setMusicList = (arr) => {
playerList.value.musicList = arr
}
//更新歌曲时间
const setMusicTime = (type, time) => {
time = parseInt(time)
if (type === 'start') {
playerList.value.musicCurrentTime = time
} else {
playerList.value.musicEndTime = time
}
}
// 更新音乐索引index及歌曲信息
const setMusicIndex = (index) => {
playerList.value.musicIndex = index
const {
id,
name
} = playerList.value.musicList[index]
playerList.value.song.id = id
playerList.value.song.name = name
console.log(index, playerList.value.song)
}
// 创建音乐实例
const creatAudio = (url) => {
innerAudioContext = uni.createInnerAudioContext() //创建音乐实例
innerAudioContext.autoplay = true //设置是否自动播放
innerAudioContext.src = url //音频的url
innerAudioContext.onPlay(() => {
// 播放监听
setIsPlay(true)
});
innerAudioContext.onPause(() => {
// 暂停监听
setIsPlay(false)
});
innerAudioContext.onEnded(() => {
// 暂停监听
setIsPlay(false)
setMusicTime('start', playerList.value.musicEndTime)
});
innerAudioContext.onTimeUpdate(() => {
const {
currentTime,
duration
} = innerAudioContext;
setMusicTime('start', currentTime)
setMusicTime('end', duration)
});
innerAudioContext.onError((err) => {
console.log(err);
});
}
// 拖动音乐
const setSeekMusic = (e) => {
const val = e.detail.value
setMusicTime('start', val)
innerAudioContext.seek(val)
innerAudioContext.play()
}
</script>
<style lang="scss">
.audio-page {
position: relative;
padding: 30rpx;
text-align: center;
width: 90vw;
border-radius: 10rpx;
background: #fff;
.page-close {
position: absolute;
right: 20rpx;
top: 20rpx;
}
.page-header {
font-size: 40rpx;
}
.page-progress {
margin: 80rpx 0 30rpx;
.progress-time {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.page-operation {
display: flex;
justify-content: center;
align-items: center;
gap: 40rpx;
}
}
</style>
卡片悬浮效果
使用hover加伪元素实现鼠标移入卡片渲染和盒子阴影效果
&::before 添加按钮背景色
&::after 添加按钮
&:hover {
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
transform: translateY(-8px);
transition: 0.1s all;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 40px;
width: 100%;
background: #fff;
}
&::after {
content: '使用模板';
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
width: 90%;
color: #fff;
border-radius: 2px;
text-align: center;
box-sizing: border-box;
background: #4080ff;
}
}
动态加载图片资源, 防止图片不显示
数组的图片有时候会加载慢, 切换tab会闪烁, 所以要重新加载图片
import { onMounted } from 'vue'
/**
* 加载数组中的图片资源
*/
export const useLoadImg = (data) => {
onMounted(()=>{
loadImg()
})
/**
* 加载图片
*/
const loadImg = () => {
data.map(async (item) => {
// 预加载普通图标
const img = new Image();
img.src = item.icon;
// 等待图片加载完成
await new Promise<void>((resolve) => {
img.onload = () => {
item.icon = img;
resolve();
};
});
// 预加载高亮图标
const selectImg = new Image();
selectImg.src = item.selectIcon;
// 等待高亮图片加载完成
await new Promise<void>((resolve) => {
selectImg.onload = () => {
item.selectIcon = selectImg;
resolve();
};
});
})
};
}
鼠标移入弹出另一个盒子
实现思路
-
- 移入的盒子 A 和弹出的盒子 B 同在一个大盒子 C 里面, 相对定位或者translate移动弹出盒的位置
-
- C 盒给定长宽, 不然鼠标移出 A 盒时 B 盒就会隐藏
-
- 给 A 盒加移入事件, 给 C 盒加移出事件, 设置一个显示 B 盒的变量
实现代码
<div class="visualization" @mouseleave="onMouseleave">
<!-- 暗色 -->
<div class="visualization-btn button_box" :style="{ right: showBlackBtn ? '60px' : '0' }"
@click="openVisualization('black')">
<img src="@/assets/image/navbar/systemManagement.png" alt="" srcset="">
</div>
<!-- 浅色 -->
<div class="visualization-btn button_box" @mouseenter="onMouseenter" @click="openVisualization('white')">
<img src="@/assets/image/navbar/visualization.png" alt="" srcset="">
</div>
</div>
const showBlackBtn = ref(false) //移入大屏按钮显示暗色系按钮
/**
* 鼠标移入大屏按钮
* @param {type} 参数
* @returns {type} 返回值
*/
const onMouseenter = () => {
showBlackBtn.value = true
}
/**
* 鼠标移出大屏按钮
* @param {type} 参数
* @returns {type} 返回值
*/
const onMouseleave = () => {
showBlackBtn.value = false
}
.button_box {
@include flex(3);
cursor: pointer;
position: absolute;
right: 20px;
z-index: 1;
width: 48px;
height: 48px;
border-radius: $border-radius;
box-shadow: $box-shadow;
background: $background-color-default;
&:hover {
background: $background-color-button-hover;
}
img {
width: 32px;
height: 32px;
}
}
.visualization {
position: absolute;
right: 20px;
top: 85px;
width: 100px;
height: 48px;
z-index: 1;
.visualization-btn {
right: 0;
transition: all 0.1s;
}
}
手写轮播图组件
- 原生html 利用原生html 封装轮播图组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
/*overflow: hidden;*/
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 500px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(0, 0, 0, .3);
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #fff;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
border-radius: 0 50px 50px 0;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
border-radius: 50px 0 0 50px;
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/laugh01.gif" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script>
onload = function () {
// 定义图片保存数据
const images = ["images/laugh01.gif", "images/laugh02.gif", "images/laugh03.gif", "images/laugh04.gif", "images/laugh05.gif", "images/laugh43.gif"]
let ol = document.querySelector('#box ol')
let arr = document.querySelector('#arr');
let left = document.querySelector('#left')
let right = document.querySelector('#right')
let box = document.querySelector('#box');
let olLis = ol.children
img = document.querySelector('#box img')
//需求1:静态结构 动态加载页码
// 1.静态结构
// 2.遍历图片地址
for (let i = 0; i < images.length; i++) {
// 3.动态生成页码
let li = document.createElement('li')
// 3.1第一个li添加选择样式
if (i == 0) li.classList.add('current')
ol.appendChild(li)
// 需求4：页面鼠标移入切换图片效果
li.onmouseover = function () {
// 重复移入返回
if (index == i) return
// 1. 干掉原来li的类名：index对应的
olLis[index].classList.remove('current');
// 2. 改变页码：index = i
index = i
// 3. 动画效果：换图片
fadeTo(img, .4, function () {
img.src = images[index]
fadeTo(img, 1)
olLis[index].classList.add('current')
})
}
}
// 需求2:鼠标移入移出显示左右箭头
// 1.鼠标移入显示箭头
box.onmouseover = function () {
arr.style.display = 'block'
// 5.2鼠标移入轮播停止 清理定时器
clearInterval(timeId)
}
// 2.鼠标移出隐藏箭头
box.onmouseout = function () {
arr.style.display = ''
// 5.3鼠标移出轮播启动
timeId = setInterval(function () {
right.click()
}, 1500)
}
// 需求3：点击左右箭头，实现切换图片
// 定义一个变量；index记住当前显示的图片是数组的第几张（对应元素下标）
let index = 0
// 3.1 右点击
right.onclick = function () {
// 1. 把原来index对应的老页码样式干掉
olLis[index].classList.remove('current');
// 2. 改变下标：在原来的基础上+1
index++
// 3. 保证index 的有效性：一定能够在数组中找到对应的元素（超出最后一张，自动回到第一张）
if (index > images.length - 1) index = 0
// 4. 动画：先淡出，后换图，再淡入（新页码增加样式）
fadeTo(img, .4, function () {
img.src = images[index]
fadeTo(img, 1)
olLis[index].classList.add('current')
})
}
// 3.1 左点击
left.onclick = function () {
// 1. 把原来index对应的老页码样式干掉
olLis[index].classList.remove('current');
// 2. 改变下标：在原来的基础上+1
index--
// 3. 保证index 的有效性：一定能够在数组中找到对应的元素（超出最后一张，自动回到第一张）
if (index < 0) index = images.length - 1
// 4. 动画：先淡出，后换图，再淡入（新页码增加样式）
fadeTo(img, .4, function () {
img.src = images[index]
fadeTo(img, 1)
olLis[index].classList.add('current')
})
}
// 需求5:自动轮播
timeId = setInterval(function () {
// 1.定时器自动加载右点击函数
right.click()
}, 1500)
}
</script>
</body>
</html>
- vue 利用vue 封装轮播图组件
<template>
<div class="xtx-carousel" @mouseenter="stop()" @mouseleave="start()">
<!-- 轮播图主体 -->
<ul class="carousel-body">
<!-- fade 类名可以控制图片淡入效果 -->
<li
class="carousel-item"
v-for="(item, index) in sliders"
:key="index"
:class="{fade:activeIndex===index}"
>
<RouterLink :to="item.hrefUrl">
<img :src="item.imgUrl" alt="" />
</RouterLink>
</li>
</ul>
<!-- 左箭头 -->
<a href="javascript:;" class="carousel-btn prev" @click="toggle(-1)"
><i class="iconfont icon-angle-left"></i
></a>
<!-- 右箭头 -->
<a href="javascript:;" class="carousel-btn next" @click="toggle(1)"
><i class="iconfont icon-angle-right"></i
></a>
<!-- 指示器(小圆点) -->
<div class="carousel-indicator">
<span
v-for="(item, index) in sliders"
:key="index"
:class="{ active: index === activeIndex }"
@click="activeIndex=index"
></span>
</div>
</div>
</template>
<script>
import { onUnmounted, ref, watch } from 'vue'
export default {
name: 'XtxCarousel',
props: {
// 轮播图数组
sliders: { type: Array, default: () => [] },
// 自动播放
autoPlay: { type: Boolean, default: false },
// 持续时间
duration: { type: Number, default: 3000 }
},
setup (props) {
// 准备一个下标,用于控制小圆点高亮
const activeIndex = ref(0)
// 作用箭头换图
const toggle = (number) => {
// 由于左右箭头点击的时候会出现越界,所以先用一个临时变量存储起来,判断是否越界
const temp = activeIndex.value + number
// 左边越界
if (temp < 0) {
// 把下标变成最后一个下标
activeIndex.value = props.sliders.length - 1
return
}
// 右边越界
if (temp > props.sliders.length - 1) {
// 把下标变回0
activeIndex.value = 0
return
}
// 没有越界,直接使用
activeIndex.value = temp
}
// eslint-disable-next-line no-unused-vars
let timer = null
const autoPlayFn = () => {
if (timer) clearInterval(timer)
timer = setInterval(() => {
toggle(1)
}, props.duration)
}
// 启动定时器的条件
// 1.数组长度大于1
// 2.传递了 autoPlay 属性
watch(() => props.sliders, () => {
if (props.sliders.length > 1 && props.autoPlay) {
autoPlayFn()
}
})
// 停止定时器
const stop = () => {
clearInterval(timer)
}
// 开启定时器
const start = () => {
autoPlayFn()
}
// 卸载时清理定时器
onUnmounted(() => {
clearInterval(timer)
})
return { activeIndex, toggle, stop, start }
}
}
</script>
<style scoped lang="less">
.xtx-carousel {
width: 100%;
height: 100%;
min-width: 300px;
min-height: 150px;
position: relative;
.carousel {
&-body {
width: 100%;
height: 100%;
}
&-item {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
// 默认图片透明度是0,看不到
opacity: 0;
transition: opacity 0.5s linear;
//fade 显示图片
&.fade {
//透明度为1 ,能看到
opacity: 1;
//由于图片都是定位的,所以要调整层级显示
z-index: 1;
}
img {
width: 100%;
height: 100%;
}
}
&-indicator {
position: absolute;
left: 0;
bottom: 20px;
z-index: 2;
width: 100%;
text-align: center;
span {
display: inline-block;
width: 12px;
height: 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
cursor: pointer;
~ span {
margin-left: 12px;
}
&.active {
background: #fff;
}
}
}
&-btn {
width: 44px;
height: 44px;
background: rgba(0, 0, 0, 0.2);
color: #fff;
border-radius: 50%;
position: absolute;
top: 228px;
z-index: 2;
text-align: center;
line-height: 44px;
opacity: 0;
transition: all 0.5s;
&.prev {
left: 20px;
}
&.next {
right: 20px;
}
}
}
&:hover {
.carousel-btn {
opacity: 1;
}
}
}
</style>
73.模态框Model
利用vue 封装模态框Model
<template>
<div class="xtx-dialog" :class="{fade:isFade}" v-show="isShow">
<div class="wrapper" ref="target" >
<!-- 头部 -->
<div class="header">
<h3>{{title}}</h3>
<a @click="closeBtn" href="JavaScript:;" class="iconfont icon-close-new"></a>
</div>
<!-- 内容主体 -->
<div class="body">
<!-- 默认插槽 -->
<slot></slot>
</div>
<!-- 底部 -->
<div class="footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</template>
<script>
import { watch, ref } from 'vue'
import { onClickOutside, useVModel } from '@vueuse/core'
export default {
name: 'XtxDialog',
props: {
title: {
type: String,
default: '标题'
},
modelValue: {
type: Boolean,
default: false
}
},
setup (props, { emit }) {
// 双向绑定,值发生改变自动通知父组件
const isShow = useVModel(props, 'modelValue', emit)
// 用于动画效果的值
const isFade = ref(false)
// 监听父组件值的变化,赋值给本地的值
watch(isShow, (val) => {
setTimeout(() => {
isFade.value = val
}, 20)
})
// 关闭按钮
const closeBtn = () => {
isShow.value = false
}
const target = ref(null)
// 点击盒子外隐藏
onClickOutside(target, () => {
isShow.value = false
})
return { isFade, isShow, closeBtn, target }
}
}
</script>
<style scoped lang="less">
.xtx-dialog {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 8887;
background: rgba(0,0,0,0);
&.fade {
transition: all 0.4s;
background: rgba(0,0,0,.5);
//内容位移到中心
.wrapper {
transition: all 0.4s;
transform: translate(-50%,-50%);
opacity: 1;
}
}
.wrapper {
width: 600px;
background: #fff;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-60%);
opacity: 0;
.body {
padding: 20px 40px;
font-size: 16px;
.icon-warning {
color: @priceColor;
margin-right: 3px;
font-size: 16px;
}
}
.footer {
text-align: center;
padding: 10px 0 30px 0;
}
.header {
position: relative;
height: 70px;
line-height: 70px;
padding: 0 20px;
border-bottom: 1px solid #f5f5f5;
h3 {
font-weight: normal;
font-size: 18px;
}
a {
position: absolute;
right: 25px;
top: 25px;
font-size: 24px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #999;
&:hover {
color: #666;
}
}
}
}
}
</style>
