テーマ: 凝縮夜紫
ハイライト: a11y-dark
仲間ノート作成活動「第5期青少年合宿」に参加して7日目です。
タブバー
TabBar の実装アイデア
1. 以下に別の TabBar コンポーネントがある場合、それをどのようにカプセル化しますか
TabBar コンポーネントをカスタマイズし、APP で使用して TabBar を下部に表示し、関連するスタイルを設定します
2. TabBar に表示されるコンテンツは外部によって決定されます
TabBar を二等分するスロット フレックス レイアウトを定義します。
3. カスタム TabBarItem、画像とテキストをインポートできます
TabBarItem を定義し、画像とテキストの 2 つのスロットを定義します。スタイル設定のために 2 つのスロットの周りに div をラップします。スロットを埋めて、下部の TabBar の効果を実現します。
4. ハイライトされた画像を渡します
別のスロットを定義し、アクティブ アイコン データを挿入して変数 isActive を定義し、v-show を使用して対応するアイコンを表示するかどうかを決定します。
5. TabBarItem バインディング ルーティング データ
ルーティングをインストールします: npm install vue-router --save router/index.js の内容を完成させ、対応するコンポーネントを作成します main.js にルーター APP を登録します コンポーネントを追加します
6. 項目をクリックすると該当ルートにジャンプし、isActiveを動的に決定します
項目のクリック音を聞き、 this.$router.replace() を使用してルーティング パスを置き換えます。 this.$route.path.indexOf(this.link) !== -1 を使用して、アクティブかどうかを判断します。
7. アクティブなスタイルを動的に計算する
新しい計算プロパティをカプセル化します: this.isActive ? {'color': 'red'} : {}
コード
- アプリで基本的なことを書く
- Tabbar コンポーネントのスタイルとレイアウトにカプセル化する
- タブバー内にアイテムをデザインすると、ロジックが積み重なって再利用性が悪く、タブバーのロジックのみをタブバーコンポーネントにカプセル化します
- スロットを定義してアイテムの内容を挿入するため、コードが多くなります
- パッケージアイテムコンポーネント
アイテムの書き込み再利用性が強くない問題を修正。コンテンツの挿入にはスロットスロットを使用する
添加活跃状态的样式 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>