随笔分类 - Vue
Vue
摘要：1.字典对象的模型为： const formAdd = ref({ name: '', use: 0, todayUse: 0, free: '收费', price: 9.9, num: 1, label: '次', description: '', url: '', method: '', hea
阅读全文
摘要：1.在A页面创建方法，并传递方法： const getMenuInfo = () => { *** } provide('getMenuInfo', getMenuInfo); 在其他页面接收方法并使用： const getMenuInfo = inject<() => void>('getMenu
阅读全文
摘要：<style scoped> /* 设置滚动条宽度和颜色 */ ::-webkit-scrollbar { width: 8px; background-color: lightgrey; } /* 设置滚动条滑块样式 */ ::-webkit-scrollbar-thumb { backgroun
阅读全文
摘要：解决办法： 找到 tsconfig.app.json 这个文件，把他的include改为一个实际存在的空文件即可
阅读全文
摘要：1. 使用内联样式和响应式数据 步骤一：创建响应式数据来存储背景图片的 URL在script setup中，可以使用ref来创建一个响应式的变量来存储背景图片的 URL。 <template> <div> <button @click="changeBackground">更换背景图片</butto
阅读全文
摘要：template部分： <el-avatar shape="square" :size="50" :fit="fit" :src="avatarImg" class="avatar-with-border-image"/> style部分： .avatar-with-border-image { p
阅读全文
摘要：provide('getMenuInfo', getMenuInfo); 父页面代码如上，provide从vue导入， getMenuInfo既是方法也是导出的名称子页面使用： const getMenuInfo = inject<() => void>('getMenuInfo'); 在子页面的任
阅读全文
摘要：一、实现目标 可以通过router-link在url里面配置参数然后传递给markdown页面 二、页面配置 主页面，即配置router-link的页面 templates:<router-link :to="{ path: `/mark/${itemId}` }">fff</router-link
阅读全文
摘要：1.安装插件 npm install vue-qrcode 2.使用 <script setup lang="ts"> import { ref } from 'vue' import VueQrcode from 'vue-qrcode'; const qrCodeString = ref('ab
阅读全文
摘要：代码示例： <script setup lang="ts"> import {nextTick, onMounted, ref} from 'vue' const count = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
阅读全文
摘要：cd 目录名 vue create system 创建项目 (system 是项目名) 选择2 或 3
阅读全文
摘要：前端界面： <el-form-item label="商品轮播图" :rules="[{ required: true, message: '必须要上传图片', trigger: 'blur' }]" prop="images"> <el-upload ref="upload" :action=we
阅读全文
摘要：准备工作：安装 yarn install vue-quill-editor main.js // 编辑器 import VueQuillEditor from 'vue-quill-editor' // 引入样式 import 'quill/dist/quill.core.css' import '
阅读全文
摘要：准备工作： 前端安装：yarn install echarts 、 yarn install vue-baidu-map --save 前端在public文件夹下的index.html中 head标签中加入： <script src="https://api.map.baidu.com/api?v=
阅读全文
摘要：1.使用场景： 注销用户：点击下拉框注销登录，弹出确认框，确认后注销，并重定向到登录页面 修改密码：点击下拉框修改密码，弹出新密码和确认密码，输入后确认，并重定向到登录页面重新登录 <el-dropdown-item><span @click="changePasswd">修改密码</span></
阅读全文
摘要：<template> <div> <!-- 搜索--> <div style="float: left"> <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini"> <el-form-item
阅读全文
摘要：<el-form-item label="上传图片" :rules="[{ required: true, message: '必须要上传图片', trigger: 'blur' }]" prop="image"> <el-upload :action=webSite class="upload-d
阅读全文
摘要：template <el-form-item label="上传图片" :rules="[{ required: true, message: '必须要上传图片', trigger: 'blur' }]" prop="image"> <el-upload :action=webSite class=
阅读全文
摘要：<el-form :model="form"> <el-form-item label="等级名称" :label-width="formLabelWidth" prop="name" :rules="[{ required: true, message: '请输入等级名称', trigger: '
阅读全文
摘要：在页面上可以直接使用的通知： open1() { this.$notify({ title: '成功', message: '这是一条成功的提示消息', type: 'success' }); }, 但是在单独的js当中使用时，会提示 .$notify 未定义，原因是在单独的js当中未引入eleme
阅读全文
