随笔分类 -  Vue

vue中使用tag标签根据状态显示不同颜色区分
摘要：#场景 前端列表中有状态显示，会根据状态值的不同显示不同的颜色进行区分 #实战 1、给tag增加颜色显示 <Tag color="blue">标签一</Tag> 2、根据值的不同需要增加判断 <Tag :color="row.status=='关闭'?'gray':'green'" >{{row.s 阅读全文
posted @ 2022-08-19 19:02 TestingShare 阅读(629) 评论(0) 推荐(0)
vue 实现页面预览效果无法操作(pointer-events)
摘要：场景 平台编辑的数据保存后，通过机器人发送到群里，群里打开链接后，希望内容是不可编辑状态，也就是说无法点击和输入，只能预览。 思考 1、对于预览的报告，可以在URL字段控制，当前内容是否预览。 2、然后在各个组件加上禁止状态，如果使用这种方式过于繁琐，如果组件较多都需要加上 3、可以使用蒙曾的方式+ 阅读全文
posted @ 2022-07-05 16:44 TestingShare 阅读(528) 评论(0) 推荐(0)
vue clipboard插件实现复制功能
摘要：场景 最近在搞个网站，内容较多，ctr+A会全部选择，不太好用，就想到js应该有点击复制的功能，就找了下。 插件 npm install clipboard 使用 data是要复制的内容，我这里是对象 <el-button @click="test(data)" class="tg">复制</el- 阅读全文
posted @ 2022-06-13 19:37 TestingShare 阅读(136) 评论(0) 推荐(0)
vue-codemirror插件使用
摘要：安装 npm install vue-codemirror -S 在mian.js中注册 import VueCodemirror from 'vue-codemirror' import 'codemirror/lib/codemirror.css' Vue.use(VueCodemirror) 阅读全文
posted @ 2022-01-13 16:42 TestingShare 阅读(284) 评论(0) 推荐(0)
Vue 点击添加生成一组输入框
摘要：场景：需要通过点击添加按钮，来增加一组输入框，填写信息。 通过for循环数据的方式实现，点击添加，向数组中增加一组数据 table数据 <el-form-item label="请求头" :label-width="formLabelWidth"> <div class="paramdatadiv" 阅读全文
posted @ 2021-01-28 19:54 TestingShare 阅读(2430) 评论(0) 推荐(0)
Vue中显示json格式插件vue-json-views
摘要：##场景 想要获取到的数据，以json的格式展示在页面中。 需要使用插件：vue-json-views 安装：npm install vue-json-views --save ##使用 直接在项目使用中的vue文件中直接引入 注册组件 写入 展示效果 可配置说明 阅读全文
posted @ 2021-01-27 19:37 TestingShare 阅读(3332) 评论(0) 推荐(1)
Vue-cli项目中过滤器使用
摘要：场景：在页面显示的内容，并非我们存入的字段内容，需要进行规律的转换。 filter 官方文档：https://cn.vuejs.org/v2/guide/filters.html 在element-ui组件中，使用表格中的字段显示对应内容，需要使用到的过滤器功能。 <el-table-column 阅读全文
posted @ 2021-01-20 12:54 TestingShare 阅读(700) 评论(0) 推荐(0)
Vue 中权限校验
摘要：权限校验是指，当我们没有登录的时候，访问需要登录的页面，是无法直接进入的，需要登录后才会显示跳转内容。 在Vue官网中叫导航守卫，官方参考：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 正如其名，vue-route 阅读全文
posted @ 2021-01-19 12:39 TestingShare 阅读(692) 评论(0) 推荐(0)
Vue平台项目问题汇总
摘要：1、给Vue组件添加点击事件不生效 <el-dropdown-item @click.native="delete_user">退出</el-dropdown-item> 场景：给vue组件增加点击事件，直接写@click不会生效，需要加上@click.native 阅读全文
posted @ 2021-01-16 12:53 TestingShare 阅读(68) 评论(0) 推荐(0)
Axios封装和跨域问题-02
摘要：在项目目录中 安装命令 npm i -S axios 在src目录下创建utils/request.js文件，这里对axios进行封装的文件 import axios from "axios" const request = axios.create({ baseURL:"/", timeout:5 阅读全文
posted @ 2021-01-10 20:27 TestingShare 阅读(240) 评论(0) 推荐(0)
Vue基础语法
摘要：双{{}} v-clock+双{{}} v-text v-html v-bind v-on v-model 阅读全文
posted @ 2021-01-08 19:43 TestingShare 阅读(80) 评论(0) 推荐(0)
Vue-cli项目初始化-01
摘要：Vue-cli安装 npm install -g @vue/cli 安装指定版本: npm install -g @vue/cli@3.10.0 查看vue版本：vue -v 查看脚手架安装的全局目录：npm root -g 创建项目：vue create 项目名称 #如果命令不生效，查看全局目录路 阅读全文
posted @ 2021-01-07 19:47 TestingShare 阅读(109) 评论(0) 推荐(0)