mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
code review
This commit is contained in:
cookfront
parent
e241d92cd9
commit
e20022b868
@ -41,13 +41,13 @@ ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
line-height: 1.8;
|
||||
code.hljs {
|
||||
line-height: 1.5;
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
font-size: 12px;
|
||||
padding: 18px 24px;
|
||||
background-color: #f9fafc;
|
||||
border: solid 1px #eaeefb;
|
||||
padding: 20px;
|
||||
background-color: #f8f8f8;
|
||||
border: solid 1px #E5E5E5;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 4px;
|
||||
-webkit-font-smoothing: auto;
|
||||
|
||||
@ -30,8 +30,8 @@ export default {
|
||||
.examples {
|
||||
width: 320px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0 0;
|
||||
min-height: 200px;
|
||||
padding: 10px 0;
|
||||
min-height: 60px;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
background-color: #F8F8F8;
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
## Badge 徽章
|
||||
|
||||
### 基础用法
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
@ -17,13 +13,68 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
## Badge 徽章
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Badge`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Badge`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Badge, BadgeGroup } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/badge.css';
|
||||
|
||||
Vue.component(Badge.name, Badge);
|
||||
Vue.component(BadgeGroup.name, BadgeGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
|
||||
|
||||
```js
|
||||
import { Badge, BadgeGroup } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-badge': Badge,
|
||||
'zan-badge-group': BadgeGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况下激活第一个`badge`。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-badge-group :active-key="activeKey">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
<zan-badge-group>
|
||||
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
</zan-badge-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选中某个badge
|
||||
|
||||
如果想默认选中某个`badge`，你可以在`zan-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
|
||||
|
||||
:::demo 选中某个badge
|
||||
```html
|
||||
<zan-badge-group :active-key="2">
|
||||
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
</zan-badge-group>
|
||||
```
|
||||
:::
|
||||
@ -38,7 +89,6 @@
|
||||
### z-badge API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| mark | badge的唯一key值 | `string` | `''` | `required` |
|
||||
| title | badge的文案标题 | `string` | `''` | `required` |
|
||||
| info | 当前badge的提示消息数量 | `string` | `''` | |
|
||||
| url | 跳转链接 | `string` | 全连接直接跳转或者hash | |
|
||||
| info | 当前badge的提示消息 | `string` | `''` | |
|
||||
| url | 跳转链接 | `string` | 链接直接跳转或者hash | |
|
||||
|
||||
@ -1,6 +1,38 @@
|
||||
## Card 图文组件
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Card`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Card`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Card } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/card.css';
|
||||
|
||||
Vue.component(Card.name, Card);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
|
||||
|
||||
```js
|
||||
import { Card } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-card': Card
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
当没有底部按钮时，右侧内容会居中显示。
|
||||
|
||||
@ -14,7 +46,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
#### 高级用法
|
||||
|
||||
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
|
||||
|
||||
|
||||
@ -1,8 +1,16 @@
|
||||
<style>
|
||||
.official-img {
|
||||
width: 31px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
@component-namespace demo {
|
||||
@b card {
|
||||
.official-img {
|
||||
width: 31px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.examples {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -21,12 +21,49 @@
|
||||
</style>
|
||||
|
||||
## Layout 布局
|
||||
主要提供了 zan-row 和 zan-col 两个组件来进行行列布局
|
||||
|
||||
### 常规用法
|
||||
Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比（span / 24）；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
|
||||
主要提供了`zan-row`和`zan-col`两个组件来进行行列布局。
|
||||
|
||||
:::demo
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Row`和`Col`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Row`和`Col`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Row, Col } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/col.css';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/row.css';
|
||||
|
||||
Vue.component(Row.name, Row);
|
||||
Vue.component(Col.name, Col);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
|
||||
|
||||
```js
|
||||
import { Row, Col } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-row': Row,
|
||||
'zan-col': Col
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 常规用法
|
||||
|
||||
Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
|
||||
|
||||
:::demo 常规用法
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
@ -47,10 +84,11 @@ Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设
|
||||
```
|
||||
:::
|
||||
|
||||
### 在列元素之间增加间距
|
||||
#### 在列元素之间增加间距
|
||||
|
||||
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
|
||||
|
||||
:::demo
|
||||
:::demo 在列元素之间增加间距
|
||||
```html
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
|
||||
@ -1,49 +1,83 @@
|
||||
<style>
|
||||
.demo-loading__example{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
@component-namespace demo {
|
||||
@b loading {
|
||||
.zan-loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.circle-loading {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.demo-loading {
|
||||
padding: 0 20px;
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Loading 加载
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
:::demo 基础用法
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Loading`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Loading`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Loading } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/loading.css';
|
||||
|
||||
Vue.component(Loading.name, Loading);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
|
||||
|
||||
```js
|
||||
import { Loading } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-loading': Loading
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 渐变深色spinner
|
||||
|
||||
:::demo 渐变深色spinner
|
||||
```html
|
||||
<div class="demo-loading">
|
||||
<h2 class="demo-sub-title">渐变深色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">渐变浅色spinner</h2>
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
|
||||
</div>
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 渐变浅色spinner
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 单色spinner
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|
||||
@ -31,9 +31,41 @@
|
||||
|
||||
## Panel 面板
|
||||
|
||||
面板只是一个容器，里面可以放入自定义的内容。
|
||||
### 使用指南
|
||||
|
||||
### 基础用法
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Panel`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Panel`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Panel } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/panel.css';
|
||||
|
||||
Vue.component(Panel.name, Panel);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
|
||||
|
||||
```js
|
||||
import { Panel } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-panel': Panel
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
面板只是一个容器，里面可以放入自定义的内容。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -45,7 +77,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
#### 高级用法
|
||||
|
||||
使用具名`slot`自定义内容。
|
||||
|
||||
|
||||
@ -12,7 +12,41 @@
|
||||
|
||||
## Progress 进度条
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Progress`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Progress`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Progress } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/progress.css';
|
||||
|
||||
Vue.component(Progress.name, Progress);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Progress`组件，这样只能在你注册的组件中使用`Progress`：
|
||||
|
||||
```js
|
||||
import { Progress } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-progress': Progress
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -29,7 +63,10 @@
|
||||
:::
|
||||
|
||||
|
||||
### Inactive
|
||||
#### Inactive
|
||||
|
||||
是否置灰进度条，一般用于进度条被取消时。
|
||||
|
||||
:::demo Inactive
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
@ -45,8 +82,11 @@
|
||||
:::
|
||||
|
||||
|
||||
### 自定义颜色和文字
|
||||
:::demo 自定义颜色
|
||||
#### 自定义颜色和文字
|
||||
|
||||
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
|
||||
|
||||
:::demo 自定义颜色和文字
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
|
||||
@ -64,7 +104,7 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否只会 | `boolean` | `false` | `true`, `false` |
|
||||
| inactive | 是否置灰 | `boolean` | `false` | `true`, `false` |
|
||||
| percentage | 进度百分比 | `number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `string` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
|
||||
|
||||
@ -30,11 +30,45 @@ export default {
|
||||
|
||||
## Steps 步骤条
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Steps`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Steps`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Steps, Step } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/steps.css';
|
||||
|
||||
Vue.component(Steps.name, Steps);
|
||||
Vue.component(Step.name, Step);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Steps`组件，这样只能在你注册的组件中使用`Steps`：
|
||||
|
||||
```js
|
||||
import { Steps, Step } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-steps': Steps,
|
||||
'zan-step': Step
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
@ -61,7 +95,9 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 只显示步骤条
|
||||
#### 只显示步骤条
|
||||
|
||||
当你不设置`title`或`description`属性时，就会🈯️显示步骤条，而没有步骤的详细信息。
|
||||
|
||||
:::demo 只显示步骤条
|
||||
```html
|
||||
@ -89,5 +125,6 @@ export default {
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon区域 |
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
|
||||
|
||||
@ -10,13 +10,47 @@
|
||||
|
||||
## Tag 标记
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Tag`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tag`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Tag } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/tag.css';
|
||||
|
||||
Vue.component(Tag.name, Tag);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tag`组件，这样只能在你注册的组件中使用`Tag`：
|
||||
|
||||
```js
|
||||
import { Tag } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-tag': Tag
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
`Tag`目前有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag :plain="true">返现</zan-tag>
|
||||
<zan-tag plain>返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
@ -26,24 +60,26 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
#### 高级用法
|
||||
|
||||
设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="danger">返现</zan-tag>
|
||||
<zan-tag plain type="danger">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="primary">返现</zan-tag>
|
||||
<zan-tag plain type="primary">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="success">返现</zan-tag>
|
||||
<zan-tag plain type="success">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger" :mark="true">返现</zan-tag>
|
||||
<zan-tag type="danger" mark>返现</zan-tag>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -14,6 +14,12 @@
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
badges: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<a class="zan-badge" :class="classNames" :href="url" @click="handleClick">
|
||||
<a class="zan-badge" :href="url" @click="handleClick" :class="{
|
||||
'zan-badge--select': isSelect
|
||||
}">
|
||||
<div class="zan-badge__active"></div>
|
||||
<div v-if="info" class="zan-badge__info">{{info}}</div>
|
||||
{{title}}
|
||||
@ -9,11 +11,8 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-badge',
|
||||
|
||||
props: {
|
||||
mark: {
|
||||
type: [Number, String],
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
@ -26,22 +25,26 @@ export default {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
this.$parent.badges.push(this);
|
||||
},
|
||||
|
||||
computed: {
|
||||
isSelect() {
|
||||
const parent = this.$parent;
|
||||
return parent.badges.indexOf(this) === parent.activeKey;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
this.$emit('click', e, {
|
||||
mark: this.mark,
|
||||
title: this.title,
|
||||
url: this.url,
|
||||
info: this.info
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return {
|
||||
'is-select': this.mark === this.$parent.activeKey
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="zan-card">
|
||||
<img :src="thumb" alt="" class="zan-card__img">
|
||||
<div class="zan-card__content" :class="{'is-center': !this.$slots.footer}">
|
||||
<div class="zan-card__content" :class="{'zan-card__content--center': !this.$slots.footer}">
|
||||
<div class="zan-card__info">
|
||||
<slot name="title">
|
||||
<h4 v-text="title" class="zan-card__title"></h4>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="zan-progress">
|
||||
<div class="zan-progress__bar">
|
||||
<span class="zan-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
|
||||
<span class="zan-progress__bar__pivot" :style="pivotStyle">{{currentPivotText}}</span>
|
||||
<span class="zan-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -21,6 +21,11 @@
|
||||
* @example
|
||||
* <zan-switch checked="true" disabled="false"></zan-switch>
|
||||
*/
|
||||
|
||||
const DEFAULT_COLOR = '#38f';
|
||||
const DEFAULT_TEXT_COLOR = '#fff';
|
||||
const INACTIVE_COLOR = '#cacaca';
|
||||
|
||||
export default {
|
||||
name: 'zan-progress',
|
||||
|
||||
@ -32,32 +37,29 @@ export default {
|
||||
return value <= 100 && value >= 0;
|
||||
}
|
||||
},
|
||||
inactive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inactive: Boolean,
|
||||
pivotText: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return this.percentage.toString() + '%';
|
||||
return this.percentage + '%';
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#38f'
|
||||
default: DEFAULT_COLOR
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
default: DEFAULT_TEXT_COLOR
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
currentPivotText() {
|
||||
return this.pivotText ? this.pivotText : this.this.percentage.toString() + '%';
|
||||
return this.pivotText ? this.pivotText : this.percentage + '%';
|
||||
},
|
||||
componentColor() {
|
||||
return this.inactive ? '#cacaca' : this.color;
|
||||
return this.inactive ? INACTIVE_COLOR : this.color;
|
||||
},
|
||||
pivotStyle() {
|
||||
const pivotStyle = {
|
||||
|
||||
@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<div class="zan-steps" :class="`zan-steps--${steps.length}`">
|
||||
<div class="zan-steps__status" v-if="icon">
|
||||
<i class="zan-icon zan-steps__icon" :class="computedIconClass"></i>
|
||||
<div class="zan-steps__status" v-if="title || description">
|
||||
<div class="zan-steps__icon" v-if="icon || $slot.icon">
|
||||
<slot name="icon">
|
||||
<zan-icon :name="icon" :class="iconClass"></zan-icon>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="zan-steps__message">
|
||||
<div class="zan-steps__message-wrapper">
|
||||
<h4 class="zan-steps__title" v-text="title"></h4>
|
||||
@ -11,16 +15,24 @@
|
||||
<slot name="message-extra">
|
||||
</slot>
|
||||
</div>
|
||||
<div class="zan-steps__items">
|
||||
<div class="zan-steps__items" :class="{
|
||||
'zan-steps__items--alone': !title && !description
|
||||
}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'packages/icon';
|
||||
|
||||
export default {
|
||||
name: 'zan-steps',
|
||||
|
||||
components: {
|
||||
'zan-icon': Icon
|
||||
},
|
||||
|
||||
props: {
|
||||
active: Number,
|
||||
icon: String,
|
||||
@ -32,16 +44,6 @@ export default {
|
||||
description: String
|
||||
},
|
||||
|
||||
computed: {
|
||||
computedIconClass() {
|
||||
const iconName = `zan-icon-${this.icon}`;
|
||||
const result = this.iconClass.split(' ');
|
||||
result.push(iconName);
|
||||
|
||||
return result;
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
steps: []
|
||||
|
||||
@ -2,70 +2,76 @@
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b badge-group {
|
||||
position: relative;
|
||||
width: 85px;
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
@b badge-group {
|
||||
position: relative;
|
||||
width: 85px;
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
@b badge {
|
||||
}
|
||||
|
||||
@b badge {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 20px 12px;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.4;
|
||||
background-color: $c-background;
|
||||
color: $c-gray-darker;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
|
||||
@m select {
|
||||
font-weight: bold;
|
||||
color: $c-black;
|
||||
background-color: $c-white;
|
||||
.zan-badge__active {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 20px 12px;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.4;
|
||||
background-color: $c-background;
|
||||
color: $c-gray-darker;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (right);
|
||||
@mixin border-retina (left);
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
@e img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
height: auto;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
@ -26,7 +26,7 @@
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
@when center {
|
||||
@m center {
|
||||
display: table;
|
||||
height: 90px;
|
||||
|
||||
|
||||
@ -20,12 +20,15 @@
|
||||
}
|
||||
|
||||
@e icon {
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@e message {
|
||||
display: table;
|
||||
height: 40px;
|
||||
@ -53,8 +56,12 @@
|
||||
@e items {
|
||||
margin: 0 0 10px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 20px;
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
|
||||
@m alone {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
&::after {
|
||||
border-color: $c-green;
|
||||
}
|
||||
|
||||
@when plain {
|
||||
color: $c-green;
|
||||
}
|
||||
@ -34,6 +35,7 @@
|
||||
&::after {
|
||||
border-color: $button-danger-background-color;
|
||||
}
|
||||
|
||||
@when plain {
|
||||
color: $button-danger-background-color;
|
||||
}
|
||||
@ -45,6 +47,7 @@
|
||||
&::after {
|
||||
border-color: $c-blue;
|
||||
}
|
||||
|
||||
@when plain {
|
||||
color: $c-blue;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user