├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .github
    └── workflows
    │   └── create-relaease.yml
├── .gitignore
├── CHANGELOG_CN.md
├── LICENSE
├── README.md
├── babel.config.js
├── build
    └── webpack.config.js
├── example
    ├── App.vue
    ├── assets
    │   └── icon
    │   │   ├── iconfont.css
    │   │   ├── iconfont.eot
    │   │   ├── iconfont.js
    │   │   ├── iconfont.svg
    │   │   ├── iconfont.ttf
    │   │   └── iconfont.woff
    ├── index.html
    └── main.js
├── lib
    └── ly-tab.common.js
├── package.json
├── src
    ├── index.js
    ├── tab-bar.vue
    ├── tab-item.vue
    ├── tabs.vue
    └── utils
    │   └── requestAnimationFrame.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # https://editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | indent_style = tab
 8 | indent_size = 2
 9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | 
13 | [*.md]
14 | insert_final_newline = false
15 | trim_trailing_whitespace = false
16 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | lib
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	env: {
 4 | 		browser: true,
 5 | 		node: true,
 6 | 		es2021: true
 7 | 	},
 8 | 	extends: [
 9 | 		'eslint:recommended',
10 | 		'plugin:vue/recommended',
11 | 		'plugin:prettier/recommended'
12 | 	],
13 | 	// 规则覆盖
14 | 	rules: {
15 | 		'prettier/prettier': [
16 | 			'warn',
17 | 			{
18 | 				singleQuote: true, // 使用单引号
19 | 				useTabs: true, // 使用tab代替空格缩进
20 | 				// tabWidth: 2,
21 | 				trailingComma: 'none' // 尾部的逗号
22 | 			},
23 | 			{
24 | 				usePrettierrc: false // 不使用.prettierrc配置文件
25 | 			}
26 | 		],
27 | 		'implicit-arrow-linebreak': ['warn', 'beside'],
28 | 		'vue/require-default-prop': 0
29 | 	}
30 | };
31 | 


--------------------------------------------------------------------------------
/.github/workflows/create-relaease.yml:
--------------------------------------------------------------------------------
 1 | on:
 2 |   push:
 3 |     tags:
 4 |       - 'v*' # Push events to matching tags starts with 'v', i.e. v1.0, v20.15.10
 5 | 
 6 | name: Create Release
 7 | 
 8 | jobs:
 9 |   build:
10 |     name: Create Release
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - name: Checkout code
14 |         uses: actions/checkout@v3
15 |       - name: Create Release for Tag
16 |         id: release_tag
17 |         uses: yyx990803/release-tag@master # https://github.com/yyx990803/release-tag
18 |         env:
19 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
20 |         with:
21 |           tag_name: ${{ github.ref }}
22 |           body: |
23 |             更新内容请参见 [CHANGELOG](https://github.com/ScoutYin/ly-tab/blob/master/CHANGELOG_CN.md)。
24 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | # lock file
4 | yarn.lock


--------------------------------------------------------------------------------
/CHANGELOG_CN.md:
--------------------------------------------------------------------------------
 1 | ### 3.0.1 (2022-04-29)
 2 | 
 3 | Fix:
 4 | 
 5 | - 移除 babel-loader 生产依赖
 6 | 
 7 | ### 3.0.0 (2022-04-29)
 8 | 
 9 | Features:
10 | 
11 | - LyTabs、LyTabItem、LyTabBar 组件
12 | 
13 | ### 2.1.3 (2022-04-16)
14 | 
15 | Fixed:
16 | 
17 | - core 修复`ly-tabbar`组件销毁生命周期钩子名拼写错误（`destoryed` -> `destroyed`)
18 | 
19 | ### 2.1.2 (2018-11-17)
20 | 
21 | Fixed:
22 | 
23 | - core 修复组件内部非点击修改selectId外部不更新的问题
24 | - core 修复lineWidth设置不生效的问题
25 | 
26 | ### 2.1.1 (2018-9-22)
27 | 
28 | Features:
29 | 
30 | - core：支持ssr
31 | 
32 | Fixed:
33 | 
34 | - core：修复当默认选中item不在可视区时，tabbar未做位置调整使选中的item显示在可视区的bug
35 | 
36 | ### 2.1.0 (2018-8-14)
37 | 
38 | Features:
39 | 
40 | - core：点击item时可触发ly-tab的change事件
41 | - core：可指定labelKey作为item数据中文字的字段名，不指定默认为label
42 | - style：优化组件样式


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2018 ScoutYin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Ly-Tab 3.x版本（非Vue3）
  2 | 
  3 | 请注意，这个版本依然是 **Vue2** 版本。如果你想使用 **Vue3** 版本，请[点击这里](https://github.com/ScoutYin/fun-tab)。
  4 | 
  5 | 当前的3.x版本和之前2.x版本存在使用方法及API上的不兼容，使用者如需升级，请参照3.x版本。**强烈建议**使用3.x版本，2.x版本将不再进行更新维护。
  6 | 
  7 | ## 基本效果展示
  8 | 
  9 | ![v3 0 0](https://user-images.githubusercontent.com/32835712/166098427-fef7c973-00aa-4a3a-82a5-41ce74dbe62f.gif)
 10 | 
 11 | ## 安装
 12 | 
 13 | ```shell
 14 | yarn add ly-tab
 15 | # or
 16 | npm i ly-tab
 17 | ```
 18 | ## 使用
 19 | 
 20 | ### 全局注册
 21 | 
 22 | ```js
 23 | import LyTab from 'ly-tab';
 24 | 
 25 | Vue.use(LyTab);
 26 | ```
 27 | 
 28 | ### 局部注册
 29 | 
 30 | ```js
 31 | import { LyTabs, LyTabBar, LyTabItem } from 'ly-tab';
 32 | 
 33 | export default {
 34 |   components: {
 35 |     LyTabs,
 36 |     LyTabBar,
 37 |     LyTabItem
 38 |   }
 39 |   // ...
 40 | }
 41 | ```
 42 | 
 43 | ## LyTabs
 44 | 
 45 | ### 简单示例
 46 | 
 47 | ```javascript
 48 | <ly-tabs v-model="value">
 49 |   <ly-tab-item name="1" title="选项卡1" />
 50 |   <ly-tab-item name="2" title="选项卡2" />
 51 | </ly-tabs>
 52 | ```
 53 | 
 54 | ```javascript
 55 | export default {
 56 |   data() {
 57 |     return  {
 58 |       value: '1'
 59 |     }
 60 |   }
 61 | }
 62 | ```
 63 | 
 64 | ### 属性
 65 | 
 66 | | 属性 | 说明 | 类型 | 默认值 |
 67 | | ---- | -----|---|----|
 68 | | value | 当前激活的 `tab` 的 name 属性值 | `string \| number` | '' |
 69 | | lineWidth | 当前激活 `tab` 下划线的宽度，单位 `px` | `number` | 30 |
 70 | | lineHeight | 当前激活 `tab` 下划线的高度，单位 `px` | `number` | 3 |
 71 | | activeColor | 激活状态下 `tab` 文案及下划线的颜色 | `string` | #1677ff |
 72 | | additionalX | 近似等于超出边界时最大可拖动距离，单位 `px` | `number` | 50 |
 73 | | reBoundExponent | 惯性回弹指数，值越大，惯性回弹距离越长 | `number` | 10 |
 74 | | inertialDuration | 惯性滑动过程的持续时间，值越小，感知上阻力越大，可近似认为惯性滑动过程速度减为零所需的时间(ms) | `number` | 1000 |
 75 | | reBoundingDuration | 回弹过程动画duration，单位 `ms` | `number` | 360 |
 76 | 
 77 | ### 事件
 78 | 
 79 | | 事件名 | 说明 | 回调参数 |
 80 | | ----- | ---- | ----- |
 81 | | change | 切换激活 tab 项的回调 | `name: string \| number` |
 82 | 
 83 | ### 方法
 84 | 
 85 | | 方法名 | 说明 | 参数 | 返回值 |
 86 | | ----- | ---- | ---- | ---- |
 87 | | resize | 外层元素大小或组件布局、尺寸变化时，可以调用此方法来进行重绘 | - | - |
 88 | 
 89 | ### 插槽
 90 | 
 91 | | 名称 | 说明 |
 92 | | --- | ---- |
 93 | | default | 默认插槽，放置 `LyTabItem` 组件 |
 94 | 
 95 | ## LyTabItem
 96 | 
 97 | ### 属性
 98 | 
 99 | | 属性 | 说明 | 类型 | 默认值 |
100 | | ---- | -----|---|----|
101 | | title | 选项卡显示文字 | `string` | - |
102 | | name | 选项卡标识符 | `string \| number` | 选项卡索引 |
103 | | badge | 右上角徽标内容 | `string \| number` | - |
104 | 
105 | ### 插槽
106 | 
107 | | 名称 | 说明 |
108 | | --- | ---- |
109 | | default | 选项卡文字内容插槽，优先级高于传入的 `title` 属性 |
110 | | icon | 选项卡图标 |
111 | 
112 | ## LyTabBar
113 | 
114 | ### 简单示例
115 | 
116 | ```javascript
117 | <ly-tab-bar v-model="value">
118 |   <ly-tab-item name="1" title="选项卡1" />
119 |   <ly-tab-item name="2" title="选项卡2" />
120 | </ly-tab-bar>
121 | ```
122 | 
123 | ```javascript
124 | export default {
125 |   data() {
126 |     return  {
127 |       value: '1'
128 |     }
129 |   }
130 | }
131 | ```
132 | 
133 | ### 属性
134 | 
135 | | 属性 | 说明 | 类型 | 默认值 |
136 | | ---- | -----|---|----|
137 | | value | 当前激活的 `tab` 的 name 属性值 | `string \| number` | '' |
138 | | activeColor | 激活状态下 `tab` 文案及icon的颜色 | `string` | #1677ff |
139 | 
140 | ### 事件
141 | 
142 | | 事件名 | 说明 | 回调参数 |
143 | | ----- | ---- | ----- |
144 | | change | 切换激活 tab 项的回调 | `name: string \| number` |
145 | 
146 | ### 插槽
147 | 
148 | | 名称 | 说明 |
149 | | --- | ---- |
150 | | default | 默认插槽，放置 `LyTabItem` 组件 |
151 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	presets: ['@babel/preset-env'],
3 | 	only: ['./src']
4 | };
5 | 


--------------------------------------------------------------------------------
/build/webpack.config.js:
--------------------------------------------------------------------------------
  1 | const { merge } = require('webpack-merge');
  2 | const path = require('path');
  3 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  4 | const VueLoaderPlugin = require('vue-loader/lib/plugin');
  5 | 
  6 | const rootDir = process.cwd();
  7 | 
  8 | const devServerConfig = {
  9 | 	port: 8081,
 10 | 	historyApiFallback: true,
 11 | 	static: {
 12 | 		publicPath: '/'
 13 | 	},
 14 | 	client: {
 15 | 		// 重连次数
 16 | 		reconnect: 10
 17 | 	},
 18 | 	onListening() {
 19 | 		console.log();
 20 | 		console.log(
 21 | 			`You application is running here http://localhost:${devServerConfig.port}`
 22 | 		);
 23 | 	}
 24 | };
 25 | 
 26 | const commonConfig = {
 27 | 	module: {
 28 | 		rules: [
 29 | 			{
 30 | 				test: /\.js$/,
 31 | 				exclude: /node_modules/,
 32 | 				use: 'babel-loader'
 33 | 			},
 34 | 			{
 35 | 				test: /\.vue$/,
 36 | 				use: 'vue-loader'
 37 | 			},
 38 | 			{
 39 | 				test: /\.css/,
 40 | 				use: ['vue-style-loader', 'css-loader']
 41 | 			}
 42 | 		]
 43 | 	},
 44 | 	optimization: {
 45 | 		minimize: false
 46 | 	}
 47 | };
 48 | 
 49 | const devConfig = {
 50 | 	mode: 'development',
 51 | 	entry: path.resolve(rootDir, 'example/main.js'),
 52 | 	output: {
 53 | 		path: path.resolve(rootDir, 'dist'),
 54 | 		filename: '[name].bundle.js'
 55 | 	},
 56 | 	devServer: devServerConfig,
 57 | 	stats: 'errors-only',
 58 | 
 59 | 	resolve: {
 60 | 		extensions: ['.vue', '.js', '...'],
 61 | 		alias: {
 62 | 			vue$: 'vue/dist/vue.esm.js',
 63 | 			'ly-tab': path.resolve(rootDir, 'src/index.js')
 64 | 		}
 65 | 	},
 66 | 
 67 | 	plugins: [
 68 | 		new VueLoaderPlugin(),
 69 | 		new HtmlWebpackPlugin({
 70 | 			filename: 'index.html',
 71 | 			inject: 'body',
 72 | 			template: 'example/index.html'
 73 | 		})
 74 | 	]
 75 | };
 76 | 
 77 | const prodConfig = {
 78 | 	mode: 'production',
 79 | 	entry: path.resolve(rootDir, 'src/index.js'),
 80 | 	output: {
 81 | 		path: path.resolve(rootDir, 'lib'),
 82 | 		filename: 'ly-tab.common.js',
 83 | 		library: {
 84 | 			type: 'commonjs'
 85 | 		}
 86 | 	},
 87 | 	resolve: {
 88 | 		extensions: ['.vue', '.js', '...']
 89 | 	},
 90 | 	plugins: [new VueLoaderPlugin()]
 91 | };
 92 | 
 93 | module.exports = (env, args) => {
 94 | 	if (args.mode === 'production') {
 95 | 		return merge(commonConfig, prodConfig);
 96 | 	} else {
 97 | 		return merge(commonConfig, devConfig);
 98 | 	}
 99 | };
100 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="app">
  3 | 		<ly-tabs v-model="tabsValue" @change="handleTabsChange">
  4 | 			<ly-tab-item
  5 | 				v-for="item in tabsItems"
  6 | 				:key="item.value"
  7 | 				:title="item.title"
  8 | 				:name="item.value"
  9 | 				:badge="item.badge"
 10 | 			/>
 11 | 		</ly-tabs>
 12 | 
 13 | 		<h3>请使用移动端调试模式或者真机调试</h3>
 14 | 
 15 | 		<div class="demo-tab-bar">
 16 | 			<ly-tab-bar v-model="tabBarValue" @change="handleTabBarChange">
 17 | 				<ly-tab-item
 18 | 					v-for="item in tabBarItems"
 19 | 					:key="item.value"
 20 | 					:title="item.title"
 21 | 					:name="item.value"
 22 | 					:badge="item.badge"
 23 | 				>
 24 | 					<template #icon>
 25 | 						<i :class="item.icon" />
 26 | 					</template>
 27 | 				</ly-tab-item>
 28 | 			</ly-tab-bar>
 29 | 		</div>
 30 | 	</div>
 31 | </template>
 32 | 
 33 | <script>
 34 | // dev import
 35 | import { LyTabs, LyTabBar, LyTabItem } from 'ly-tab';
 36 | // prod import
 37 | // import { LyTabs, LyTabBar, LyTabItem } from '..';
 38 | 
 39 | export default {
 40 | 	name: 'App',
 41 | 	components: {
 42 | 		LyTabs,
 43 | 		LyTabBar,
 44 | 		LyTabItem
 45 | 	},
 46 | 	data() {
 47 | 		return {
 48 | 			tabsValue: 'fe',
 49 | 			tabBarValue: 'home',
 50 | 			tabsItems: [
 51 | 				{ title: '首页', value: 'home' },
 52 | 				{ title: '推荐', value: 'recommend' },
 53 | 				{ title: 'Android', value: 'android' },
 54 | 				{ title: '前端', value: 'fe', badge: 22 },
 55 | 				{ title: '后端', value: 'be' },
 56 | 				{ title: 'iOS', value: 'ios' },
 57 | 				{ title: '产品', value: 'pm' },
 58 | 				{ title: '人工智能', value: 'ai' },
 59 | 				{ title: '设计', value: 'design' }
 60 | 			],
 61 | 			tabBarItems: [
 62 | 				{ title: '首页', icon: 'ly-icon ly-icon-home', value: 'home' },
 63 | 				{ title: '沸点', icon: 'ly-icon ly-icon-icon--', value: 'pins' },
 64 | 				{
 65 | 					title: '发现',
 66 | 					icon: 'ly-icon ly-icon-sousuo',
 67 | 					value: 'find',
 68 | 					badge: 3
 69 | 				},
 70 | 				{ title: '我', icon: 'ly-icon ly-icon-wode', value: 'mine' }
 71 | 			]
 72 | 		};
 73 | 	},
 74 | 	mounted() {
 75 | 		// 模拟动态更新tabs
 76 | 		// setTimeout(() => {
 77 | 		// 	this.tabsItems.push(
 78 | 		// 		{ title: '产品', value: 'pm' },
 79 | 		// 		{ title: '人工智能', value: 'ai' },
 80 | 		// 		{ title: '设计', value: 'design' }
 81 | 		// 	);
 82 | 		// }, 1000);
 83 | 	},
 84 | 	methods: {
 85 | 		handleTabsChange(value) {
 86 | 			console.log('LyTabs change:', value);
 87 | 		},
 88 | 		handleTabBarChange(value) {
 89 | 			console.log('LyTabBar change:', value);
 90 | 		}
 91 | 	}
 92 | };
 93 | </script>
 94 | 
 95 | <style>
 96 | @import './assets/icon/iconfont.css';
 97 | 
 98 | body {
 99 | 	min-height: 100vh;
100 | 	background: rgb(250, 251, 252);
101 | }
102 | #app {
103 | 	font-family: 'Avenir', Helvetica, Arial, sans-serif;
104 | 	-webkit-font-smoothing: antialiased;
105 | 	-moz-osx-font-smoothing: grayscale;
106 | 	text-align: center;
107 | 	color: #2c3e50;
108 | }
109 | .demo-tab-bar {
110 | 	position: fixed;
111 | 	bottom: 0;
112 | 	left: 0;
113 | 	right: 0;
114 | }
115 | </style>
116 | 


--------------------------------------------------------------------------------
/example/assets/icon/iconfont.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @font-face {font-family: "ly-icon";
 3 |   src: url('iconfont.eot?t=1533392363195'); /* IE9*/
 4 |   src: url('iconfont.eot?t=1533392363195#iefix') format('embedded-opentype'), /* IE6-IE8 */
 5 |   url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAdYAAsAAAAACjAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7km0Y21hcAAAAYAAAAB7AAAByJ8G2qlnbHlmAAAB/AAAAzwAAAO8xK7B7mhlYWQAAAU4AAAALwAAADYSO/HXaGhlYQAABWgAAAAeAAAAJAfkA4RobXR4AAAFiAAAABgAAAAYF+oAAGxvY2EAAAWgAAAADgAAAA4DugJWbWF4cAAABbAAAAAfAAAAIAEVAHxuYW1lAAAF0AAAAUkAAAJhNl0X0nBvc3QAAAccAAAAOgAAAEsy72FMeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDw/xtzwv4EhhrmBoQEozAiSAwAzbg03eJzFkdENwyAMRJ9DElVVRukc+ag6T4WUDsQkjAJjpGdIPjJBDj3EnYyMMDABQbzECPbDcH2VWssDz5aPvOUXHgw6x7KVVNea913p1Z0yVZ/LXWg31dFmbpPd1/qqpe2fw/kc4oGeWLaOz6akjn6PunZ8VjV3mP5+giAPAHicPVNNaBtHFJ43szPrlVYr7Y92pZW00kqW1rIsGa32x8GuFAeREFNKoCWkdQ8NFJNLWzWmBNI0NXFLe2hoDzEEn9rQ4p4KoT+HkEsvJrQ9FgK9lRpaCDn52m47UnBnHm/eezzem/m+eYgi9O/v5CEpIB0toD4aowsIAetAXcEVcL2ghzuQd2neMhTiNTxXbNR75Dmw6sww/ShoWUxkWVDAgYHrR14PexAGQ7wKvlkBKJbsF7VmWSOfQargOR8mG/ge5KuNcnbYTc4vjQy/ps9dkzWtqGmfzDFK5zAWsgq8YZkSlVIs+ZJm7fzDahtXQS569vMvZ2ol7fLHwZuVpiUB7OyAXqopByPVVrncsE1dK4q5zFzBzjTmDbh2lC7ocqX1B+IL87d+ICCyg2zUQoguwxDiHngKiA5YfhSbVexAHAXTOI/weA/I02OxvgjCk/v3nwhcj2/2AQvHRpzX/z4tPLpz55Ew0/oxi3bGz3K4XvIEgGMdK4aPxZMcrk/ucVugZBsto7cQslpBHMVDHPOuQ/BaXot7xHew5YDI0TX5WeX4Tl1OC4gKtqaxvMnEqTeTmcmsvBsGvAJ/1P/Cq0ZxxHnpAQaQQ6Pb0cKttkiCviIyJi6MNl7YGC1MTaU/IKy9FS7qXSPSaILc9VhVZcqURdsBmS5PVlJ6SvM0S6ESJkB+JNJSzjNSurwyWRbSgMt2N82oXC9pa1elheKllpJLCen2gJwZr26Fm7Xmer9Q6K97tVfDy6PxGSFoSxLNKd33bXKY7xTLw0v+Zuiu2WaZrS6lgWGaTeWqspPLqJKUy52ryRmKGaR7p1jZLK3Vwk3/4ulTmm6d4PqYHJA0yqAy/8UzXqtTUDnLJHuCxoxZnPnmT0ru3dre3v0CC3+9tOK+8s4eEX6+e/cnAe+RFDncu/5DfXe3/v27e4f/3D7XnpT2r9z8ipCDG1f2eS/Ce/1KDkkXachEHkISZ64uAnNgFVRXHfDZgEY4iNVGGLT4OLEKNNSGBOTb5D1bsqXkdR3my4v4u06pmWxPJr/tW+rnqrX/Glzl+yO4ZUvTnGg+eQBnm2Hy9S/XkwdHqmWpR3AW3k4+Rf8Br5CwpHicY2BkYGAAYrfNv3/H89t8ZeBmYQCB693XXiPo/y0srMwNQC4HAxNIFAB8EQz/AHicY2BkYGBu+N/AEMMCZP3/w8LKAKRRABsAchoEcAAABAAAAAPpAAAEAAAABAEAAAQAAAAEAAAAAAAAAAB2ALoBZgGcAd4AAHicY2BkYGBgYyhgYGUAASYg5gJCBob/YD4DABRPAZIAeJxdkT1Ow0AQhZ/zKxyJAgQVxUpIFEFxfsqILlLSp0hH4Tjr/Mj2WutNpJSchxNwAk5AS5NT0PHiDEiJrR1/8/bN7MgL4Abf8HB67rhO7KHJ7MQV8oNwlfwoXCO3hetooS/coP4i7OMZI+EWbpGxg1e7YtbGm7CHa7wLV8gfwlXyp3CN/CVcxz0Owg3qP8I+Zl5TuIUn79UfWR06vVDzvVpHJotN5vxk3znyVC+3SWglk89M22JtMtUPeqJMdKbtX49itxw4F6vYmlSN2UwniVG5NRsduWDlXD7sdmPRg8ikHGkEC40QjnEBhTn2jGtEMPwZcRkdfQn1zr8+pXuJLdWQ9ed759mMTouC+TFTvIQAvQvPhJ6s9F3OUWDHcwZUHWdRXJYVKWksk2n2SsgKebm3oRJRD7Aqq3IM0eUbX/iD8uz0F+UGajkAAAB4nGNgYoAALgbsgI2RiZGZkYWRlZGNkZ2BsYKtOL+0uDSfpTw/JZUtMzk/T1eXJSM/N5WBAQCMqwjKAAA=') format('woff'),
 6 |   url('iconfont.ttf?t=1533392363195') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 7 |   url('iconfont.svg?t=1533392363195#ly-icon') format('svg'); /* iOS 4.1- */
 8 | }
 9 | 
10 | .ly-icon {
11 |   font-family:"ly-icon" !important;
12 |   font-size:16px;
13 |   font-style:normal;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | .ly-icon-sousuo:before { content: "\e6a8"; }
19 | 
20 | .ly-icon-wode:before { content: "\e67b"; }
21 | 
22 | .ly-icon-icon--:before { content: "\e746"; }
23 | 
24 | .ly-icon-home:before { content: "\e7c6"; }
25 | 
26 | 


--------------------------------------------------------------------------------
/example/assets/icon/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScoutYin/ly-tab/b472b0756f584526f3105864d0ab01ed8a493092/example/assets/icon/iconfont.eot


--------------------------------------------------------------------------------
/example/assets/icon/iconfont.js:
--------------------------------------------------------------------------------
1 | (function(window){var svgSprite='<svg><symbol id="ly-icon-sousuo" viewBox="0 0 1024 1024"><path d="M1004.8 915.2l-243.2-243.2c0 0-6.4-6.4-6.4-6.4C800 595.2 832 505.6 832 416 832 185.6 646.4 0 416 0S0 185.6 0 416 185.6 832 416 832c89.6 0 179.2-32 243.2-83.2 0 6.4 6.4 6.4 6.4 6.4l243.2 243.2c25.6 25.6 70.4 25.6 96 6.4C1030.4 979.2 1030.4 940.8 1004.8 915.2zM64 416C64 224 224 64 416 64S768 224 768 416 608 768 416 768 64 608 64 416z"  ></path></symbol><symbol id="ly-icon-wode" viewBox="0 0 1025 1024"><path d="M2.327273 1010.036364c-2.327273-11.636364-2.327273-41.890909 0-74.472728 6.981818-58.181818 30.254545-100.072727 65.163636-125.672727 25.6-18.618182 58.181818-27.927273 86.109091-34.909091 13.963636-2.327273 27.927273-6.981818 39.563636-9.309091 69.818182-16.290909 141.963636-32.581818 195.490909-102.4 4.654545-4.654545 32.581818-46.545455-41.890909-137.309091-32.581818-39.563636-53.527273-93.090909-62.836363-160.581818-9.309091-69.818182-2.327273-134.981818 4.654545-176.872727 9.309091-48.872727 37.236364-93.090909 79.127273-125.672727 41.890909-32.581818 93.090909-48.872727 144.290909-48.872728s102.4 16.290909 144.290909 48.872728c41.890909 32.581818 69.818182 76.8 79.127273 128 6.981818 41.890909 13.963636 107.054545 4.654545 176.872727-9.309091 65.163636-30.254545 118.690909-62.836363 160.581818-74.472727 90.763636-44.218182 132.654545-41.890909 137.309091 53.527273 72.145455 125.672727 88.436364 195.490909 102.4 13.963636 2.327273 27.927273 6.981818 41.890909 9.309091 25.6 6.981818 58.181818 16.290909 83.781818 34.909091 76.8 53.527273 69.818182 169.890909 67.490909 197.818182H2.327273zM512 44.218182c-44.218182 0-88.436364 13.963636-125.672727 41.890909-18.618182 13.963636-32.581818 30.254545-44.218182 46.545454-11.636364 18.618182-18.618182 39.563636-23.272727 60.509091-6.981818 39.563636-13.963636 102.4-4.654546 167.563637 9.309091 60.509091 27.927273 109.381818 55.854546 144.290909 34.909091 44.218182 55.854545 83.781818 55.854545 118.690909 2.327273 30.254545-9.309091 48.872727-16.290909 55.854545-60.509091 81.454545-141.963636 97.745455-214.109091 114.036364-13.963636 2.327273-25.6 6.981818-39.563636 9.309091-23.272727 6.981818-51.2 16.290909-74.472728 30.254545-16.290909 11.636364-27.927273 25.6-37.236363 46.545455-6.981818 16.290909-13.963636 37.236364-16.290909 58.181818-2.327273 9.309091-2.327273 18.618182-2.327273 30.254546v9.30909h961.163636v-9.30909c0-11.636364 0-20.945455-2.327272-32.581819-6.981818-46.545455-23.272727-81.454545-53.527273-102.4-20.945455-16.290909-48.872727-23.272727-74.472727-30.254545-13.963636-2.327273-25.6-6.981818-41.890909-9.309091-72.145455-16.290909-153.6-34.909091-214.109091-114.036364-4.654545-6.981818-16.290909-25.6-16.290909-55.854545 2.327273-34.909091 20.945455-76.8 55.854545-118.690909 30.254545-34.909091 48.872727-83.781818 55.854545-144.290909 9.309091-65.163636 2.327273-125.672727-4.654545-167.563637-4.654545-20.945455-11.636364-41.890909-23.272727-60.509091s-25.6-34.909091-44.218182-46.545454c-23.272727-25.6-67.490909-41.890909-111.709091-41.890909z"  ></path></symbol><symbol id="ly-icon-icon--" viewBox="0 0 1024 1024"><path d="M524.8 117.76c-225.28 0-409.6 156.16-409.6 350.72 0 158.72 125.44 294.4 294.4 337.92l115.2 130.56 115.2-130.56c171.52-43.52 294.4-176.64 294.4-337.92 0-194.56-184.32-350.72-409.6-350.72zM614.4 747.52L558.08 819.2l-33.28 40.96-89.6-112.64c-153.6-33.28-268.8-148.48-268.8-284.16 0-163.84 161.28-294.4 358.4-294.4s358.4 133.12 358.4 294.4c0 135.68-115.2 250.88-268.8 284.16z"  ></path></symbol><symbol id="ly-icon-home" viewBox="0 0 1024 1024"><path d="M946.5 505L560.1 118.8l-25.9-25.9c-12.3-12.2-32.1-12.2-44.4 0L77.5 505c-12.3 12.3-18.9 28.6-18.8 46 0.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8 12.1-12.1 18.7-28.2 18.7-45.3 0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204z m217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"  ></path></symbol></svg>';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window)


--------------------------------------------------------------------------------
/example/assets/icon/iconfont.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <!--
 4 | 2013-9-30: Created.
 5 | -->
 6 | <svg>
 7 | <metadata>
 8 | Created by iconfont
 9 | </metadata>
10 | <defs>
11 | 
12 | <font id="ly-icon" horiz-adv-x="1024" >
13 |   <font-face
14 |     font-family="ly-icon"
15 |     font-weight="500"
16 |     font-stretch="normal"
17 |     units-per-em="1024"
18 |     ascent="896"
19 |     descent="-128"
20 |   />
21 |     <missing-glyph />
22 |     
23 |     <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
24 | d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
25 | t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
26 | t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
27 |     
28 | 
29 |     
30 |     <glyph glyph-name="sousuo" unicode="&#59048;" d="M1004.8-19.2l-243.2 243.2c0 0-6.4 6.4-6.4 6.4C800 300.8 832 390.4 832 480 832 710.4 646.4 896 416 896S0 710.4 0 480 185.6 64 416 64c89.6 0 179.2 32 243.2 83.2 0-6.4 6.4-6.4 6.4-6.4l243.2-243.2c25.6-25.6 70.4-25.6 96-6.4C1030.4-83.2 1030.4-44.8 1004.8-19.2zM64 480C64 672 224 832 416 832S768 672 768 480 608 128 416 128 64 288 64 480z"  horiz-adv-x="1024" />
31 | 
32 |     
33 |     <glyph glyph-name="wode" unicode="&#59003;" d="M2.327-114.036c-2.327 11.636-2.327 41.891 0 74.473 6.982 58.182 30.255 100.073 65.164 125.673 25.6 18.618 58.182 27.927 86.109 34.909 13.964 2.327 27.927 6.982 39.564 9.309 69.818 16.291 141.964 32.582 195.491 102.4 4.655 4.655 32.582 46.545-41.891 137.309-32.582 39.564-53.527 93.091-62.836 160.582-9.309 69.818-2.327 134.982 4.655 176.873 9.309 48.873 37.236 93.091 79.127 125.673 41.891 32.582 93.091 48.873 144.291 48.873s102.4-16.291 144.291-48.873c41.891-32.582 69.818-76.8 79.127-128 6.982-41.891 13.964-107.055 4.655-176.873-9.309-65.164-30.255-118.691-62.836-160.582-74.473-90.764-44.218-132.655-41.891-137.309 53.527-72.145 125.673-88.436 195.491-102.4 13.964-2.327 27.927-6.982 41.891-9.309 25.6-6.982 58.182-16.291 83.782-34.909 76.8-53.527 69.818-169.891 67.491-197.818h-1021.673zM512 851.782c-44.218 0-88.436-13.964-125.673-41.891-18.618-13.964-32.582-30.255-44.218-46.545-11.636-18.618-18.618-39.564-23.273-60.509-6.982-39.564-13.964-102.4-4.655-167.564 9.309-60.509 27.927-109.382 55.855-144.291 34.909-44.218 55.855-83.782 55.855-118.691 2.327-30.255-9.309-48.873-16.291-55.855-60.509-81.455-141.964-97.745-214.109-114.036-13.964-2.327-25.6-6.982-39.564-9.309-23.273-6.982-51.2-16.291-74.473-30.255-16.291-11.636-27.927-25.6-37.236-46.545-6.982-16.291-13.964-37.236-16.291-58.182-2.327-9.309-2.327-18.618-2.327-30.255v-9.309h961.164v9.309c0 11.636 0 20.945-2.327 32.582-6.982 46.545-23.273 81.455-53.527 102.4-20.945 16.291-48.873 23.273-74.473 30.255-13.964 2.327-25.6 6.982-41.891 9.309-72.145 16.291-153.6 34.909-214.109 114.036-4.655 6.982-16.291 25.6-16.291 55.855 2.327 34.909 20.945 76.8 55.855 118.691 30.255 34.909 48.873 83.782 55.855 144.291 9.309 65.164 2.327 125.673-4.655 167.564-4.655 20.945-11.636 41.891-23.273 60.509s-25.6 34.909-44.218 46.545c-23.273 25.6-67.491 41.891-111.709 41.891z"  horiz-adv-x="1025" />
34 | 
35 |     
36 |     <glyph glyph-name="icon--" unicode="&#59206;" d="M524.8 778.24c-225.28 0-409.6-156.16-409.6-350.72 0-158.72 125.44-294.4 294.4-337.92l115.2-130.56 115.2 130.56c171.52 43.52 294.4 176.64 294.4 337.92 0 194.56-184.32 350.72-409.6 350.72zM614.4 148.48L558.08 76.8l-33.28-40.96-89.6 112.64c-153.6 33.28-268.8 148.48-268.8 284.16 0 163.84 161.28 294.4 358.4 294.4s358.4-133.12 358.4-294.4c0-135.68-115.2-250.88-268.8-284.16z"  horiz-adv-x="1024" />
37 | 
38 |     
39 |     <glyph glyph-name="home" unicode="&#59334;" d="M946.5 391L560.1 777.2l-25.9 25.9c-12.3 12.2-32.1 12.2-44.4 0L77.5 391c-12.3-12.3-18.9-28.6-18.8-46 0.4-35.2 29.7-63.3 64.9-63.3h42.5V-44h691.8V281.7h43.4c17.1 0 33.2 6.7 45.3 18.8 12.1 12.1 18.7 28.2 18.7 45.3 0 17-6.7 33.1-18.8 45.2zM568 28H456V232h112v-204z m217.9 325.7V28H632V256c0 22.1-17.9 40-40 40H432c-22.1 0-40-17.9-40-40v-228H238.1V353.7h-96l370 369.7 23.1-23.1L882 353.7h-96.1z"  horiz-adv-x="1024" />
40 | 
41 |     
42 | 
43 | 
44 |   </font>
45 | </defs></svg>
46 | 


--------------------------------------------------------------------------------
/example/assets/icon/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScoutYin/ly-tab/b472b0756f584526f3105864d0ab01ed8a493092/example/assets/icon/iconfont.ttf


--------------------------------------------------------------------------------
/example/assets/icon/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ScoutYin/ly-tab/b472b0756f584526f3105864d0ab01ed8a493092/example/assets/icon/iconfont.woff


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>ly-tab使用demo</title>
 7 |     <style>
 8 |       body {
 9 |         margin: 0;padding: 0;
10 |         height: 100%;
11 |         width: 100%;
12 |       }
13 |     </style>
14 |   </head>
15 |   <body>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue';
 4 | import App from './App';
 5 | 
 6 | Vue.config.productionTip = false;
 7 | 
 8 | /* eslint-disable no-new */
 9 | new Vue({
10 | 	el: '#app',
11 | 	components: { App },
12 | 	template: '<App/>'
13 | });
14 | 


--------------------------------------------------------------------------------
/lib/ly-tab.common.js:
--------------------------------------------------------------------------------
   1 | /******/ (function() { // webpackBootstrap
   2 | /******/ 	var __webpack_modules__ = ({
   3 | 
   4 | /***/ 696:
   5 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
   6 | 
   7 | "use strict";
   8 | __webpack_require__.r(__webpack_exports__);
   9 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
  10 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
  11 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
  12 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
  13 | // Imports
  14 | 
  15 | 
  16 | var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
  17 | // Module
  18 | ___CSS_LOADER_EXPORT___.push([module.id, "\n.ly-tab-bar-wrap {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n\talign-items: stretch;\n\tmin-height: 50px;\n\tbackground: #fff;\n}\n.ly-tab-bar .ly-tab-item {\n\tflex: 1 1;\n\tfont-size: 12px;\n}\n.ly-tab-bar .ly-tab-item__badge {\n\ttop: 2px;\n\tright: 0;\n}\n", ""]);
  19 | // Exports
  20 | /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
  21 | 
  22 | 
  23 | /***/ }),
  24 | 
  25 | /***/ 918:
  26 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
  27 | 
  28 | "use strict";
  29 | __webpack_require__.r(__webpack_exports__);
  30 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
  31 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
  32 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
  33 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
  34 | // Imports
  35 | 
  36 | 
  37 | var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
  38 | // Module
  39 | ___CSS_LOADER_EXPORT___.push([module.id, "\n.ly-tab-item {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n}\n.ly-tab-item__wrap {\n\tposition: relative;\n}\n.ly-tab-item__badge {\n\tposition: absolute;\n\ttop: 4px;\n\tright: -10px;\n\tpadding: 1px 4px;\n\tmin-width: 8px;\n\tfont-size: 9px;\n\tline-height: 12px;\n\tcolor: #fff;\n\tbackground: #ff411c;\n\twhite-space: nowrap;\n\tborder-radius: 100px;\n\ttransform: translate(50%, -50%);\n\ttext-align: center;\n}\n", ""]);
  40 | // Exports
  41 | /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
  42 | 
  43 | 
  44 | /***/ }),
  45 | 
  46 | /***/ 374:
  47 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
  48 | 
  49 | "use strict";
  50 | __webpack_require__.r(__webpack_exports__);
  51 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(81);
  52 | /* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
  53 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(645);
  54 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
  55 | // Imports
  56 | 
  57 | 
  58 | var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
  59 | // Module
  60 | ___CSS_LOADER_EXPORT___.push([module.id, "\n.ly-tabs {\n\toverflow: hidden;\n\tposition: relative;\n\twidth: 100%;\n\tborder-bottom: 1px solid #eee;\n\tbackground: #fff;\n}\n.ly-tabs__tab-list {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n\tmin-width: 100%;\n\twidth: min-content;\n}\n.ly-tabs__active-line {\n\tposition: absolute;\n\tbottom: 3px;\n\tleft: 0;\n\twidth: 30px;\n\theight: 3px;\n\tborder-radius: 4px;\n}\n.ly-tabs .ly-tab-item {\n\tpadding: 10px 12px;\n\tflex: 1 1 auto;\n\tfont-size: 14px;\n\ttext-align: center;\n\twhite-space: nowrap;\n}\n", ""]);
  61 | // Exports
  62 | /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
  63 | 
  64 | 
  65 | /***/ }),
  66 | 
  67 | /***/ 645:
  68 | /***/ (function(module) {
  69 | 
  70 | "use strict";
  71 | 
  72 | 
  73 | /*
  74 |   MIT License http://www.opensource.org/licenses/mit-license.php
  75 |   Author Tobias Koppers @sokra
  76 | */
  77 | module.exports = function (cssWithMappingToString) {
  78 |   var list = []; // return the list of modules as css string
  79 | 
  80 |   list.toString = function toString() {
  81 |     return this.map(function (item) {
  82 |       var content = "";
  83 |       var needLayer = typeof item[5] !== "undefined";
  84 | 
  85 |       if (item[4]) {
  86 |         content += "@supports (".concat(item[4], ") {");
  87 |       }
  88 | 
  89 |       if (item[2]) {
  90 |         content += "@media ".concat(item[2], " {");
  91 |       }
  92 | 
  93 |       if (needLayer) {
  94 |         content += "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {");
  95 |       }
  96 | 
  97 |       content += cssWithMappingToString(item);
  98 | 
  99 |       if (needLayer) {
 100 |         content += "}";
 101 |       }
 102 | 
 103 |       if (item[2]) {
 104 |         content += "}";
 105 |       }
 106 | 
 107 |       if (item[4]) {
 108 |         content += "}";
 109 |       }
 110 | 
 111 |       return content;
 112 |     }).join("");
 113 |   }; // import a list of modules into the list
 114 | 
 115 | 
 116 |   list.i = function i(modules, media, dedupe, supports, layer) {
 117 |     if (typeof modules === "string") {
 118 |       modules = [[null, modules, undefined]];
 119 |     }
 120 | 
 121 |     var alreadyImportedModules = {};
 122 | 
 123 |     if (dedupe) {
 124 |       for (var k = 0; k < this.length; k++) {
 125 |         var id = this[k][0];
 126 | 
 127 |         if (id != null) {
 128 |           alreadyImportedModules[id] = true;
 129 |         }
 130 |       }
 131 |     }
 132 | 
 133 |     for (var _k = 0; _k < modules.length; _k++) {
 134 |       var item = [].concat(modules[_k]);
 135 | 
 136 |       if (dedupe && alreadyImportedModules[item[0]]) {
 137 |         continue;
 138 |       }
 139 | 
 140 |       if (typeof layer !== "undefined") {
 141 |         if (typeof item[5] === "undefined") {
 142 |           item[5] = layer;
 143 |         } else {
 144 |           item[1] = "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {").concat(item[1], "}");
 145 |           item[5] = layer;
 146 |         }
 147 |       }
 148 | 
 149 |       if (media) {
 150 |         if (!item[2]) {
 151 |           item[2] = media;
 152 |         } else {
 153 |           item[1] = "@media ".concat(item[2], " {").concat(item[1], "}");
 154 |           item[2] = media;
 155 |         }
 156 |       }
 157 | 
 158 |       if (supports) {
 159 |         if (!item[4]) {
 160 |           item[4] = "".concat(supports);
 161 |         } else {
 162 |           item[1] = "@supports (".concat(item[4], ") {").concat(item[1], "}");
 163 |           item[4] = supports;
 164 |         }
 165 |       }
 166 | 
 167 |       list.push(item);
 168 |     }
 169 |   };
 170 | 
 171 |   return list;
 172 | };
 173 | 
 174 | /***/ }),
 175 | 
 176 | /***/ 81:
 177 | /***/ (function(module) {
 178 | 
 179 | "use strict";
 180 | 
 181 | 
 182 | module.exports = function (i) {
 183 |   return i[1];
 184 | };
 185 | 
 186 | /***/ }),
 187 | 
 188 | /***/ 923:
 189 | /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 190 | 
 191 | // style-loader: Adds some css to the DOM by adding a <style> tag
 192 | 
 193 | // load the styles
 194 | var content = __webpack_require__(696);
 195 | if(content.__esModule) content = content.default;
 196 | if(typeof content === 'string') content = [[module.id, content, '']];
 197 | if(content.locals) module.exports = content.locals;
 198 | // add the styles to the DOM
 199 | var add = (__webpack_require__(346)/* ["default"] */ .Z)
 200 | var update = add("7aa7ba07", content, false, {});
 201 | // Hot Module Replacement
 202 | if(false) {}
 203 | 
 204 | /***/ }),
 205 | 
 206 | /***/ 343:
 207 | /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 208 | 
 209 | // style-loader: Adds some css to the DOM by adding a <style> tag
 210 | 
 211 | // load the styles
 212 | var content = __webpack_require__(918);
 213 | if(content.__esModule) content = content.default;
 214 | if(typeof content === 'string') content = [[module.id, content, '']];
 215 | if(content.locals) module.exports = content.locals;
 216 | // add the styles to the DOM
 217 | var add = (__webpack_require__(346)/* ["default"] */ .Z)
 218 | var update = add("52d1e537", content, false, {});
 219 | // Hot Module Replacement
 220 | if(false) {}
 221 | 
 222 | /***/ }),
 223 | 
 224 | /***/ 613:
 225 | /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 226 | 
 227 | // style-loader: Adds some css to the DOM by adding a <style> tag
 228 | 
 229 | // load the styles
 230 | var content = __webpack_require__(374);
 231 | if(content.__esModule) content = content.default;
 232 | if(typeof content === 'string') content = [[module.id, content, '']];
 233 | if(content.locals) module.exports = content.locals;
 234 | // add the styles to the DOM
 235 | var add = (__webpack_require__(346)/* ["default"] */ .Z)
 236 | var update = add("42e6a91d", content, false, {});
 237 | // Hot Module Replacement
 238 | if(false) {}
 239 | 
 240 | /***/ }),
 241 | 
 242 | /***/ 346:
 243 | /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 244 | 
 245 | "use strict";
 246 | 
 247 | // EXPORTS
 248 | __webpack_require__.d(__webpack_exports__, {
 249 |   "Z": function() { return /* binding */ addStylesClient; }
 250 | });
 251 | 
 252 | ;// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/listToStyles.js
 253 | /**
 254 |  * Translates the list format produced by css-loader into something
 255 |  * easier to manipulate.
 256 |  */
 257 | function listToStyles (parentId, list) {
 258 |   var styles = []
 259 |   var newStyles = {}
 260 |   for (var i = 0; i < list.length; i++) {
 261 |     var item = list[i]
 262 |     var id = item[0]
 263 |     var css = item[1]
 264 |     var media = item[2]
 265 |     var sourceMap = item[3]
 266 |     var part = {
 267 |       id: parentId + ':' + i,
 268 |       css: css,
 269 |       media: media,
 270 |       sourceMap: sourceMap
 271 |     }
 272 |     if (!newStyles[id]) {
 273 |       styles.push(newStyles[id] = { id: id, parts: [part] })
 274 |     } else {
 275 |       newStyles[id].parts.push(part)
 276 |     }
 277 |   }
 278 |   return styles
 279 | }
 280 | 
 281 | ;// CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesClient.js
 282 | /*
 283 |   MIT License http://www.opensource.org/licenses/mit-license.php
 284 |   Author Tobias Koppers @sokra
 285 |   Modified by Evan You @yyx990803
 286 | */
 287 | 
 288 | 
 289 | 
 290 | var hasDocument = typeof document !== 'undefined'
 291 | 
 292 | if (typeof DEBUG !== 'undefined' && DEBUG) {
 293 |   if (!hasDocument) {
 294 |     throw new Error(
 295 |     'vue-style-loader cannot be used in a non-browser environment. ' +
 296 |     "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
 297 |   ) }
 298 | }
 299 | 
 300 | /*
 301 | type StyleObject = {
 302 |   id: number;
 303 |   parts: Array<StyleObjectPart>
 304 | }
 305 | 
 306 | type StyleObjectPart = {
 307 |   css: string;
 308 |   media: string;
 309 |   sourceMap: ?string
 310 | }
 311 | */
 312 | 
 313 | var stylesInDom = {/*
 314 |   [id: number]: {
 315 |     id: number,
 316 |     refs: number,
 317 |     parts: Array<(obj?: StyleObjectPart) => void>
 318 |   }
 319 | */}
 320 | 
 321 | var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
 322 | var singletonElement = null
 323 | var singletonCounter = 0
 324 | var isProduction = false
 325 | var noop = function () {}
 326 | var options = null
 327 | var ssrIdKey = 'data-vue-ssr-id'
 328 | 
 329 | // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
 330 | // tags it will allow on a page
 331 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
 332 | 
 333 | function addStylesClient (parentId, list, _isProduction, _options) {
 334 |   isProduction = _isProduction
 335 | 
 336 |   options = _options || {}
 337 | 
 338 |   var styles = listToStyles(parentId, list)
 339 |   addStylesToDom(styles)
 340 | 
 341 |   return function update (newList) {
 342 |     var mayRemove = []
 343 |     for (var i = 0; i < styles.length; i++) {
 344 |       var item = styles[i]
 345 |       var domStyle = stylesInDom[item.id]
 346 |       domStyle.refs--
 347 |       mayRemove.push(domStyle)
 348 |     }
 349 |     if (newList) {
 350 |       styles = listToStyles(parentId, newList)
 351 |       addStylesToDom(styles)
 352 |     } else {
 353 |       styles = []
 354 |     }
 355 |     for (var i = 0; i < mayRemove.length; i++) {
 356 |       var domStyle = mayRemove[i]
 357 |       if (domStyle.refs === 0) {
 358 |         for (var j = 0; j < domStyle.parts.length; j++) {
 359 |           domStyle.parts[j]()
 360 |         }
 361 |         delete stylesInDom[domStyle.id]
 362 |       }
 363 |     }
 364 |   }
 365 | }
 366 | 
 367 | function addStylesToDom (styles /* Array<StyleObject> */) {
 368 |   for (var i = 0; i < styles.length; i++) {
 369 |     var item = styles[i]
 370 |     var domStyle = stylesInDom[item.id]
 371 |     if (domStyle) {
 372 |       domStyle.refs++
 373 |       for (var j = 0; j < domStyle.parts.length; j++) {
 374 |         domStyle.parts[j](item.parts[j])
 375 |       }
 376 |       for (; j < item.parts.length; j++) {
 377 |         domStyle.parts.push(addStyle(item.parts[j]))
 378 |       }
 379 |       if (domStyle.parts.length > item.parts.length) {
 380 |         domStyle.parts.length = item.parts.length
 381 |       }
 382 |     } else {
 383 |       var parts = []
 384 |       for (var j = 0; j < item.parts.length; j++) {
 385 |         parts.push(addStyle(item.parts[j]))
 386 |       }
 387 |       stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
 388 |     }
 389 |   }
 390 | }
 391 | 
 392 | function createStyleElement () {
 393 |   var styleElement = document.createElement('style')
 394 |   styleElement.type = 'text/css'
 395 |   head.appendChild(styleElement)
 396 |   return styleElement
 397 | }
 398 | 
 399 | function addStyle (obj /* StyleObjectPart */) {
 400 |   var update, remove
 401 |   var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
 402 | 
 403 |   if (styleElement) {
 404 |     if (isProduction) {
 405 |       // has SSR styles and in production mode.
 406 |       // simply do nothing.
 407 |       return noop
 408 |     } else {
 409 |       // has SSR styles but in dev mode.
 410 |       // for some reason Chrome can't handle source map in server-rendered
 411 |       // style tags - source maps in <style> only works if the style tag is
 412 |       // created and inserted dynamically. So we remove the server rendered
 413 |       // styles and inject new ones.
 414 |       styleElement.parentNode.removeChild(styleElement)
 415 |     }
 416 |   }
 417 | 
 418 |   if (isOldIE) {
 419 |     // use singleton mode for IE9.
 420 |     var styleIndex = singletonCounter++
 421 |     styleElement = singletonElement || (singletonElement = createStyleElement())
 422 |     update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
 423 |     remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
 424 |   } else {
 425 |     // use multi-style-tag mode in all other cases
 426 |     styleElement = createStyleElement()
 427 |     update = applyToTag.bind(null, styleElement)
 428 |     remove = function () {
 429 |       styleElement.parentNode.removeChild(styleElement)
 430 |     }
 431 |   }
 432 | 
 433 |   update(obj)
 434 | 
 435 |   return function updateStyle (newObj /* StyleObjectPart */) {
 436 |     if (newObj) {
 437 |       if (newObj.css === obj.css &&
 438 |           newObj.media === obj.media &&
 439 |           newObj.sourceMap === obj.sourceMap) {
 440 |         return
 441 |       }
 442 |       update(obj = newObj)
 443 |     } else {
 444 |       remove()
 445 |     }
 446 |   }
 447 | }
 448 | 
 449 | var replaceText = (function () {
 450 |   var textStore = []
 451 | 
 452 |   return function (index, replacement) {
 453 |     textStore[index] = replacement
 454 |     return textStore.filter(Boolean).join('\n')
 455 |   }
 456 | })()
 457 | 
 458 | function applyToSingletonTag (styleElement, index, remove, obj) {
 459 |   var css = remove ? '' : obj.css
 460 | 
 461 |   if (styleElement.styleSheet) {
 462 |     styleElement.styleSheet.cssText = replaceText(index, css)
 463 |   } else {
 464 |     var cssNode = document.createTextNode(css)
 465 |     var childNodes = styleElement.childNodes
 466 |     if (childNodes[index]) styleElement.removeChild(childNodes[index])
 467 |     if (childNodes.length) {
 468 |       styleElement.insertBefore(cssNode, childNodes[index])
 469 |     } else {
 470 |       styleElement.appendChild(cssNode)
 471 |     }
 472 |   }
 473 | }
 474 | 
 475 | function applyToTag (styleElement, obj) {
 476 |   var css = obj.css
 477 |   var media = obj.media
 478 |   var sourceMap = obj.sourceMap
 479 | 
 480 |   if (media) {
 481 |     styleElement.setAttribute('media', media)
 482 |   }
 483 |   if (options.ssrId) {
 484 |     styleElement.setAttribute(ssrIdKey, obj.id)
 485 |   }
 486 | 
 487 |   if (sourceMap) {
 488 |     // https://developer.chrome.com/devtools/docs/javascript-debugging
 489 |     // this makes source maps inside style tags work properly in Chrome
 490 |     css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
 491 |     // http://stackoverflow.com/a/26603875
 492 |     css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
 493 |   }
 494 | 
 495 |   if (styleElement.styleSheet) {
 496 |     styleElement.styleSheet.cssText = css
 497 |   } else {
 498 |     while (styleElement.firstChild) {
 499 |       styleElement.removeChild(styleElement.firstChild)
 500 |     }
 501 |     styleElement.appendChild(document.createTextNode(css))
 502 |   }
 503 | }
 504 | 
 505 | 
 506 | /***/ })
 507 | 
 508 | /******/ 	});
 509 | /************************************************************************/
 510 | /******/ 	// The module cache
 511 | /******/ 	var __webpack_module_cache__ = {};
 512 | /******/ 	
 513 | /******/ 	// The require function
 514 | /******/ 	function __webpack_require__(moduleId) {
 515 | /******/ 		// Check if module is in cache
 516 | /******/ 		var cachedModule = __webpack_module_cache__[moduleId];
 517 | /******/ 		if (cachedModule !== undefined) {
 518 | /******/ 			return cachedModule.exports;
 519 | /******/ 		}
 520 | /******/ 		// Create a new module (and put it into the cache)
 521 | /******/ 		var module = __webpack_module_cache__[moduleId] = {
 522 | /******/ 			id: moduleId,
 523 | /******/ 			// no module.loaded needed
 524 | /******/ 			exports: {}
 525 | /******/ 		};
 526 | /******/ 	
 527 | /******/ 		// Execute the module function
 528 | /******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 529 | /******/ 	
 530 | /******/ 		// Return the exports of the module
 531 | /******/ 		return module.exports;
 532 | /******/ 	}
 533 | /******/ 	
 534 | /************************************************************************/
 535 | /******/ 	/* webpack/runtime/compat get default export */
 536 | /******/ 	!function() {
 537 | /******/ 		// getDefaultExport function for compatibility with non-harmony modules
 538 | /******/ 		__webpack_require__.n = function(module) {
 539 | /******/ 			var getter = module && module.__esModule ?
 540 | /******/ 				function() { return module['default']; } :
 541 | /******/ 				function() { return module; };
 542 | /******/ 			__webpack_require__.d(getter, { a: getter });
 543 | /******/ 			return getter;
 544 | /******/ 		};
 545 | /******/ 	}();
 546 | /******/ 	
 547 | /******/ 	/* webpack/runtime/define property getters */
 548 | /******/ 	!function() {
 549 | /******/ 		// define getter functions for harmony exports
 550 | /******/ 		__webpack_require__.d = function(exports, definition) {
 551 | /******/ 			for(var key in definition) {
 552 | /******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
 553 | /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 554 | /******/ 				}
 555 | /******/ 			}
 556 | /******/ 		};
 557 | /******/ 	}();
 558 | /******/ 	
 559 | /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 560 | /******/ 	!function() {
 561 | /******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
 562 | /******/ 	}();
 563 | /******/ 	
 564 | /******/ 	/* webpack/runtime/make namespace object */
 565 | /******/ 	!function() {
 566 | /******/ 		// define __esModule on exports
 567 | /******/ 		__webpack_require__.r = function(exports) {
 568 | /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 569 | /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 570 | /******/ 			}
 571 | /******/ 			Object.defineProperty(exports, '__esModule', { value: true });
 572 | /******/ 		};
 573 | /******/ 	}();
 574 | /******/ 	
 575 | /************************************************************************/
 576 | var __webpack_exports__ = {};
 577 | // This entry need to be wrapped in an IIFE because it need to be in strict mode.
 578 | !function() {
 579 | "use strict";
 580 | // ESM COMPAT FLAG
 581 | __webpack_require__.r(__webpack_exports__);
 582 | 
 583 | // EXPORTS
 584 | __webpack_require__.d(__webpack_exports__, {
 585 |   "LyTabBar": function() { return /* reexport */ tab_bar; },
 586 |   "LyTabItem": function() { return /* reexport */ tab_item; },
 587 |   "LyTabs": function() { return /* reexport */ tabs; },
 588 |   "default": function() { return /* binding */ src; }
 589 | });
 590 | 
 591 | ;// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/tab-bar.vue?vue&type=template&id=4a1cd892&
 592 | var render = function () {
 593 |   var _vm = this
 594 |   var _h = _vm.$createElement
 595 |   var _c = _vm._self._c || _h
 596 |   return _c("div", { staticClass: "ly-tab-bar" }, [
 597 |     _c("div", { staticClass: "ly-tab-bar-wrap" }, [_vm._t("default")], 2),
 598 |   ])
 599 | }
 600 | var staticRenderFns = []
 601 | render._withStripped = true
 602 | 
 603 | 
 604 | ;// CONCATENATED MODULE: ./src/tab-bar.vue?vue&type=template&id=4a1cd892&
 605 | 
 606 | ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/tab-bar.vue?vue&type=script&lang=js&
 607 | //
 608 | //
 609 | //
 610 | //
 611 | //
 612 | //
 613 | //
 614 | //
 615 | /* harmony default export */ var tab_barvue_type_script_lang_js_ = ({
 616 |   name: 'LyTabBar',
 617 |   model: {
 618 |     prop: 'value',
 619 |     event: 'change'
 620 |   },
 621 |   props: {
 622 |     value: {
 623 |       type: [String, Number],
 624 |       default: ''
 625 |     },
 626 |     activeColor: {
 627 |       type: String,
 628 |       default: '#1677ff'
 629 |     }
 630 |   },
 631 |   data: function data() {
 632 |     return {
 633 |       activeValue: this.value
 634 |     };
 635 |   },
 636 |   watch: {
 637 |     value: function value(_value) {
 638 |       this.activeValue = _value;
 639 |     }
 640 |   },
 641 |   methods: {
 642 |     setActiveValue: function setActiveValue(value) {
 643 |       this.activeValue = value;
 644 |       this.$emit('change', value);
 645 |     }
 646 |   }
 647 | });
 648 | ;// CONCATENATED MODULE: ./src/tab-bar.vue?vue&type=script&lang=js&
 649 |  /* harmony default export */ var src_tab_barvue_type_script_lang_js_ = (tab_barvue_type_script_lang_js_); 
 650 | // EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/tab-bar.vue?vue&type=style&index=0&lang=css&
 651 | var tab_barvue_type_style_index_0_lang_css_ = __webpack_require__(923);
 652 | ;// CONCATENATED MODULE: ./src/tab-bar.vue?vue&type=style&index=0&lang=css&
 653 | 
 654 | ;// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 655 | /* globals __VUE_SSR_CONTEXT__ */
 656 | 
 657 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
 658 | // This module is a runtime utility for cleaner component module output and will
 659 | // be included in the final webpack user bundle.
 660 | 
 661 | function normalizeComponent (
 662 |   scriptExports,
 663 |   render,
 664 |   staticRenderFns,
 665 |   functionalTemplate,
 666 |   injectStyles,
 667 |   scopeId,
 668 |   moduleIdentifier, /* server only */
 669 |   shadowMode /* vue-cli only */
 670 | ) {
 671 |   // Vue.extend constructor export interop
 672 |   var options = typeof scriptExports === 'function'
 673 |     ? scriptExports.options
 674 |     : scriptExports
 675 | 
 676 |   // render functions
 677 |   if (render) {
 678 |     options.render = render
 679 |     options.staticRenderFns = staticRenderFns
 680 |     options._compiled = true
 681 |   }
 682 | 
 683 |   // functional template
 684 |   if (functionalTemplate) {
 685 |     options.functional = true
 686 |   }
 687 | 
 688 |   // scopedId
 689 |   if (scopeId) {
 690 |     options._scopeId = 'data-v-' + scopeId
 691 |   }
 692 | 
 693 |   var hook
 694 |   if (moduleIdentifier) { // server build
 695 |     hook = function (context) {
 696 |       // 2.3 injection
 697 |       context =
 698 |         context || // cached call
 699 |         (this.$vnode && this.$vnode.ssrContext) || // stateful
 700 |         (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
 701 |       // 2.2 with runInNewContext: true
 702 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
 703 |         context = __VUE_SSR_CONTEXT__
 704 |       }
 705 |       // inject component styles
 706 |       if (injectStyles) {
 707 |         injectStyles.call(this, context)
 708 |       }
 709 |       // register component module identifier for async chunk inferrence
 710 |       if (context && context._registeredComponents) {
 711 |         context._registeredComponents.add(moduleIdentifier)
 712 |       }
 713 |     }
 714 |     // used by ssr in case component is cached and beforeCreate
 715 |     // never gets called
 716 |     options._ssrRegister = hook
 717 |   } else if (injectStyles) {
 718 |     hook = shadowMode
 719 |       ? function () {
 720 |         injectStyles.call(
 721 |           this,
 722 |           (options.functional ? this.parent : this).$root.$options.shadowRoot
 723 |         )
 724 |       }
 725 |       : injectStyles
 726 |   }
 727 | 
 728 |   if (hook) {
 729 |     if (options.functional) {
 730 |       // for template-only hot-reload because in that case the render fn doesn't
 731 |       // go through the normalizer
 732 |       options._injectStyles = hook
 733 |       // register for functional component in vue file
 734 |       var originalRender = options.render
 735 |       options.render = function renderWithStyleInjection (h, context) {
 736 |         hook.call(context)
 737 |         return originalRender(h, context)
 738 |       }
 739 |     } else {
 740 |       // inject component registration as beforeCreate hook
 741 |       var existing = options.beforeCreate
 742 |       options.beforeCreate = existing
 743 |         ? [].concat(existing, hook)
 744 |         : [hook]
 745 |     }
 746 |   }
 747 | 
 748 |   return {
 749 |     exports: scriptExports,
 750 |     options: options
 751 |   }
 752 | }
 753 | 
 754 | ;// CONCATENATED MODULE: ./src/tab-bar.vue
 755 | 
 756 | 
 757 | 
 758 | ;
 759 | 
 760 | 
 761 | /* normalize component */
 762 | 
 763 | var component = normalizeComponent(
 764 |   src_tab_barvue_type_script_lang_js_,
 765 |   render,
 766 |   staticRenderFns,
 767 |   false,
 768 |   null,
 769 |   null,
 770 |   null
 771 |   
 772 | )
 773 | 
 774 | /* hot reload */
 775 | if (false) { var api; }
 776 | component.options.__file = "src/tab-bar.vue"
 777 | /* harmony default export */ var tab_bar = (component.exports);
 778 | ;// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/tab-item.vue?vue&type=template&id=aa3624b8&
 779 | var tab_itemvue_type_template_id_aa3624b8_render = function () {
 780 |   var _vm = this
 781 |   var _h = _vm.$createElement
 782 |   var _c = _vm._self._c || _h
 783 |   return _c(
 784 |     "div",
 785 |     {
 786 |       staticClass: "ly-tab-item",
 787 |       style: _vm.$parent.value === _vm.name ? _vm.activeStyle : {},
 788 |       on: { click: _vm.onItemClicked },
 789 |     },
 790 |     [
 791 |       _c(
 792 |         "div",
 793 |         { staticClass: "ly-tab-item__wrap" },
 794 |         [
 795 |           _vm._t("icon"),
 796 |           _vm._v(" "),
 797 |           _c(
 798 |             "div",
 799 |             { staticClass: "ly-tab-item__label" },
 800 |             [
 801 |               _vm._t("default", function () {
 802 |                 return [_vm._v(_vm._s(_vm.title))]
 803 |               }),
 804 |             ],
 805 |             2
 806 |           ),
 807 |           _vm._v(" "),
 808 |           _vm.badge
 809 |             ? _c("div", { staticClass: "ly-tab-item__badge" }, [
 810 |                 _vm._v("\n\t\t\t" + _vm._s(_vm.badge) + "\n\t\t"),
 811 |               ])
 812 |             : _vm._e(),
 813 |         ],
 814 |         2
 815 |       ),
 816 |     ]
 817 |   )
 818 | }
 819 | var tab_itemvue_type_template_id_aa3624b8_staticRenderFns = []
 820 | tab_itemvue_type_template_id_aa3624b8_render._withStripped = true
 821 | 
 822 | 
 823 | ;// CONCATENATED MODULE: ./src/tab-item.vue?vue&type=template&id=aa3624b8&
 824 | 
 825 | ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/tab-item.vue?vue&type=script&lang=js&
 826 | //
 827 | //
 828 | //
 829 | //
 830 | //
 831 | //
 832 | //
 833 | //
 834 | //
 835 | //
 836 | //
 837 | //
 838 | //
 839 | //
 840 | //
 841 | //
 842 | //
 843 | //
 844 | /* harmony default export */ var tab_itemvue_type_script_lang_js_ = ({
 845 |   name: 'LyTabItem',
 846 |   props: {
 847 |     title: String,
 848 |     name: [String, Number],
 849 |     badge: [String, Number]
 850 |   },
 851 |   computed: {
 852 |     activeStyle: function activeStyle() {
 853 |       return {
 854 |         color: this.$parent.activeColor
 855 |       };
 856 |     }
 857 |   },
 858 |   mounted: function mounted() {
 859 |     this.$parent.addItem && this.$parent.addItem(this);
 860 |   },
 861 |   methods: {
 862 |     onItemClicked: function onItemClicked() {
 863 |       this.$parent.setActiveValue(this.name);
 864 |     }
 865 |   }
 866 | });
 867 | ;// CONCATENATED MODULE: ./src/tab-item.vue?vue&type=script&lang=js&
 868 |  /* harmony default export */ var src_tab_itemvue_type_script_lang_js_ = (tab_itemvue_type_script_lang_js_); 
 869 | // EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/tab-item.vue?vue&type=style&index=0&lang=css&
 870 | var tab_itemvue_type_style_index_0_lang_css_ = __webpack_require__(343);
 871 | ;// CONCATENATED MODULE: ./src/tab-item.vue?vue&type=style&index=0&lang=css&
 872 | 
 873 | ;// CONCATENATED MODULE: ./src/tab-item.vue
 874 | 
 875 | 
 876 | 
 877 | ;
 878 | 
 879 | 
 880 | /* normalize component */
 881 | 
 882 | var tab_item_component = normalizeComponent(
 883 |   src_tab_itemvue_type_script_lang_js_,
 884 |   tab_itemvue_type_template_id_aa3624b8_render,
 885 |   tab_itemvue_type_template_id_aa3624b8_staticRenderFns,
 886 |   false,
 887 |   null,
 888 |   null,
 889 |   null
 890 |   
 891 | )
 892 | 
 893 | /* hot reload */
 894 | if (false) { var tab_item_api; }
 895 | tab_item_component.options.__file = "src/tab-item.vue"
 896 | /* harmony default export */ var tab_item = (tab_item_component.exports);
 897 | ;// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/tabs.vue?vue&type=template&id=079d45d7&
 898 | var tabsvue_type_template_id_079d45d7_render = function () {
 899 |   var _vm = this
 900 |   var _h = _vm.$createElement
 901 |   var _c = _vm._self._c || _h
 902 |   return _c("div", { ref: "viewArea", staticClass: "ly-tabs" }, [
 903 |     _c(
 904 |       "div",
 905 |       { ref: "list", staticClass: "ly-tabs__tab-list", style: _vm.style },
 906 |       [
 907 |         _vm._t("default"),
 908 |         _vm._v(" "),
 909 |         _c("div", {
 910 |           staticClass: "ly-tabs__active-line",
 911 |           style: _vm.activeBarStyle,
 912 |         }),
 913 |       ],
 914 |       2
 915 |     ),
 916 |   ])
 917 | }
 918 | var tabsvue_type_template_id_079d45d7_staticRenderFns = []
 919 | tabsvue_type_template_id_079d45d7_render._withStripped = true
 920 | 
 921 | 
 922 | ;// CONCATENATED MODULE: ./src/tabs.vue?vue&type=template&id=079d45d7&
 923 | 
 924 | ;// CONCATENATED MODULE: ./src/utils/requestAnimationFrame.js
 925 | function windowInit() {
 926 |   var lastTime = 0;
 927 |   var vendors = ['webkit', 'moz'];
 928 | 
 929 |   for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 930 |     window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
 931 |     window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
 932 |     window[vendors[x] + 'CancelRequestAnimationFrame'];
 933 |   }
 934 | 
 935 |   if (!window.requestAnimationFrame) {
 936 |     window.requestAnimationFrame = function (callback) {
 937 |       var currTime = new Date().getTime();
 938 |       var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
 939 |       var interval = currTime - lastTime;
 940 |       var id = window.setTimeout(function () {
 941 |         callback(interval);
 942 |       }, timeToCall);
 943 |       lastTime = currTime + timeToCall;
 944 |       return id;
 945 |     };
 946 |   }
 947 | 
 948 |   if (!window.cancelAnimationFrame) {
 949 |     window.cancelAnimationFrame = function (id) {
 950 |       clearTimeout(id);
 951 |     };
 952 |   }
 953 | }
 954 | ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/tabs.vue?vue&type=script&lang=js&
 955 | //
 956 | //
 957 | //
 958 | //
 959 | //
 960 | //
 961 | //
 962 | //
 963 | //
 964 | 
 965 | /* harmony default export */ var tabsvue_type_script_lang_js_ = ({
 966 |   name: 'LyTabs',
 967 |   model: {
 968 |     prop: 'value',
 969 |     event: 'change'
 970 |   },
 971 |   props: {
 972 |     value: {
 973 |       type: [String, Number],
 974 |       default: ''
 975 |     },
 976 |     lineWidth: {
 977 |       type: Number,
 978 |       default: 30
 979 |     },
 980 |     lineHeight: {
 981 |       type: Number,
 982 |       default: 3
 983 |     },
 984 |     activeColor: {
 985 |       type: String,
 986 |       default: '#1677ff'
 987 |     },
 988 |     // 近似等于超出边界时最大可拖动距离(px);
 989 |     additionalX: {
 990 |       type: Number,
 991 |       default: 50
 992 |     },
 993 |     // 惯性回弹指数(值越大，幅度越大，惯性回弹距离越长);
 994 |     reBoundExponent: {
 995 |       type: Number,
 996 |       default: 10,
 997 |       validator: function validator(v) {
 998 |         return v > 0;
 999 |       }
1000 |     },
1001 |     // 惯性滑动过程的持续时间，值越小，感知上阻力越大，可近似认为惯性滑动过程速度减为零所需的时间(ms);
1002 |     inertialDuration: {
1003 |       type: Number,
1004 |       default: 1000,
1005 |       validator: function validator(v) {
1006 |         return v > 0;
1007 |       }
1008 |     },
1009 |     // 回弹过程duration
1010 |     reBoundingDuration: {
1011 |       type: Number,
1012 |       default: 360
1013 |     }
1014 |   },
1015 |   data: function data() {
1016 |     return {
1017 |       activeValue: this.value,
1018 |       lineOffset: 0,
1019 |       activeLineWidth: 0,
1020 |       viewAreaWidth: 0,
1021 |       // 可视区宽度;
1022 |       offsetX: 0,
1023 |       // 可视区与可滑动元素宽度差值;
1024 |       speed: 0,
1025 |       // 滑动速度(正常滑动时一般不会超过10);
1026 |       touching: false,
1027 |       // 是否处于touch状态;
1028 |       reBounding: false,
1029 |       // 是否处于回弹过程;
1030 |       translateX: 0,
1031 |       startX: 0,
1032 |       lastX: 0,
1033 |       currentX: 0,
1034 |       startMoveTime: 0,
1035 |       endMoveTime: 0,
1036 |       frameTime: 16.7,
1037 |       // 每个动画帧的ms数
1038 |       frameStartTime: 0,
1039 |       frameEndTime: 0,
1040 |       inertiaFrame: 0,
1041 |       zeroSpeed: 0.001,
1042 |       // 当speed绝对值小于该值时认为速度为0 (可用于控制惯性滚动结束期的顺滑度)
1043 |       acceleration: 0 // 惯性滑动加速度;
1044 | 
1045 |     };
1046 |   },
1047 |   computed: {
1048 |     style: function style() {
1049 |       var duration = this.reBounding && !this.touching ? this.reBoundingDuration : 0;
1050 |       return {
1051 |         transitionTimingFunction: this.reBounding ? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' : 'cubic-bezier(0.1, 0.57, 0.1, 1)',
1052 |         transitionDuration: "".concat(duration, "ms"),
1053 |         transform: "translate3d(".concat(this.translateX, "px, 0px, 0px)")
1054 |       };
1055 |     },
1056 |     activeBarStyle: function activeBarStyle() {
1057 |       return {
1058 |         transition: "all 300ms",
1059 |         width: "".concat(this.activeLineWidth, "px"),
1060 |         height: "".concat(this.lineHeight, "px"),
1061 |         transform: "translate3d(".concat(this.lineOffset, "px, 0, 0)"),
1062 |         backgroundColor: this.activeColor
1063 |       };
1064 |     },
1065 |     // 是否向左惯性滚动;
1066 |     isMoveLeft: function isMoveLeft() {
1067 |       return this.currentX <= this.startX;
1068 |     }
1069 |   },
1070 |   watch: {
1071 |     value: function value(v) {
1072 |       this.activeValue = v;
1073 |       this.refreshState();
1074 |     }
1075 |   },
1076 |   mounted: function mounted() {
1077 |     windowInit();
1078 |     this.bindEvents();
1079 |     this.refreshState();
1080 |   },
1081 |   destroyed: function destroyed() {
1082 |     this.removeEvents();
1083 |   },
1084 |   methods: {
1085 |     refreshState: function refreshState() {
1086 |       var _this = this;
1087 | 
1088 |       if (this.refreshTask) return; // 避免在单次事件循环中重复执行多次计算逻辑，造成不必要的性能浪费
1089 | 
1090 |       this.refreshTask = new Promise(function (resolve) {
1091 |         _this.$nextTick(function () {
1092 |           _this.resize();
1093 | 
1094 |           resolve();
1095 |           _this.refreshTask = null;
1096 |         });
1097 |       });
1098 |     },
1099 | 
1100 |     /**
1101 |      * touchstart
1102 |      * @param {*} event
1103 |      */
1104 |     handleTouchStart: function handleTouchStart(event) {
1105 |       event.stopPropagation();
1106 |       cancelAnimationFrame(this.inertiaFrame);
1107 |       this.lastX = event.touches[0].clientX;
1108 |     },
1109 | 
1110 |     /**
1111 |      * touchmove
1112 |      * @param {*} event
1113 |      */
1114 |     handleTouchMove: function handleTouchMove(event) {
1115 |       if (this.offsetX <= 0) return;
1116 |       event.preventDefault();
1117 |       event.stopPropagation();
1118 |       this.touching = true;
1119 |       this.startMoveTime = this.endMoveTime;
1120 |       this.startX = this.lastX;
1121 |       this.currentX = event.touches[0].clientX;
1122 |       this.moveFollowTouch();
1123 |       this.endMoveTime = event.timeStamp; // 每次触发touchmove事件的时间戳;
1124 |     },
1125 | 
1126 |     /**
1127 |      * touchend
1128 |      * @param {*} event
1129 |      */
1130 |     handleTouchEnd: function handleTouchEnd(event) {
1131 |       this.touching = false;
1132 | 
1133 |       if (this.reboundIfNeeded()) {
1134 |         cancelAnimationFrame(this.inertiaFrame);
1135 |       } else {
1136 |         var silenceTime = event.timeStamp - this.endMoveTime;
1137 |         var timeStamp = this.endMoveTime - this.startMoveTime;
1138 |         timeStamp = timeStamp > 0 ? timeStamp : 8; // 停顿时间超过100ms不产生惯性滑动;
1139 | 
1140 |         if (silenceTime > 100) return;
1141 |         this.speed = (this.lastX - this.startX) / timeStamp;
1142 |         this.acceleration = this.speed / this.inertialDuration;
1143 |         this.frameStartTime = Date.now();
1144 |         this.inertiaFrame = requestAnimationFrame(this.moveByInertia);
1145 |       }
1146 |     },
1147 | 
1148 |     /**
1149 |      * 如果需要回弹则进行回弹操作，并返回true;
1150 |      */
1151 |     reboundIfNeeded: function reboundIfNeeded() {
1152 |       this.reBounding = false;
1153 | 
1154 |       if (this.translateX > 0) {
1155 |         this.reBounding = true;
1156 |         this.translateX = 0;
1157 |       } else if (this.translateX < -this.offsetX) {
1158 |         this.reBounding = true;
1159 |         this.translateX = -this.offsetX;
1160 |       }
1161 | 
1162 |       return this.reBounding;
1163 |     },
1164 |     bindEvents: function bindEvents() {
1165 |       this.$el.addEventListener('touchstart', this.handleTouchStart, false);
1166 |       this.$el.addEventListener('touchmove', this.handleTouchMove, false);
1167 |       this.$el.addEventListener('touchend', this.handleTouchEnd, false);
1168 |     },
1169 |     removeEvents: function removeEvents() {
1170 |       this.$el.removeEventListener('touchstart', this.handleTouchStart);
1171 |       this.$el.removeEventListener('touchmove', this.handleTouchMove);
1172 |       this.$el.removeEventListener('touchend', this.handleTouchEnd);
1173 |     },
1174 | 
1175 |     /**
1176 |      * touch拖动
1177 |      */
1178 |     moveFollowTouch: function moveFollowTouch() {
1179 |       // 向左拖动
1180 |       if (this.isMoveLeft) {
1181 |         if (this.translateX <= 0 && this.translateX + this.offsetX > 0 || this.translateX > 0) {
1182 |           this.translateX += this.currentX - this.lastX;
1183 |         } else if (this.translateX + this.offsetX <= 0) {
1184 |           this.translateX += this.additionalX * (this.currentX - this.lastX) / (this.viewAreaWidth + Math.abs(this.translateX + this.offsetX));
1185 |         }
1186 |       } else {
1187 |         // 向右拖动
1188 |         if (this.translateX >= 0) {
1189 |           this.translateX += this.additionalX * (this.currentX - this.lastX) / (this.viewAreaWidth + this.translateX);
1190 |         } else if (this.translateX <= 0 && this.translateX + this.offsetX >= 0 || this.translateX + this.offsetX <= 0) {
1191 |           this.translateX += this.currentX - this.lastX;
1192 |         }
1193 |       }
1194 | 
1195 |       this.lastX = this.currentX;
1196 |     },
1197 | 
1198 |     /**
1199 |      * 惯性滑动
1200 |      */
1201 |     moveByInertia: function moveByInertia() {
1202 |       this.frameEndTime = Date.now();
1203 |       this.frameTime = this.frameEndTime - this.frameStartTime; // 向左惯性滑动;
1204 | 
1205 |       if (this.isMoveLeft) {
1206 |         // 超出边界的阶段;
1207 |         if (this.translateX <= -this.offsetX) {
1208 |           // 加速度指数变化;
1209 |           this.acceleration *= (this.reBoundExponent + Math.abs(this.translateX + this.offsetX)) / this.reBoundExponent; // 为避免减速过程过短，此处加速度没有乘上frameTime;
1210 | 
1211 |           this.speed = Math.min(this.speed - this.acceleration, 0);
1212 |         } else {
1213 |           this.speed = Math.min(this.speed - this.acceleration * this.frameTime, 0);
1214 |         }
1215 |       } else {
1216 |         // 向右惯性滑动;
1217 |         if (this.translateX >= 0) {
1218 |           this.acceleration *= (this.reBoundExponent + this.translateX) / this.reBoundExponent;
1219 |           this.speed = Math.max(this.speed - this.acceleration, 0);
1220 |         } else {
1221 |           this.speed = Math.max(this.speed - this.acceleration * this.frameTime, 0);
1222 |         }
1223 |       }
1224 | 
1225 |       this.translateX += this.speed * this.frameTime / 2;
1226 | 
1227 |       if (Math.abs(this.speed) <= this.zeroSpeed) {
1228 |         this.reboundIfNeeded();
1229 |         return;
1230 |       }
1231 | 
1232 |       this.frameStartTime = this.frameEndTime;
1233 |       this.inertiaFrame = requestAnimationFrame(this.moveByInertia);
1234 |     },
1235 | 
1236 |     /**
1237 |      * 计算activeBar的translateX
1238 |      */
1239 |     calcLineOffset: function calcLineOffset() {
1240 |       var itemEl = this.getActiveItemEl();
1241 |       if (!itemEl) return;
1242 |       var itemWidth = itemEl.offsetWidth;
1243 |       var itemLeft = itemEl.offsetLeft;
1244 |       var lineWidth = this.lineWidth;
1245 | 
1246 |       if (lineWidth === 'auto') {
1247 |         // 等于当前激活item元素的宽度
1248 |         this.activeLineWidth = itemWidth;
1249 |       } else if (lineWidth < 1) {
1250 |         // 0~1表示占当前激活item元素宽度的比例
1251 |         this.activeLineWidth = itemWidth * lineWidth;
1252 |       } else {
1253 |         this.activeLineWidth = lineWidth;
1254 |       }
1255 | 
1256 |       this.lineOffset = itemLeft + (itemWidth - this.activeLineWidth) / 2;
1257 |     },
1258 | 
1259 |     /**
1260 |      * 点击切换item时，调整位置使当前item尽可能往中间显示
1261 |      */
1262 |     checkPosition: function checkPosition() {
1263 |       var activeItemEl = this.getActiveItemEl();
1264 |       if (!activeItemEl) return;
1265 |       var offsetLeft = activeItemEl.offsetLeft; // 让 activeItem 展示在正中间时，其距视图左右边距为 half
1266 | 
1267 |       var half = (this.viewAreaWidth - activeItemEl.offsetWidth) / 2; // 在当前的translateX基础上需要调整的距离
1268 | 
1269 |       var changeX = 0;
1270 |       var absTransX = Math.abs(this.translateX); // item偏左，需要往右移（往中间靠）
1271 | 
1272 |       if (offsetLeft <= absTransX + half) {
1273 |         // 这种情况下this.translateX是负数
1274 |         changeX = half - (offsetLeft + this.translateX);
1275 |       } else {
1276 |         // item偏右，需要往左移
1277 |         changeX = -(offsetLeft - absTransX - half);
1278 |       }
1279 | 
1280 |       var targetX = changeX + this.translateX; // 左边界
1281 | 
1282 |       if (targetX > 0) {
1283 |         targetX = 0;
1284 |       } // 右边界
1285 | 
1286 | 
1287 |       if (targetX < -this.offsetX) {
1288 |         targetX = -this.offsetX;
1289 |       }
1290 | 
1291 |       this.reBounding = true;
1292 |       this.translateX = targetX;
1293 |     },
1294 | 
1295 |     /**
1296 |      * 获取当前激活 item 的 dom 元素 $el
1297 |      */
1298 |     getActiveItemEl: function getActiveItemEl() {
1299 |       var _this2 = this;
1300 | 
1301 |       if (!this.$children.length) return;
1302 |       var target = this.$children.find(function (child) {
1303 |         return child.name === _this2.activeValue;
1304 |       });
1305 |       return target && target.$el;
1306 |     },
1307 | 
1308 |     /**
1309 |      * 设置激活值，供 LyTabItem 实例调用
1310 |      * @param {*} value
1311 |      */
1312 |     setActiveValue: function setActiveValue(value) {
1313 |       this.activeValue = value;
1314 |       this.$emit('change', value);
1315 |     },
1316 | 
1317 |     /**
1318 |      * LyTabItem 实例调用，注册 item
1319 |      */
1320 |     addItem: function addItem() {
1321 |       this.refreshState();
1322 |     },
1323 | 
1324 |     /**
1325 |      * @expose
1326 |      */
1327 |     resize: function resize() {
1328 |       // 重新计算可视区宽度、
1329 |       this.viewAreaWidth = this.$refs.viewArea.offsetWidth;
1330 |       this.offsetX = this.$refs.list.offsetWidth - this.viewAreaWidth;
1331 |       this.checkPosition();
1332 |       this.calcLineOffset();
1333 |     }
1334 |   }
1335 | });
1336 | ;// CONCATENATED MODULE: ./src/tabs.vue?vue&type=script&lang=js&
1337 |  /* harmony default export */ var src_tabsvue_type_script_lang_js_ = (tabsvue_type_script_lang_js_); 
1338 | // EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js??vue-loader-options!./src/tabs.vue?vue&type=style&index=0&lang=css&
1339 | var tabsvue_type_style_index_0_lang_css_ = __webpack_require__(613);
1340 | ;// CONCATENATED MODULE: ./src/tabs.vue?vue&type=style&index=0&lang=css&
1341 | 
1342 | ;// CONCATENATED MODULE: ./src/tabs.vue
1343 | 
1344 | 
1345 | 
1346 | ;
1347 | 
1348 | 
1349 | /* normalize component */
1350 | 
1351 | var tabs_component = normalizeComponent(
1352 |   src_tabsvue_type_script_lang_js_,
1353 |   tabsvue_type_template_id_079d45d7_render,
1354 |   tabsvue_type_template_id_079d45d7_staticRenderFns,
1355 |   false,
1356 |   null,
1357 |   null,
1358 |   null
1359 |   
1360 | )
1361 | 
1362 | /* hot reload */
1363 | if (false) { var tabs_api; }
1364 | tabs_component.options.__file = "src/tabs.vue"
1365 | /* harmony default export */ var tabs = (tabs_component.exports);
1366 | ;// CONCATENATED MODULE: ./src/index.js
1367 | 
1368 | 
1369 | 
1370 | 
1371 | var install = function install(Vue) {
1372 |   Vue.component(tabs.name, tabs);
1373 |   Vue.component(tab_item.name, tab_item);
1374 |   Vue.component(tab_bar.name, tab_bar);
1375 | };
1376 | 
1377 | /* harmony default export */ var src = ({
1378 |   install: install
1379 | });
1380 | 
1381 | }();
1382 | var __webpack_export_target__ = exports;
1383 | for(var i in __webpack_exports__) __webpack_export_target__[i] = __webpack_exports__[i];
1384 | if(__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, "__esModule", { value: true });
1385 | /******/ })()
1386 | ;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ly-tab",
 3 |   "version": "3.0.2",
 4 |   "main": "lib/ly-tab.common.js",
 5 |   "description": "A better mobile touch-swappable reusable component for vue2.*",
 6 |   "author": "ScoutYin <scoutyin.1900@gmail.com>",
 7 | 	"keywords": [
 8 |     "Vue",
 9 |     "components",
10 |     "mobile",
11 |     "swap",
12 |     "reusable",
13 | 		"tabs",
14 | 		"tabBar",
15 | 		"tab"
16 |   ],
17 |   "files": [
18 |     "src",
19 |     "lib"
20 |   ],
21 |   "scripts": {
22 |     "dev": "webpack serve --config build/webpack.config.js --mode development",
23 |     "start": "npm run dev",
24 |     "build": "webpack --config build/webpack.config.js --mode production"
25 |   },
26 | 	"repository": {
27 |     "type": "git",
28 |     "url": "git+https://github.com/ScoutYin/ly-tab.git"
29 |   },
30 | 	"bugs": {
31 |     "url": "https://github.com/ScoutYin/ly-tab/issues"
32 |   },
33 |   "homepage": "https://github.com/ScoutYin/ly-tab",
34 |   "publishConfig": {
35 |     "registry": "https://registry.npmjs.org"
36 |   },
37 |   "devDependencies": {
38 |     "@babel/core": "^7.17.9",
39 |     "@babel/preset-env": "^7.16.11",
40 |     "babel-loader": "^8.2.5",
41 |     "css-loader": "^6.7.1",
42 |     "eslint": "^8.13.0",
43 |     "eslint-config-prettier": "^8.5.0",
44 |     "eslint-plugin-prettier": "^4.0.0",
45 |     "eslint-plugin-vue": "^8.6.0",
46 |     "html-webpack-plugin": "^5.5.0",
47 |     "prettier": "^2.6.2",
48 |     "vue": "^2.6.14",
49 |     "vue-loader": "15.9.8",
50 |     "vue-style-loader": "^4.1.3",
51 |     "vue-template-compiler": "^2.6.14",
52 |     "webpack": "^5.72.0",
53 |     "webpack-cli": "^4.9.2",
54 |     "webpack-dev-server": "^4.8.1",
55 |     "webpack-merge": "^5.8.0"
56 |   },
57 |   "engines": {
58 |     "node": ">= 6.0.0",
59 |     "npm": ">= 3.0.0"
60 |   },
61 |   "peerDependencies": {
62 |     "vue": "^2.5.2"
63 |   },
64 |   "browserslist": [
65 |     "> 1%",
66 |     "last 2 versions",
67 |     "not ie <= 8"
68 |   ],
69 |   "license": "MIT"
70 | }
71 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import LyTabBar from './tab-bar.vue';
 2 | import LyTabItem from './tab-item.vue';
 3 | import LyTabs from './tabs.vue';
 4 | 
 5 | const install = (Vue) => {
 6 | 	Vue.component(LyTabs.name, LyTabs);
 7 | 	Vue.component(LyTabItem.name, LyTabItem);
 8 | 	Vue.component(LyTabBar.name, LyTabBar);
 9 | };
10 | 
11 | export default { install };
12 | 
13 | export { LyTabs, LyTabBar, LyTabItem };
14 | 


--------------------------------------------------------------------------------
/src/tab-bar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="ly-tab-bar">
 3 | 		<div class="ly-tab-bar-wrap">
 4 | 			<slot />
 5 | 		</div>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 | 	name: 'LyTabBar',
12 | 	model: {
13 | 		prop: 'value',
14 | 		event: 'change'
15 | 	},
16 | 	props: {
17 | 		value: {
18 | 			type: [String, Number],
19 | 			default: ''
20 | 		},
21 | 		activeColor: {
22 | 			type: String,
23 | 			default: '#1677ff'
24 | 		}
25 | 	},
26 | 	data() {
27 | 		return {
28 | 			activeValue: this.value
29 | 		};
30 | 	},
31 | 	watch: {
32 | 		value(value) {
33 | 			this.activeValue = value;
34 | 		}
35 | 	},
36 | 	methods: {
37 | 		setActiveValue(value) {
38 | 			this.activeValue = value;
39 | 			this.$emit('change', value);
40 | 		}
41 | 	}
42 | };
43 | </script>
44 | 
45 | <style>
46 | .ly-tab-bar-wrap {
47 | 	display: flex;
48 | 	flex-wrap: nowrap;
49 | 	align-items: stretch;
50 | 	min-height: 50px;
51 | 	background: #fff;
52 | }
53 | .ly-tab-bar .ly-tab-item {
54 | 	flex: 1 1;
55 | 	font-size: 12px;
56 | }
57 | .ly-tab-bar .ly-tab-item__badge {
58 | 	top: 2px;
59 | 	right: 0;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/tab-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div
 3 | 		:style="$parent.value === name ? activeStyle : {}"
 4 | 		class="ly-tab-item"
 5 | 		@click="onItemClicked"
 6 | 	>
 7 | 		<div class="ly-tab-item__wrap">
 8 | 			<slot name="icon" />
 9 | 			<div class="ly-tab-item__label">
10 | 				<slot>{{ title }}</slot>
11 | 			</div>
12 | 			<div v-if="badge" class="ly-tab-item__badge">
13 | 				{{ badge }}
14 | 			</div>
15 | 		</div>
16 | 	</div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 | 	name: 'LyTabItem',
22 | 	props: {
23 | 		title: String,
24 | 		name: [String, Number],
25 | 		badge: [String, Number]
26 | 	},
27 | 	computed: {
28 | 		activeStyle() {
29 | 			return {
30 | 				color: this.$parent.activeColor
31 | 			};
32 | 		}
33 | 	},
34 | 	mounted() {
35 | 		this.$parent.addItem && this.$parent.addItem(this);
36 | 	},
37 | 	methods: {
38 | 		onItemClicked() {
39 | 			this.$parent.setActiveValue(this.name);
40 | 		}
41 | 	}
42 | };
43 | </script>
44 | 
45 | <style>
46 | .ly-tab-item {
47 | 	display: flex;
48 | 	flex-direction: column;
49 | 	justify-content: center;
50 | 	align-items: center;
51 | }
52 | .ly-tab-item__wrap {
53 | 	position: relative;
54 | }
55 | .ly-tab-item__badge {
56 | 	position: absolute;
57 | 	top: 4px;
58 | 	right: -10px;
59 | 	padding: 1px 4px;
60 | 	min-width: 8px;
61 | 	font-size: 9px;
62 | 	line-height: 12px;
63 | 	color: #fff;
64 | 	background: #ff411c;
65 | 	white-space: nowrap;
66 | 	border-radius: 100px;
67 | 	transform: translate(50%, -50%);
68 | 	text-align: center;
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/tabs.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div ref="viewArea" class="ly-tabs">
  3 | 		<div ref="list" :style="style" class="ly-tabs__tab-list">
  4 | 			<slot />
  5 | 			<div :style="activeBarStyle" class="ly-tabs__active-line" />
  6 | 		</div>
  7 | 	</div>
  8 | </template>
  9 | 
 10 | <script>
 11 | import { windowInit } from './utils/requestAnimationFrame';
 12 | 
 13 | export default {
 14 | 	name: 'LyTabs',
 15 | 	model: {
 16 | 		prop: 'value',
 17 | 		event: 'change'
 18 | 	},
 19 | 	props: {
 20 | 		value: {
 21 | 			type: [String, Number],
 22 | 			default: ''
 23 | 		},
 24 | 		lineWidth: {
 25 | 			type: Number,
 26 | 			default: 30
 27 | 		},
 28 | 		lineHeight: {
 29 | 			type: Number,
 30 | 			default: 3
 31 | 		},
 32 | 		activeColor: {
 33 | 			type: String,
 34 | 			default: '#1677ff'
 35 | 		},
 36 | 		// 近似等于超出边界时最大可拖动距离(px);
 37 | 		additionalX: {
 38 | 			type: Number,
 39 | 			default: 50
 40 | 		},
 41 | 		// 惯性回弹指数(值越大，幅度越大，惯性回弹距离越长);
 42 | 		reBoundExponent: {
 43 | 			type: Number,
 44 | 			default: 10,
 45 | 			validator(v) {
 46 | 				return v > 0;
 47 | 			}
 48 | 		},
 49 | 		// 惯性滑动过程的持续时间，值越小，感知上阻力越大，可近似认为惯性滑动过程速度减为零所需的时间(ms);
 50 | 		inertialDuration: {
 51 | 			type: Number,
 52 | 			default: 1000,
 53 | 			validator(v) {
 54 | 				return v > 0;
 55 | 			}
 56 | 		},
 57 | 		// 回弹过程duration
 58 | 		reBoundingDuration: {
 59 | 			type: Number,
 60 | 			default: 360
 61 | 		}
 62 | 	},
 63 | 
 64 | 	data() {
 65 | 		return {
 66 | 			activeValue: this.value,
 67 | 			lineOffset: 0,
 68 | 			activeLineWidth: 0,
 69 | 			viewAreaWidth: 0, // 可视区宽度;
 70 | 			offsetX: 0, // 可视区与可滑动元素宽度差值;
 71 | 			speed: 0, // 滑动速度(正常滑动时一般不会超过10);
 72 | 			touching: false, // 是否处于touch状态;
 73 | 			reBounding: false, // 是否处于回弹过程;
 74 | 			translateX: 0,
 75 | 			startX: 0,
 76 | 			lastX: 0,
 77 | 			currentX: 0,
 78 | 			startMoveTime: 0,
 79 | 			endMoveTime: 0,
 80 | 			frameTime: 16.7, // 每个动画帧的ms数
 81 | 			frameStartTime: 0,
 82 | 			frameEndTime: 0,
 83 | 			inertiaFrame: 0,
 84 | 			zeroSpeed: 0.001, // 当speed绝对值小于该值时认为速度为0 (可用于控制惯性滚动结束期的顺滑度)
 85 | 			acceleration: 0 // 惯性滑动加速度;
 86 | 		};
 87 | 	},
 88 | 
 89 | 	computed: {
 90 | 		style() {
 91 | 			const duration =
 92 | 				this.reBounding && !this.touching ? this.reBoundingDuration : 0;
 93 | 
 94 | 			return {
 95 | 				transitionTimingFunction: this.reBounding
 96 | 					? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
 97 | 					: 'cubic-bezier(0.1, 0.57, 0.1, 1)',
 98 | 				transitionDuration: `${duration}ms`,
 99 | 				transform: `translate3d(${this.translateX}px, 0px, 0px)`
100 | 			};
101 | 		},
102 | 		activeBarStyle() {
103 | 			return {
104 | 				transition: `all 300ms`,
105 | 				width: `${this.activeLineWidth}px`,
106 | 				height: `${this.lineHeight}px`,
107 | 				transform: `translate3d(${this.lineOffset}px, 0, 0)`,
108 | 				backgroundColor: this.activeColor
109 | 			};
110 | 		},
111 | 		// 是否向左惯性滚动;
112 | 		isMoveLeft() {
113 | 			return this.currentX <= this.startX;
114 | 		}
115 | 	},
116 | 
117 | 	watch: {
118 | 		value(v) {
119 | 			this.activeValue = v;
120 | 			this.refreshState();
121 | 		}
122 | 	},
123 | 
124 | 	mounted() {
125 | 		windowInit();
126 | 		this.bindEvents();
127 | 		this.refreshState();
128 | 	},
129 | 
130 | 	destroyed() {
131 | 		this.removeEvents();
132 | 	},
133 | 
134 | 	methods: {
135 | 		refreshState() {
136 | 			if (this.refreshTask) return;
137 | 
138 | 			// 避免在单次事件循环中重复执行多次计算逻辑，造成不必要的性能浪费
139 | 			this.refreshTask = new Promise((resolve) => {
140 | 				this.$nextTick(() => {
141 | 					this.resize();
142 | 					resolve();
143 | 					this.refreshTask = null;
144 | 				});
145 | 			});
146 | 		},
147 | 		/**
148 | 		 * touchstart
149 | 		 * @param {*} event
150 | 		 */
151 | 		handleTouchStart(event) {
152 | 			event.stopPropagation();
153 | 			cancelAnimationFrame(this.inertiaFrame);
154 | 			this.lastX = event.touches[0].clientX;
155 | 		},
156 | 
157 | 		/**
158 | 		 * touchmove
159 | 		 * @param {*} event
160 | 		 */
161 | 		handleTouchMove(event) {
162 | 			if (this.offsetX <= 0) return;
163 | 			event.preventDefault();
164 | 			event.stopPropagation();
165 | 			this.touching = true;
166 | 			this.startMoveTime = this.endMoveTime;
167 | 			this.startX = this.lastX;
168 | 			this.currentX = event.touches[0].clientX;
169 | 			this.moveFollowTouch();
170 | 			this.endMoveTime = event.timeStamp; // 每次触发touchmove事件的时间戳;
171 | 		},
172 | 
173 | 		/**
174 | 		 * touchend
175 | 		 * @param {*} event
176 | 		 */
177 | 		handleTouchEnd(event) {
178 | 			this.touching = false;
179 | 			if (this.reboundIfNeeded()) {
180 | 				cancelAnimationFrame(this.inertiaFrame);
181 | 			} else {
182 | 				let silenceTime = event.timeStamp - this.endMoveTime;
183 | 				let timeStamp = this.endMoveTime - this.startMoveTime;
184 | 				timeStamp = timeStamp > 0 ? timeStamp : 8;
185 | 
186 | 				// 停顿时间超过100ms不产生惯性滑动;
187 | 				if (silenceTime > 100) return;
188 | 
189 | 				this.speed = (this.lastX - this.startX) / timeStamp;
190 | 				this.acceleration = this.speed / this.inertialDuration;
191 | 				this.frameStartTime = Date.now();
192 | 				this.inertiaFrame = requestAnimationFrame(this.moveByInertia);
193 | 			}
194 | 		},
195 | 
196 | 		/**
197 | 		 * 如果需要回弹则进行回弹操作，并返回true;
198 | 		 */
199 | 		reboundIfNeeded() {
200 | 			this.reBounding = false;
201 | 			if (this.translateX > 0) {
202 | 				this.reBounding = true;
203 | 				this.translateX = 0;
204 | 			} else if (this.translateX < -this.offsetX) {
205 | 				this.reBounding = true;
206 | 				this.translateX = -this.offsetX;
207 | 			}
208 | 			return this.reBounding;
209 | 		},
210 | 
211 | 		bindEvents() {
212 | 			this.$el.addEventListener('touchstart', this.handleTouchStart, false);
213 | 			this.$el.addEventListener('touchmove', this.handleTouchMove, false);
214 | 			this.$el.addEventListener('touchend', this.handleTouchEnd, false);
215 | 		},
216 | 
217 | 		removeEvents() {
218 | 			this.$el.removeEventListener('touchstart', this.handleTouchStart);
219 | 			this.$el.removeEventListener('touchmove', this.handleTouchMove);
220 | 			this.$el.removeEventListener('touchend', this.handleTouchEnd);
221 | 		},
222 | 
223 | 		/**
224 | 		 * touch拖动
225 | 		 */
226 | 		moveFollowTouch() {
227 | 			// 向左拖动
228 | 			if (this.isMoveLeft) {
229 | 				if (
230 | 					(this.translateX <= 0 && this.translateX + this.offsetX > 0) ||
231 | 					this.translateX > 0
232 | 				) {
233 | 					this.translateX += this.currentX - this.lastX;
234 | 				} else if (this.translateX + this.offsetX <= 0) {
235 | 					this.translateX +=
236 | 						(this.additionalX * (this.currentX - this.lastX)) /
237 | 						(this.viewAreaWidth + Math.abs(this.translateX + this.offsetX));
238 | 				}
239 | 			} else {
240 | 				// 向右拖动
241 | 				if (this.translateX >= 0) {
242 | 					this.translateX +=
243 | 						(this.additionalX * (this.currentX - this.lastX)) /
244 | 						(this.viewAreaWidth + this.translateX);
245 | 				} else if (
246 | 					(this.translateX <= 0 && this.translateX + this.offsetX >= 0) ||
247 | 					this.translateX + this.offsetX <= 0
248 | 				) {
249 | 					this.translateX += this.currentX - this.lastX;
250 | 				}
251 | 			}
252 | 			this.lastX = this.currentX;
253 | 		},
254 | 
255 | 		/**
256 | 		 * 惯性滑动
257 | 		 */
258 | 		moveByInertia() {
259 | 			this.frameEndTime = Date.now();
260 | 			this.frameTime = this.frameEndTime - this.frameStartTime;
261 | 
262 | 			// 向左惯性滑动;
263 | 			if (this.isMoveLeft) {
264 | 				// 超出边界的阶段;
265 | 				if (this.translateX <= -this.offsetX) {
266 | 					// 加速度指数变化;
267 | 					this.acceleration *=
268 | 						(this.reBoundExponent + Math.abs(this.translateX + this.offsetX)) /
269 | 						this.reBoundExponent;
270 | 					// 为避免减速过程过短，此处加速度没有乘上frameTime;
271 | 					this.speed = Math.min(this.speed - this.acceleration, 0);
272 | 				} else {
273 | 					this.speed = Math.min(
274 | 						this.speed - this.acceleration * this.frameTime,
275 | 						0
276 | 					);
277 | 				}
278 | 			} else {
279 | 				// 向右惯性滑动;
280 | 				if (this.translateX >= 0) {
281 | 					this.acceleration *=
282 | 						(this.reBoundExponent + this.translateX) / this.reBoundExponent;
283 | 					this.speed = Math.max(this.speed - this.acceleration, 0);
284 | 				} else {
285 | 					this.speed = Math.max(
286 | 						this.speed - this.acceleration * this.frameTime,
287 | 						0
288 | 					);
289 | 				}
290 | 			}
291 | 			this.translateX += (this.speed * this.frameTime) / 2;
292 | 			if (Math.abs(this.speed) <= this.zeroSpeed) {
293 | 				this.reboundIfNeeded();
294 | 				return;
295 | 			}
296 | 			this.frameStartTime = this.frameEndTime;
297 | 			this.inertiaFrame = requestAnimationFrame(this.moveByInertia);
298 | 		},
299 | 
300 | 		/**
301 | 		 * 计算activeBar的translateX
302 | 		 */
303 | 		calcLineOffset() {
304 | 			const itemEl = this.getActiveItemEl();
305 | 			if (!itemEl) return;
306 | 
307 | 			const itemWidth = itemEl.offsetWidth;
308 | 			const itemLeft = itemEl.offsetLeft;
309 | 			const { lineWidth } = this;
310 | 
311 | 			if (lineWidth === 'auto') {
312 | 				// 等于当前激活item元素的宽度
313 | 				this.activeLineWidth = itemWidth;
314 | 			} else if (lineWidth < 1) {
315 | 				// 0~1表示占当前激活item元素宽度的比例
316 | 				this.activeLineWidth = itemWidth * lineWidth;
317 | 			} else {
318 | 				this.activeLineWidth = lineWidth;
319 | 			}
320 | 
321 | 			this.lineOffset = itemLeft + (itemWidth - this.activeLineWidth) / 2;
322 | 		},
323 | 
324 | 		/**
325 | 		 * 点击切换item时，调整位置使当前item尽可能往中间显示
326 | 		 */
327 | 		checkPosition() {
328 | 			const activeItemEl = this.getActiveItemEl();
329 | 			if (!activeItemEl) return;
330 | 			const offsetLeft = activeItemEl.offsetLeft;
331 | 			// 让 activeItem 展示在正中间时，其距视图左右边距为 half
332 | 			const half = (this.viewAreaWidth - activeItemEl.offsetWidth) / 2;
333 | 			// 在当前的translateX基础上需要调整的距离
334 | 			let changeX = 0;
335 | 			const absTransX = Math.abs(this.translateX);
336 | 
337 | 			// item偏左，需要往右移（往中间靠）
338 | 			if (offsetLeft <= absTransX + half) {
339 | 				// 这种情况下this.translateX是负数
340 | 				changeX = half - (offsetLeft + this.translateX);
341 | 			} else {
342 | 				// item偏右，需要往左移
343 | 				changeX = -(offsetLeft - absTransX - half);
344 | 			}
345 | 			let targetX = changeX + this.translateX;
346 | 			// 左边界
347 | 			if (targetX > 0) {
348 | 				targetX = 0;
349 | 			}
350 | 			// 右边界
351 | 			if (targetX < -this.offsetX) {
352 | 				targetX = -this.offsetX;
353 | 			}
354 | 			this.reBounding = true;
355 | 			this.translateX = targetX;
356 | 		},
357 | 		/**
358 | 		 * 获取当前激活 item 的 dom 元素 $el
359 | 		 */
360 | 		getActiveItemEl() {
361 | 			if (!this.$children.length) return;
362 | 			const target = this.$children.find(
363 | 				(child) => child.name === this.activeValue
364 | 			);
365 | 			return target && target.$el;
366 | 		},
367 | 		/**
368 | 		 * 设置激活值，供 LyTabItem 实例调用
369 | 		 * @param {*} value
370 | 		 */
371 | 		setActiveValue(value) {
372 | 			this.activeValue = value;
373 | 			this.$emit('change', value);
374 | 		},
375 | 		/**
376 | 		 * LyTabItem 实例调用，注册 item
377 | 		 */
378 | 		addItem() {
379 | 			this.refreshState();
380 | 		},
381 | 
382 | 		/**
383 | 		 * @expose
384 | 		 */
385 | 		resize() {
386 | 			// 重新计算可视区宽度、
387 | 			this.viewAreaWidth = this.$refs.viewArea.offsetWidth;
388 | 			this.offsetX = this.$refs.list.offsetWidth - this.viewAreaWidth;
389 | 			this.checkPosition();
390 | 			this.calcLineOffset();
391 | 		}
392 | 	}
393 | };
394 | </script>
395 | 
396 | <style>
397 | .ly-tabs {
398 | 	overflow: hidden;
399 | 	position: relative;
400 | 	width: 100%;
401 | 	border-bottom: 1px solid #eee;
402 | 	background: #fff;
403 | }
404 | 
405 | .ly-tabs__tab-list {
406 | 	position: relative;
407 | 	display: flex;
408 | 	flex-wrap: nowrap;
409 | 	min-width: 100%;
410 | 	width: min-content;
411 | }
412 | 
413 | .ly-tabs__active-line {
414 | 	position: absolute;
415 | 	bottom: 3px;
416 | 	left: 0;
417 | 	width: 30px;
418 | 	height: 3px;
419 | 	border-radius: 4px;
420 | }
421 | 
422 | .ly-tabs .ly-tab-item {
423 | 	padding: 10px 12px;
424 | 	flex: 1 1 auto;
425 | 	font-size: 14px;
426 | 	text-align: center;
427 | 	white-space: nowrap;
428 | }
429 | </style>
430 | 


--------------------------------------------------------------------------------
/src/utils/requestAnimationFrame.js:
--------------------------------------------------------------------------------
 1 | export function windowInit() {
 2 | 	var lastTime = 0;
 3 | 	var vendors = ['webkit', 'moz'];
 4 | 	for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 5 | 		window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
 6 | 		window.cancelAnimationFrame =
 7 | 			window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
 8 | 			window[vendors[x] + 'CancelRequestAnimationFrame'];
 9 | 	}
10 | 
11 | 	if (!window.requestAnimationFrame) {
12 | 		window.requestAnimationFrame = function (callback) {
13 | 			var currTime = new Date().getTime();
14 | 			var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
15 | 			var interval = currTime - lastTime;
16 | 			var id = window.setTimeout(function () {
17 | 				callback(interval);
18 | 			}, timeToCall);
19 | 			lastTime = currTime + timeToCall;
20 | 			return id;
21 | 		};
22 | 	}
23 | 	if (!window.cancelAnimationFrame) {
24 | 		window.cancelAnimationFrame = function (id) {
25 | 			clearTimeout(id);
26 | 		};
27 | 	}
28 | }
29 | 


--------------------------------------------------------------------------------