vue
有衡
这个作者很懒,什么都没留下…
展开
-
vue3 +vite 动态菜单和路由懒加载
当前项目是根据vue-element-admin使用vue3重构的后台管理系统从后台获取动态菜单并且路由懒加载后台返回的数据结构 "code": 0, "msg": "成功", "data": [ { "path": "/administrator", "meta": { "title": "后台管理", "icon": "icon-a-zu4", "roles": [ "admin"原创 2022-01-14 14:59:26 · 4456 阅读 · 5 评论 -
element-plus刷新后菜单不选中不高亮的问题
在使用element-plus的el-menu组件时发现刷新页面后,菜单不会默认选中也不会高亮。很多答案都没有说明真正的原因在哪里,代码又多看起来颇为费力,实际上只要设置el-menu组件的default-active属性<template> <el-menu :unique-opened="true" :collapse-transition="true" :default-active="defaultMenu" class="el-menu-原创 2022-01-02 19:19:39 · 3359 阅读 · 0 评论 -
Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移,请多多留意更新日志, 及时获取到更新信息,Font Icon 将会在第一个正式发布被废弃,请尽快迁移。
Element Plus将Font Icon废弃了以后只能使用Svg Icon中<el-icon><Setting /></el-icon>这种写法但是在渲染菜单时该怎么解决这个问题可以使用动态组件渲染菜单<component is='setting' class="icon-type" /><script>import { defineComponent } from 'vue'import { Setting } from '@原创 2021-11-08 15:13:41 · 291 阅读 · 0 评论 -
Invalid prop: type check failed for prop “uniqueOpened“. Expected Boolean, got String with value “tr
这个警告倒是没有影响什么,只是看着不舒服,还是想改过来//原代码<el-menu unique-opened="true"></el-emnu>//修改后<el-menu :unique-opened="true"></el-emnu>原创 2021-11-08 14:39:56 · 533 阅读 · 1 评论 -
vue3.x 使用 globalProperties 全局变量
Vue3.x 用 Composition API 中是没有this的,所以不能直接使用 this 调用 globalProperties 全局变量Composition API 使用方法:// main.jsimport { createApp } from 'vue'import App from './App.vue'import storage from './plugins/storage'const app = createApp(App);app.config.globalPro原创 2021-10-29 17:48:13 · 2653 阅读 · 0 评论 -
vue引入element-plus报错 Failed to resolve import “element-plus/lib/theme-chalk/index.css“ from “src\
查看官网文档得知css的引入路径改了import 'element-plus/lib/theme-chalk/index.css'改成了以下路径import 'element-plus/dist/index.css'原创 2021-10-28 10:31:08 · 10424 阅读 · 0 评论 -
vite 创建vue项目使用 scss
安装以下依赖就可以使用scss了npm install sass -Dnpm install scss -D不需要安装sass-loader和node-sass原创 2021-10-27 16:12:39 · 1678 阅读 · 4 评论 -
在setup里面跳转页面
在Composition API中不能直接使用this.$router使用路由,需要先import引入vue-routerimport { useRouter } from 'vue-router'export default { name: 'App', setup () { router.push({ path: '/login' }) }}原创 2021-10-19 10:42:24 · 925 阅读 · 0 评论 -
在H5中使用vant中的ImagePreview组件报错
因为不是脚手架安装的vantUI,用法有些不同,有些组件需要在前面加vantImagePreview的用法:vant.ImagePreview(['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg']);原创 2020-12-29 15:12:28 · 1504 阅读 · 0 评论 -
layui预览图片功能
layer.photos有两种用法获取json文件中的数据查看相册这种方法直接按文档中的提示来做就好了layer.photos文档点击预览图片可以直接按文档中一样操作因为我当前是用了vue.js所以点击事件是无效的使用vue的@click事件获取到图片地址,然后将图片地址用json形式赋值给photos这样就可以实现图片预览的功能preview(img){ layer.photos({ photos: {"data": [{"src": img}]} ,closeBtn:原创 2020-12-29 15:08:49 · 3487 阅读 · 0 评论 -
jquery点击事件不生效的问题
在同时使用vue.js和jquery.js的过程中,发现jquery的点击事件在有些地方不生效没有任何反应,反反复复看代码并没有什么异常也没有报错,后来发现是父级div使用了v-if='state',加载页面时state为false,后来点击切换为true后来把父级div的v-if显示隐藏使用jquery来操作,点击事件可以生效$('#state').show(); //显示$("#state").hide(); //隐藏...原创 2020-12-29 15:09:11 · 3004 阅读 · 0 评论 -
vue设置tabbar的显示隐藏
在路由文件中设置const routes = [{ path: '/', name: 'Index', component: Index, meta: { showTab: true//如果需要显示就加上这个 } }, { path: '/Detail', name: 'Detail', component: Detail }, { path...原创 2020-12-29 15:07:53 · 2608 阅读 · 0 评论 -
6.vue用vant做出下拉刷新 上拉加载
List 组件可以与 PullRefresh 组件结合使用,实现下拉刷新 上拉加载的效果1.引用组件List 列表 PullRefresh 下拉刷新import { PullRefresh , List } from 'vant'export default { name: 'index', components: { [PullRefresh.name]: PullRefr...原创 2020-02-21 18:13:45 · 1020 阅读 · 0 评论 -
5.vue跳转页面的方式
1.router-link//不带参数,如果router-link中连接带'/'开始就是从根路由开始,如果不带'/'就是从当前路由开始<router-link :to="{name:'home'}"><router-link :to="{path:'home'}"> //用name和path都行//带参数<router-link :to="{name:'...转载 2020-02-21 13:53:53 · 182 阅读 · 0 评论 -
4.vue中的this
如果在vue中data中的数据无法根据this直接引用,赋值给一个变量就行原创 2020-02-20 18:21:50 · 184 阅读 · 0 评论 -
4.在vue项目中发送ajax请求
vue中不能直接发送ajax请求,需要安装依赖我们都知道vue2.0之后,vue就不再对vue-resource进行更新,而是推荐axios1.安装axios命令行的方式npm i axios -Svue ui的方式,直接搜索安装即可2.在main.js中引入并修改原型链3.开始发送请求请求结果4.如果想要发送带json格式的参数请求,则需要qs模块来处理参数,要在ma...原创 2020-02-20 18:07:12 · 865 阅读 · 0 评论 -
3.vue当中vant插件自动按需引入
1.vant官网:https://youzan.github.io/vant/#/zh-CN2.通过npm安装npm i vant -S3.自动按需引入 3.1.安装插件 npm i babel-plugin-import -D 3.2.对于使用 babel7 的用户,可以在 babel.config.js 中配置 module.exports = { plugi...原创 2020-02-19 17:57:56 · 1260 阅读 · 0 评论 -
2.vue项目创建完成后,可以用通过命令打开图形化界面运行项目
1.命令行输入vue ui2.运行项目原创 2020-02-19 17:00:02 · 1174 阅读 · 0 评论 -
点击按钮获取input里面的值
可以用双向绑定的方法html代码<view class="wenComment_raise"> <input type="text" v-model="raise" :value="raise" @input="raiseContent"> <button type="primary" @click="raiseBtn"&...原创 2020-01-17 15:59:40 · 4405 阅读 · 0 评论 -
Vue根据点击不同的文字改变图片
Vue根据点击不同的文字替换图片html代码<!-- 在还没有点击文字的时候,这个时候图片的位置是空的,如果需要我们可以在发起请求后直接先赋值上去 me.imgUrl = SKU[0].img;//先将默认的图片赋值上去 --><div class="SKU-title-img"> <img :src="imgUrl" class="title-...原创 2020-12-29 15:11:35 · 1466 阅读 · 0 评论 -
vue点击切换样式
Vue点击切换样式html代码<div class="color-name"> <span :class="activeColor == colorIndex ? 'active':''" v-for="(color,colorIndex) in SKUList.color" :key="colorIndex" @click="colorImg(col...原创 2020-12-29 15:11:15 · 2153 阅读 · 0 评论 -
1.创建vue一个vue项目
1.1查看node和npmnode -v //查看node版本npm -v //查看npm版本1.2如果npm不是最新版本,可以用npm instasll -g npm更新到最新版本npm install -g npm1.3在国内使用官方的镜像是非常慢的,所以我们推荐使用使用淘宝镜像npm install -g cnpm --registry=https://re...原创 2020-01-08 15:20:43 · 76 阅读 · 0 评论 -
在vue项目里面使用阿里矢量图标
在vue项目里面使用阿里矢量图标先去官网下载阿里矢量图下载地址:https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a将需要的图标加入购物车打开购物车下载图标代码解压将css文件放到自己的项目中打开购物车添加至项目新建一个项目确认然后就到这个页面点击查看在线链接点击生成代码就可以了...原创 2020-01-03 17:47:41 · 887 阅读 · 0 评论