随笔分类 -  vue

tsx与在vue中的运用
摘要：转 1、vue中使用 有两种写法：选项式、函数式 //选项式 <script lang="tsx"> import {defineComponent } from 'vue' export default defineComponent({ setup() { return () => (<div> 阅读全文
posted @ 2024-07-29 15:02 番茄西红柿u 阅读(33) 评论(0) 推荐(0)
element-plus table部分列根据接口返回key展示
摘要：实现效果根据刷选年份返回对应年份作为部分列 1. 处理接口数据 接口返回数据格式 需要处理成 处理过程 data.message && data.message.forEach((item:any)=>{ let obj = {} for(var key in item){ if(Number(ke 阅读全文
posted @ 2024-05-17 14:08 番茄西红柿u 阅读(159) 评论(0) 推荐(0)
vue3中使用pinia
摘要：1、 安装引入 npm install pinia main.ts中挂载 import { createPinia } from 'pinia' const pinia = createPinia(); app.use(pinia); 2、src下新建 store 文件夹（不同模块建立不同文件，在i 阅读全文
posted @ 2023-09-22 14:08 番茄西红柿u 阅读(168) 评论(0) 推荐(0)
Vue接口地址管理
摘要：项目中有些时候会调用不同的的环境接口地址，统一进行管理便于切换 1. static文件夹下新建 config.js： （static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下） const URLList = { hotel:{ b 阅读全文
posted @ 2023-02-13 11:32 番茄西红柿u 阅读(110) 评论(0) 推荐(0)
垮组件方法调用
摘要：eventBus.js import Vue from 'vue'; const EventBus = new Vue() export { EventBus } navHead.vue（收到通知 触发orderService.vue中的列表） import {EventBus} from '@/u 阅读全文
posted @ 2022-12-26 11:39 番茄西红柿u 阅读(33) 评论(0) 推荐(0)
隐藏无权限按钮 通过自定义指令
摘要：main.js Vue.directive('has', { inserted: function (el, binding, vnode) { let btnPermissions = vnode.context.$route.meta.btnPermissions if (!Vue.protot 阅读全文
posted @ 2022-08-25 15:33 番茄西红柿u 阅读(37) 评论(0) 推荐(0)
vue接口获取路由菜单
摘要：menuFormat.js（格式化路由表） export const initMenu = (data) => { let list = []; data.forEach(router => { let { path, component, name, meta, // icon, children 阅读全文
posted @ 2022-08-25 15:19 番茄西红柿u 阅读(713) 评论(0) 推荐(0)
vue3 setup语法糖
摘要：0. 路由跳转 a.vue <script setup> //引入路由 import { useRouter } from 'vue-router' // 定义路由 const router = useRouter() // 编辑 let editBtn = (info) => { router.p 阅读全文
posted @ 2022-04-01 10:27 番茄西红柿u 阅读(751) 评论(0) 推荐(0)
vue3使用
摘要：见文档https://vue-docs-next-zh-cn.netlify.app/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-cli vite搭建： npm create vite@latest vi 阅读全文
posted @ 2021-08-23 17:20 番茄西红柿u 阅读(164) 评论(0) 推荐(0)
vuex
摘要：在src下新建store/index.js main.js import store from './store' Vue.use(Vuex) new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' } 阅读全文
posted @ 2021-03-18 09:45 番茄西红柿u 阅读(71) 评论(0) 推荐(0)
vue-tags-input
摘要：文档链接：http://www.vue-tags-input.com/#/examples/autocomplete 需求： 输入英文状态逗号、分号、空格、回车进行分隔，也可联想输入 npm install @johmun/vue-tags-input import VueTagsInput fro 阅读全文
posted @ 2020-12-18 17:57 番茄西红柿u 阅读(918) 评论(0) 推荐(0)
登录后用户信息存储vuex，刷新数据丢失
摘要：结论：方法很多基本上都是要借助于localStorage或者sessionStroage来存放 ①sessionStorage 刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制。 将接口返回的数据保存在vuex的store里，也将这些信息也保存在sessionStorage里。vue 阅读全文
posted @ 2020-08-19 15:19 番茄西红柿u 阅读(1103) 评论(0) 推荐(0)
vue 页面间传参（对象类型），页面刷新后获取不到参数
摘要：<span v-if="feedback==''" class="enter_complete" @click="$router.push({path:'/enterInfo',query:{id:alreadyThing.id, frrdBackInfo: alreadyThing}})" >反馈 阅读全文
posted @ 2020-08-18 09:52 番茄西红柿u 阅读(878) 评论(0) 推荐(0)
vue div转图片
摘要：1. npm install --save html2canvas 2. import html2canvas from "html2canvas" 3. toImage() { html2canvas(this.$refs.imageWrapper).then(canvas => { //imag 阅读全文
posted @ 2020-01-03 09:05 番茄西红柿u 阅读(1678) 评论(0) 推荐(0)
组件之间的传值
摘要：1. 子组件传父组件 子组件 <li class="smaili" v-for="(item,index) in MonitorList" :key="index"> <input type="checkbox" id="jack" :value="item.monitoringPointName" 阅读全文
posted @ 2019-11-29 16:23 番茄西红柿u 阅读(285) 评论(0) 推荐(0)
大屏适配方案
摘要：1. vw（1920*1080等比例缩放） 1. 插件px to rem & rpx & vw (cssrem)，之后可以直接用px开发，插件会将px转换成vw。(此方案底部会出现留白，可通过 vh 实现高度顶满) 2. flexible.js + rem（1920*1080等比例缩放） 1. 工具 阅读全文
posted @ 2019-11-14 10:27 番茄西红柿u 阅读(334) 评论(0) 推荐(0)
vue cli跨域配置
摘要：跨域配置（vue/cli3.0） vue.config.js中 devServer: { proxy: { '/api': { target: 'http:cxxxxx', pathRewrite:{'^/api': ''} } } } 再次请求时就要以/api为前缀： http:cxxxxx/ap 阅读全文
posted @ 2019-07-17 16:44 番茄西红柿u 阅读(507) 评论(0) 推荐(0)