blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev/badge_search' into 'master'

Browse Source 
Dev/badge search

张大哥合一下我的组件

See merge request !7
This commit is contained in:
zhangmin 2017-03-01 17:01:29 +08:00
commit f5564a0d61
23 changed files with 458 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components.json
View File

@ -17,5 +17,8 @@
"steps": "./packages/steps/index.js",
"tag": "./packages/tag/index.js",
"checkbox": "./packages/checkbox/index.js",
"checkbox-group": "./packages/checkbox-group/index.js"
"checkbox-group": "./packages/checkbox-group/index.js",
"badge-group": "./packages/badge-group/index.js",
"badge": "./packages/badge/index.js",
"search": "./packages/search/index.js"
}

27
docs/examples-docs/badge.md Normal file
View File

@ -0,0 +1,27 @@
## Badge 组件
### 基础用法
```html
<zan-badge-group active-key="2">
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
<zan-badge mark="2" title="火炽寿司"></zan-badge>
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
</zan-badge-group>
```
### z-badge-group API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| active-key | 激活的badge的索引 | string | '0'但必须子badge里的mark是有0位索引 | |
### z-badge API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| mark | badge的唯一key值 | string | '' | required |
| title | badge的文案标题 | string | '' | required |
| info | 当前badge的提示消息数量 | string | '' | |
| url | 跳转链接 | string | 全连接直接跳转或者hash | |

28
docs/examples-docs/search.md Normal file
View File

@ -0,0 +1,28 @@
## Search 组件
### 基础用法
```html
<zan-search
placeholder="商品名称"
@search="goSearch"
>
</zan-search>
```
```javascript
export default {
methods: {
goSearch(value) {
alert(value)
}
}
};
```
### API
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------|
| placeholder | input的placeholder文案 | string | | |

18
docs/examples/badge.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div class="page-badge">
<h1 class="page-title">Badge</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-badge-group active-key="2">
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
<zan-badge mark="2" title="火炽寿司"></zan-badge>
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
</zan-badge-group>
</div>
</template>
<style>
.page-badge {
padding: 0 15px;
}
</style>

23
docs/examples/search.vue Normal file
View File

@ -0,0 +1,23 @@
<script>
export default {
methods: {
goSearch(value) {
alert(value)
}
}
};
</script>
<template>
<div class="page-search">
<h1 class="page-title">Search</h1>
<h2 class="page-sub-title">基础用法</h2>
<zan-search placeholder="商品名称" @search="goSearch">
</zan-search>
</div>
</template>
<style>
.page-badge {
padding: 0 15px;
}
</style>

5
package.json
View File

@ -11,7 +11,7 @@
],
"scripts": {
"bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
"dev": "npm run bootstrap && npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js",
"dev": "npm run build:file && webpack-dev-server --port 8282 --inline --hot --config build/webpack.config.js",
"build:file": "node build/bin/build-entry.js",
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
"build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
@ -39,6 +39,7 @@
"vue": "^2.1.8"
},
"devDependencies": {
"autoprefixer": "^6.7.5",
"babel-cli": "^6.14.0",
"babel-core": "^6.17.0",
"babel-eslint": "^6.1.2",
@ -50,6 +51,7 @@
"babel-plugin-transform-vue-jsx": "^3.3.0",
"babel-preset-es2015": "^6.16.0",
"babel-runtime": "^6.11.0",
"cheerio": "^0.22.0",
"copy-webpack-plugin": "^4.0.1",
"cp-cli": "^1.0.2",
"cross-env": "^3.1.3",
@ -68,6 +70,7 @@
"gulp": "^3.9.1",
"gulp-cssmin": "^0.1.7",
"gulp-postcss": "^6.1.1",
"gulp-util": "^3.0.8",
"highlight.js": "^9.8.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",

3
packages/badge-group/index.js Normal file
View File

@ -0,0 +1,3 @@
import BadgeGroup from '../badge/src/badge-group';
export default BadgeGroup;

8
packages/badge/CHANGELOG.md Normal file
View File

@ -0,0 +1,8 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

26
packages/badge/README.md Normal file
View File

@ -0,0 +1,26 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)

3
packages/badge/index.js Normal file
View File

@ -0,0 +1,3 @@
import Badge from './src/badge';
export default Badge;

10
packages/badge/package.json Normal file
View File

@ -0,0 +1,10 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}

25
packages/badge/src/badge-group.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<div class="zan-badge-group">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'zan-badge-group',
props: {
// 当前激活 tab 面板的 key
activeKey: {
type: [Number, String],
default: 0
}
},
data() {
return {
computedActiveKey: this.activeKey
};
}
};
</script>

40
packages/badge/src/badge.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<a class="zan-badge" :class="classNames" :href="url" @click="handleClick">
<div class="zan-badge__active"></div>
<div v-if="info" class="zan-badge__info">{{info}}</div>
{{title}}
</a>
</template>
<script>
export default {
name: 'zan-badge',
props: {
mark: {
type: [Number, String],
required: true
},
title: {
type: String,
required: true
},
url: {
type: String
},
info: {
type: String
}
},
methods: {
handleClick() {
this.$parent.computedActiveKey = this.mark;
}
},
computed: {
classNames() {
return {
'is-select': this.mark === this.$parent.computedActiveKey
};
}
}
};
</script>

2
packages/radio/src/radio.vue
View File

@ -49,7 +49,7 @@ export default {
set(val) {
if (this.isGroup && this.parentGroup) {
this.parentGroup.$emit('input', val);
this.parentGroup.$emit('input', val);
} else {
this.$emit('input', val);
}

8
packages/search/CHANGELOG.md Normal file
View File

@ -0,0 +1,8 @@
## 0.0.2 (2017-01-20)
* 改了bug A
* 加了功能B
## 0.0.1 (2017-01-10)
* 第一版

26
packages/search/README.md Normal file
View File

@ -0,0 +1,26 @@
# @youzan/<%= name %>
!!! 请在此处填写你的文档最简单描述 !!!
[![version][version-image]][download-url]
[![download][download-image]][download-url]
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
## Demo
## Usage
## API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| className | 自定义额外类名 | string | '' | '' |
## License
[MIT](https://opensource.org/licenses/MIT)

3
packages/search/index.js Normal file
View File

@ -0,0 +1,3 @@
import Search from './src/search';
export default Search;

10
packages/search/package.json Normal file
View File

@ -0,0 +1,10 @@
{
"name": "<%= name %>",
"version": "<%= version %>",
"description": "<%= description %>",
"main": "./lib/index.js",
"author": "<%= author %>",
"license": "<%= license %>",
"devDependencies": {},
"dependencies": {}
}

55
packages/search/src/search.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div class="zan-search" :class="{ 'is-focus' : isFocus }">
<div class="zan-search__input-wrap">
<input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus" @focus="handleFocus" @keyup.enter="handleSearch">
<span class="zan-icon zan-icon-close" @click="handleClean"></span>
</div>
<div class="zan-search__cancel" :class="{ 'is-focus' : isFocus }" @click="handleBack">取消</div>
</div>
</template>
<script>
export default {
name: 'zan-search',
props: {
placeholder: {
type: String
}
},
data() {
return {
value: '',
focusStatus: false,
isFocus: false
};
},
directives: {
refocus: {
update: function(el, state) {
if (state.value) { el.focus(); }
}
}
},
methods: {
handleFocus() {
// 进入input焦点，出现close和取消
this.isFocus = true;
},
handleClean() {
// 点击close后清空vlaue后，再聚焦input框
this.value = '';
this.focusStatus = true;
},
handleBack() {
// 点击取消后，清空所有回复最初状态
this.value = '';
this.focusStatus = false;
this.isFocus = false;
},
handleSearch() {
// input输入回车后，发送回调
this.$emit('search', this.value);
}
}
};
</script>

71
packages/zanui-css/src/badge.css Normal file
View File

@ -0,0 +1,71 @@
@import "./common/var.css";
@import "./mixins/border_retina.css";
@component-namespace zan {
@b badge-group {
position: relative;
width: 85px;
&::after {
@mixin border-retina (top);
}
}
@b badge {
display: block;
overflow: hidden;
position: relative;
padding: 20px 15px;
box-sizing: border-box;
line-height: 14px;
background-color: $c-background;
color: $c-gray-darker;
font-size: 14px;
text-decoration: none;
white-space: nowrap;
@e active {
display: none;
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background-color: #FF4444;
}
@e info {
position: absolute;
top: 2px;
right: 2px;
font-size: 10px;
transform:scale(0.8);
text-align: center;
box-sizing: border-box;
padding: 0 6px;
min-width: 18px;
height: 18px;
line-height: 18px;
border-radius: 9px;
background-color: #FF4444;
color: $c-white;
}
@when select {
font-weight: bold;
color: $c-black;
background-color: $c-white;
.zan-badge__active {
display: block;
}
&::after {
@mixin border-retina (top);
@mixin border-retina (right);
@mixin border-retina (left);
}
}
&::after {
@mixin border-retina (bottom);
}
&:last-child {
&::after {
border-bottom: 0;
}
}
}
}

2
packages/zanui-css/src/index.css
View File

@ -13,6 +13,8 @@
@import './popup.css';
@import './radio.css';
@import './switch.css';
@import './badge.css';
@import './search.css';
@import './panel.css';
@import './steps.css';
@import './tag.css';

53
packages/zanui-css/src/search.css Normal file
View File

@ -0,0 +1,53 @@
@import "./common/var.css";
@component-namespace zan {
@b search {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: relative;
box-sizing: border-box;
padding: 4px 15px;
background-color: #F2F2F2;
@when focus {
.zan-search__input-wrap {
width: 82%;
}
span {
display: inline-block;
}
}
@e input-wrap {
position: relative;
width: 90%;
padding: 8px 24px 8px 35px;
border: 1px solid $c-gray-light;
border-radius: 4px;
background-color: $c-white;
span {
display: none;
position: absolute;
right: 5px;
top: 8px;
}
input {
width: 100%;
height: 14px;
font-size: 14px;
color: $c-gray-dark;
border: none;
outline: none;
}
}
@e cancel {
display: none;
color: #44BB00;
font-size: 14px;
white-space: nowrap;
@when focus {
display: block;
}
}
}
}

11
src/index.js
View File

@ -17,6 +17,9 @@ import Steps from '../packages/steps/index.js';
import Tag from '../packages/tag/index.js';
import Checkbox from '../packages/checkbox/index.js';
import CheckboxGroup from '../packages/checkbox-group/index.js';
import BadgeGroup from '../packages/badge-group/index.js';
import Badge from '../packages/badge/index.js';
import Search from '../packages/search/index.js';
const install = function(Vue) {
if (install.installed) return;
@ -38,6 +41,9 @@ const install = function(Vue) {
Vue.component(Tag.name, Tag);
Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxGroup.name, CheckboxGroup);
Vue.component(BadgeGroup.name, BadgeGroup);
Vue.component(Badge.name, Badge);
Vue.component(Search.name, Search);
};
// auto install
@ -66,5 +72,8 @@ module.exports = {
Steps,
Tag,
Checkbox,
CheckboxGroup
CheckboxGroup,
BadgeGroup,
Badge,
Search
};