- 博客(9)
- 收藏
- 关注
RSS订阅原创 使用vue-json-viewer实现高亮展示、折叠和复制json数据
最近项目上有个需求，就是在前端显示json格式的数据，并且提供展开和收起的按钮。先看一下最终完成的效果吧。在这里我使用了vue-json-viewer这个组件来实现这个效果。这个组件主要能实现高亮、json折叠和copy功能，能满足项目需求。一、安装npm install vue-json-viewer --save二、引入并注册import JsonViewer from 'vue-json-viewer'Vue.use(JsonViewer)三、使用<json-viewer
2021-10-14 15:02:19
5039
1
原创 mixin混入
1.组件data,methods 优先级高于mixin data,methods优先级2.生命周期函数，先执行mixin里面的，再执行组件里面的<body> <div id="root"></div></body><script> // 局部mixin const myMixin = { data() { return { number: 2 } }, c
2021-08-20 16:49:19
208
原创 使用v-model进行父子组件间事件通信
使用v-model进行父子组件间事件通信默认情况下，组件上的v-model使用modelValue作为prop和update:modelValue作为事件。<body> <div id="root"></div></body><script> const app = Vue.createApp({ data() { return { content: 1, } },
2021-08-19 17:56:48
251
原创 使用vue-print-nb实现页面打印
步骤1. 安装插件vue-print-nb$ yarn add vue-print-nb步骤2. 在main.js中导入并注册import Print from 'vue-print-nb'Vue.use(Print)步骤3. 给要打印的盒子指定id<div id='printbox'>步骤4. 使用v-print指令进行打印<el-button v-print="{id:'printbox'}">打印</el-button>...
2021-04-17 11:30:52
2193
3
原创 使用QRCode生成二维码
二维码功能在工作中很常见, 我们需要根据信息 或者 链接地址, 生成一个二维码. 比如: 做地址分享, 做手机图片预览等.展示效果:目标: 基于图片地址/网页地址生成二维码步骤1: 安装需要生成二维码的插件$ yarn add qrcode步骤2. 导入插件import QrCode from 'qrcode'qrcode的用法是 QrCode.toCanvas(DOM, info)DOM为canvas的DOM对象, info为要转化为二维码的信息步骤3. 生成canvas<
2021-04-17 10:24:36
6040
原创 使用params传参进行路径跳转
路由规则配置{ // 动态参数 path: 'detail/:id', // 要么就空着, 要么就写全 name: 'detail', hidden: true, component: () => import('@/views/employees/detail')}方式一. 直接书写路径进行跳转 goClick(id) { // 方式一. 直接书写路径进行跳转 this.$router.push(`/em
2021-04-15 17:01:34
682
原创 路由传参(一)
一 .使用query传参地址栏显示:<el-button type="text" size="small" @click="$router.push(`/employees/detail?id=${row.id}`)">查看</el-button>```使用query传参就不需要额外配置路由规则,不用在路由规则中写参数export default { path: '/employees', component: Layout, children: [
2021-04-15 16:37:12
256
1
原创 用户访问页面的权限设置-通过全局前置守卫进行登陆拦截
**背景**一个项目有很多个页面,有些页面是需要有权限的用户才能访问的.例如购物车结算页面,需要用户登录才能访问.当我们发现一个没有登录的用户去访问需要权限的页面时,我们应该引导用户去登录页面,用户登录之后,页面将跳转到用户之前访问过的页面.在项目中,用到了vue-router 提供的前置导航守卫,来控制有权限页面的跳转.// 导入store,store中保存的是用户登录的token信息import store from '@/store'// 1.在router.js中,定义一个数组,
2021-03-26 15:52:11
765
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人