vue组件基础
Simplicity438
这个作者很懒,什么都没留下…
展开
-
修改vue-element-admin中导航菜单被激活后的背景色
修改vue-element-admin被选中后的菜单背景色原创 2022-10-28 16:58:44 · 2798 阅读 · 1 评论 -
vue 城市选择器(省市区)的使用 element-china-area-data
本文参考:Element UI 中国省市区级联数据本文参考:根据此文做的整理2. 使用regionData是省市区三级联动数据(不带“全部”选项)CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市extToCode是个大对象,属性是汉字,属性值是区域码用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京原创 2022-03-23 13:16:30 · 21133 阅读 · 2 评论 -
使用$router.push携带参数进行页面跳转
点击详情后跳转到另一个页面,要求携带当前的id实现:使用router.push进行跳转,拼接id // 详情按钮 clickProductInfoButt (id) { // console.log(111) this.$router.push('/manage_products/product_info?id=' + id) }在另一个页面里的created中去获取该id尝试渲染一个图片data () { return { .原创 2021-11-15 18:41:41 · 1328 阅读 · 0 评论 -
element导航菜单的路由跳转(类似Tab栏切换)
实现效果:使用的是一级菜单(类似Tab栏切换)使用路由进行组件的跳转,这里只有路由跳转的代码,不包含样式HTML结构:router是element导航菜单中的属性,实现路由跳转,再用:index来绑定跳转的路径(记得要拼接一个 ‘/’ )<el-container> <el-header style="height:35px"> <el-menu class="el-menu-demo" mode="horizontal"原创 2021-09-09 10:43:33 · 4320 阅读 · 0 评论 -
vue+echarts饼图
效果:<template> <!-- 2.为echart准备一个具备大小的容器 --> <div id="stat-model" style="width:200px;height:200px"></div></template> <script>// 1.导入echartimport * as echarts from 'echarts'// 3.基于准备好的dom,初始化echarts实例va原创 2021-09-08 16:23:11 · 939 阅读 · 0 评论 -
vue横向的table表格
最后的实现效果如下:HTML代码如下::colspan="alarms_models.length + 1"意思是规定单元格可横跨的列数,此处我动态设置为报警设备alarms_models+1,也可以写成colspan="10"<table class="list-table"> <thead> <tr class="table-title"> <th class="tac" :colspan="al原创 2021-09-07 17:46:50 · 3778 阅读 · 0 评论 -
修改element-ui中时间选择器的样式
最后实现的效果:使用的是element-ui中默认的日期时间范围选择器,下面代码是从element官网复制来的<span class="demonstration">默认</span><el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-d原创 2021-09-06 16:17:58 · 3610 阅读 · 0 评论 -
Element的input密码框小眼睛(点击眼睛显示密码,再次点击图标隐藏密码)
一、知识点:带 icon 的输入框,可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。因为图标涉及点击事件,带 icon 的输入框,采用的是 slot 方式。slot=“suffix” 表示,图标会出现在input 的尾部;二、实现思路要变化的有,图标样式和input的显示方式定义一个flag默认false,绑定input 的type值,flag为true时,type为 text 类型(可以看见数原创 2021-08-24 17:07:23 · 7893 阅读 · 5 评论 -
修改element-ui里的input输入框里的字体颜色和背景透明
标题修改之前的样式修改以后的样式:字体变色,背景透明可以发现在element-ui中把样式都默认了,自己修改的css样式不起作用代码如下:<el-input prefix-icon="el-icon-s-custom" placeholder="请输入账号"></el-input><el-input prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>使用深度选择器<s原创 2021-08-20 13:52:43 · 26095 阅读 · 3 评论 -
任务列表案例
1.初始化项目打开【阶段五/05.组件基础】文件夹,按下【shift键+鼠标右键】打开终端,在终端运行以下命令,初始化 vite 项目:npm init vite-app todos安装依赖包:npm install安装 less 语法相关依赖包:npm i less -D运行项目:npm run dev2.梳理项目结构重置 index.css 中的全局样式如下::root { font-size: 12px; }body { padding: .原创 2021-06-03 19:19:27 · 1208 阅读 · 0 评论