tema: condensada-noche-púrpura
resaltado: a11y-oscuro
Este es el séptimo día de mi participación en la actividad de creación de notas complementarias del "Quinto campo de entrenamiento juvenil".
Barra de pestañas
Ideas de implementación de TabBar
1. Si hay un componente TabBar separado a continuación, ¿cómo se encapsula?
Personalice el componente TabBar, úselo en la APLICACIÓN para que TabBar aparezca en la parte inferior y establezca estilos relacionados
2. El contenido que se muestra en la TabBar está determinado por el mundo exterior.
Defina el diseño flexible de la ranura para dividir la TabBar
3. TabBarItem personalizado, puedes importar imágenes y texto
Defina TabBarItem y defina dos espacios: imagen y texto. Envuelva un div alrededor de las dos ranuras para darle estilo. Llene la ranura para lograr el efecto de la TabBar inferior
4. Pase la imagen resaltada.
Defina otra ranura, inserte los datos del ícono activo y defina una variable isActive, y use v-show para determinar si se muestra el ícono correspondiente
5. TabBarItem vincula datos de enrutamiento
Instale el enrutamiento: npm install vue-router --save Complete el contenido de router/index.js y cree los componentes correspondientes Registre la aplicación del enrutador en main.js Agregue componentes
6. Haga clic en el elemento para saltar a la ruta correspondiente y determine dinámicamente que está activo.
Escuche el clic en el elemento y use this.$router.replace() para reemplazar la ruta de enrutamiento. Use this.$route.path.indexOf(this.link) !== -1 para determinar si está activo
7. Calcule dinámicamente el estilo activo.
Encapsula una nueva propiedad calculada: this.isActive ? {'color': 'red'} : {}
Código
- Escribe los conceptos básicos en la aplicación.
- Encapsular en estilo y diseño del componente Tabbar
- Si el elemento está diseñado en la barra de pestañas, la lógica se acumula y la reutilización no es buena. Solo la lógica de la barra de pestañas se encapsula en el componente de la barra de pestañas.
- Defina la ranura e inserte el contenido del artículo, por lo que hay muchos códigos
- Componente del elemento del paquete
La reutilización de escritura no es fuerte en el artículo, use la ranura para insertar el contenido
添加活跃状态的样式 slot外面包裹div，一些设定在div上写，因为slot会被替换，可能不起作用
- 和路由结合 点击后页面转到对应组件
- 在src中创建views(视图 文件夹 分类创建文件夹，存放对应组件
- 与路由绑定 props
- 图标活跃动态控制 计算属性comouted 判断当前活跃路由是否包含此item的路径
return this.$route.path.indexOf(this.path) !== -1 - 动态决定Item的颜色 :style
return this.isActive ? {color : this.activeColor} : {} - 进行MainTabBar抽取
- 文件路径引用问题 给文件夹起别名 属于webpack相关 alias：起别名
js alias: { '@': resolve('src'), 'assets' : resolve('src/assets'), //@/assets 在cli3里可以 'components' : resolve('src/components'), 'views' : resolve('src/views'), }
学习中
创建项目
vue init webpack tabbar
css引入
面试题，说说链接式和导入式的区别 导入不好链接好，一个同步渲染一个等页面显示完再渲染
学习css的时候就教过两种引用方式一种link还有一种就是import app的style里导入时不仅要加@，还应该加分号 因为是在css里
justify-content: space-evenly
友情提示：子组件里面的style不能用@import，会报错
vue组件命名驼峰，组件标签用-连接
肯定有人会疑惑命名注册的组件名字叫TabBar但是在引用组件的时候为什么是 ,因为在引用的时候vue规定用-隔开 因为html忽略大小写，必须用短横线 驼峰命名不写大写就需要用-连接 比较规范的是.vue组件驼峰命名，组件标签写 - 连接
img是行内元素, 只是比较特殊, 有行内块的特点而已
scoped表示每个style都是只在自己的组件中会有用，不影响别的组件的样式
抽出item组件时，页面不显示内容
查了半天，发现是item的export的name没加引号 。。。
template里面直接用item那个div，不用在外面再套一个！！踩坑
cli3 4里面页面写在views里面，小组件写在compenents里面
。。。true拼错了，卡了半天
安装vue-router
npm install vue-router --save 运行时依赖
views
view里面放视图文件(独立组件)，components里面放共通的组件
与路由绑定
点击进行组件切换
点击事件定义到TabBarItem上，跳转的路径由app传入的tab-bar-item提供，固定的字符串，不用v-bind
在TabBarItem组件中如何获取：使用props ```js
export default { name : "TabBarItem", props : { path : String }, data(){ return { // isActive : true isActive : false } }, methods : { itemClick (){ // console.log("itemClick"); this.$router.push(this.path) } } }; ```
路由默认为hash模式： http://localhost:8080/#/home 改为history更好 js const router = new Router({ routes, mode : 'history' })
props
重复点击报错的在跳转前判断下 if (this.$route.path === this.path) return; 这和之前父传子是类似的，只是那是动态传父组件的值，这是直接传个静态值 path是props里面自己定义的属性，用来接收点击item的路径的
！！！注意这个地方，如果双击报错在replace()后面加.catch( err => (err))
item活跃动态控制
原先的使用data，固定了，我们需要动态根据当前活跃组件进行颜色改变 使用计算属性，return this.$route.path.indexOf(this.path) !== -1
item颜色动态控制
原来颜色在TabBarItem内设置class进行改变，如果要改变图标颜色，需要修改源码，复用性不强 使用计算属性进行style动态绑定，app里传入activeColor，在item里接收，进行修改 ```js
props : { path : String, activeColor : { type : String, default : 'red' } }, computed : { activeStyle() { return this.isActive ? {color : this.activeColor} : {} // v-bind 动态绑定style } } ```
进行MainTabBar抽取
tabbar的代码全在app.vue里，看着很多 将代码抽取到MainTabBar里，使用时在app里引用MainTabBar，注册组件就可以使用 ```js import MainTabBar from "./components/MainTabBar.vue"
export default { name: "App", components : { MainTabBar } } ```
文件路径引用问题
给文件夹起别名 属于webpack相关 alias：起别名 cli2 在 \build\webpack.base.conf.js cli3/cli4 查找node_moudles下的@vue/cli-server/lib/config.base.js
注意：在html里使用路径别名时需要在前面加 ~ , ( dom 是属性的问题 不了解) js resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'assets' : resolve('src/assets'), //@/assets 在cli3里可以 'components' : resolve('src/components'), 'views' : resolve('src/views'), } } <tab-bar-item path="/home" activeColor="deepPink"> <img slot="item-icon" src="~assets/imgs/tabbar/home.svg" alt=""> <img slot="item-icon-active" src="~assets/imgs/tabbar/home_active.svg" alt=""> <div slot="item-text">首页</div> </tab-bar-item>