摘要: 第一步 npm i -D svg-sprite-loader 第二步 webpack.base.conf.js下添加 { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icons')], options: { 阅读全文
posted @ 2020-09-30 14:13 杏杏子 阅读(892) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2020-09-10 09:18 杏杏子 阅读(356) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2020-09-10 09:13 杏杏子 阅读(409) 评论(0) 推荐(0) 编辑
摘要: 实现效果图 接口数据 status 0选中, 1未选中 data:[ { "id":1, "name":"省份", "status":0 }, { "id":2, "name":"市州", "status":0 }, { "id":3, "name":"区县", "status":0 }, { "i 阅读全文
posted @ 2020-08-24 16:47 杏杏子 阅读(2210) 评论(0) 推荐(0) 编辑
摘要: 一,头部标题动态绑定 二,头部返回统一处理 三,头部布局 (左,中,右) (左,右) 界面效果 父组件 <template> <div class="profile"> <v-header :imgSrc="imgUrl" :title="titleDec" :text="textDec"> </v 阅读全文
posted @ 2020-04-30 17:16 杏杏子 阅读(7143) 评论(0) 推荐(0) 编辑
摘要: 一,不确定有几个tabbar ,可能有三个,可能有四个,或者更多... 二,图片,文字点击高亮 三,跳转页面 四, 配置路由 虽然这个功能很多ui框架都有,但是封装也是一个学习的过程。 界面效果 父组件 <template> <div id="app"> <router-view></router- 阅读全文
posted @ 2020-04-30 16:56 杏杏子 阅读(1173) 评论(0) 推荐(0) 编辑
摘要: 一,父组件 <header-tab ref="tab"></header-tab> 二,子组件 <div class="header_tab" ref="headertab"> <ul ref="tabitem"> <li></li> </ul> </div> 三,父组件获取 子组件dom元素 th 阅读全文
posted @ 2020-04-30 16:36 杏杏子 阅读(5280) 评论(0) 推荐(1) 编辑
摘要: 界面效果 (可横向滑动) 父组件 <template> <div class="home"> <header-tab :listArray="list"> <img :src="imgSrc" alt="" slot="header_tab_img" /> </header-tab> </div> 阅读全文
posted @ 2020-04-30 16:24 杏杏子 阅读(711) 评论(0) 推荐(0) 编辑
摘要: 基于vue封装的横向滚动tab栏组件 知识点:1,父子组件传值 ,2,vue如何获取dom元素(ref,$refs),3,点击高亮,4,获取屏幕宽度(window.innerWidth),5,左偏移量(offsetLeft),6,当前元素宽度(offsetWidth),7,左滚动(scrollLef 阅读全文
posted @ 2020-04-30 16:13 杏杏子 阅读(2491) 评论(0) 推荐(0) 编辑
摘要: 此篇博客背景:项目开发技术为vue+element,需求为form表单中动态添加input表单,本element中有现成form动态添加案例,但ui小姐姐效果图与ui库有些微差别,固重新整理。废话不多说啦,正式开始了: 代码地址:https://codepen.io/newgingkgo/pen/g 阅读全文
posted @ 2019-12-12 15:27 杏杏子 阅读(12841) 评论(0) 推荐(0) 编辑