封装的菜单可自定义菜单项,图标,禁用,分割线,隐藏等。并且可以在全局任意地方使用。源码在文章末尾。 效果 使用 <template> 右键点击我 </template> import { ContextMenuOptions, MenuItem } from '@/components/ContextMenu/types' interface Data { name: string count: number } // data 无实际意义,...
使用方法:在main.ts 引入我们的组件跟随在createApp(App) 后面 切记不能放到mount 后面这是一个链式调用用,其次调用 component 第一个参数组件名称 第二个参数组件实例。 1 2 3 4 5 import { createApp } from 'vue' import App from './App.vue' import './assets/css/reset/index.less' import Card...
import 'element-plus/lib/theme-chalk/index.css' // 引入全局样式import "./styles/base.css" import "./styles/reset.css" const app = createApp(App) app.config.globalProperties.storage = storage // 全局挂载 缓存方法 app.config.globalProperties.sessionStorage = sessionStorage // 全局挂载 缓存方法 ...
我们封装 $request 作为主要对象,并扩展.get方法,sifou,jianshu 为其属性作为两个不同域接口的方法,从而实现了我们在一个前端工程中请求多个不同域接口。接下来让我们看看实现的相关代码吧(当前只展示部分核心代码)~ 二次封装 axios 的request请求插件 这里我们拿axios为例,先对它进行一个封装: 代码语言:txt 复制...
interface Props { foo: string bar?: number } 1. 2. 3. 4. 5. // 响应性语法糖 默认值会被编译为等价的运行时选项 const { foo, bar = 100 } = defineProps() 这个行为目前需要在配置中显式地选择开启: // vite.config.js export
Axios + TS 弱鸡封装 实现功能 1.可以创建多个创建多个互不干扰,完全独立的axios实例 2.通过创建的实例调用各种方法(request,get,post...) 封装的前置认识 类的基本使用 TS AxiosInstance —— axios实例的类型 AxiosResponse —— 响应的数据类型 InternalAxiosRequestConfig —— 传入配置config的类型/请求的数据类...
request.ts 用于封装请求方式 api.ts 存放具体接口 代码如下 http.ts constbaseURL='';importaxiosfrom'axios'const$http=axios.create({//设置默认请求地址baseURL,//设置请求超时时间timeout:5000,//设置请求头headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}})// 先导入vuex,...
:global全局选择器 混合使用局部与全局样式 vite+vue3.0+ts+pinia项目搭建 eslint安装 router安装 组件 模块路径 pinia import legacy from "@vitejs/plugin-legacy";兼容低版本浏览器 axios vue3 h5 与安卓、ios通信 pinyin-pro拼音插件 为什么vue3的响应式优于vue2响应式 Proxy和Reflect 相关网址 cat ‘不是内...
✅ 可全局配置对话框的样式,或者行为...,局部配置可进行覆盖。 ✅ 国际化,可灵活与vue-i18n糅合,即:如果没有引入vue-i18n默认显示中文版,反之,则会用vue-i18n的t方法来切换语言。 ✅ 与 ts 结合,使基于 API 的形式调用更友好。 思路有了就让我们来做行动的巨人~ ...
Vue3+TS Day39 - element-plus国际化、dayjs第三方库的使用、vue添加全局方法、分层封装思想 1、element-plus 默认展示英文,如何进行国际化展示中文? <template><el-config-provider:locale="zhCn"><router-view></router-view></el-config-provider></template>import { defineComponent } from 'vue' import...