mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-24 10:20:19 +08:00
d6a4e43af3
* [bugfix] CouponList always show empty info * [bugfix] add click feedback of buttons in components * [Doc] add custom theme document * [new feature] Notice bar support more props * [bugfix] PullRefresh test cases * [bugfix] unused NoticeBar style * [bugfix] Swipe width calc error * [Doc] english document of all action components * [Doc] change document site path to /zanui/vant * [Doc] fix * [bugfix] uploader style error * [bugfix] tabs document demo * [new feature] Cell support vue-router target route * [bugfix] add cell test cases * update yarn.lock * [bugfix] Tabbar cann't display info when use icon slot * [Doc] update document title * [bugfix] Dialog should reset button text when showed * [new feature] CouponList add showCloseButton prop * [new feature] Swipe add 'initialSwipe' prop * [bugfix] NoticeBar text disappeared when page back * [new feature] ImagePreview support startPosition * fix: improve imagePreview test cases * [bugfix] Steps style error when has more than 4 items * [new feature] normalize size of all icons
173 lines
2.6 KiB
Markdown
173 lines
2.6 KiB
Markdown
<style>
|
|
.demo-icon {
|
|
font-size: 0;
|
|
|
|
.examples {
|
|
max-height: none;
|
|
}
|
|
|
|
.van-col {
|
|
text-align: center;
|
|
height: 100px;
|
|
float: none;
|
|
display: inline-block;
|
|
|
|
.van-icon {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.van-icon {
|
|
display: none;
|
|
font-size: 32px;
|
|
margin: 15px 0;
|
|
color: rgba(69, 90, 100, .8);
|
|
}
|
|
|
|
span {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import Vue from 'vue';
|
|
|
|
const icons = [
|
|
'close',
|
|
'location',
|
|
'clock',
|
|
'gold-coin',
|
|
'chat',
|
|
'exchange',
|
|
'upgrade',
|
|
'edit',
|
|
'contact',
|
|
'passed',
|
|
'points',
|
|
'delete',
|
|
'records',
|
|
'logistics',
|
|
'check',
|
|
'checked',
|
|
'gift',
|
|
'like-o',
|
|
'like',
|
|
'qr',
|
|
'qr-invalid',
|
|
'shop',
|
|
'photograph',
|
|
'add',
|
|
'add2',
|
|
'photo',
|
|
'cart',
|
|
'arrow',
|
|
'search',
|
|
'clear',
|
|
'success',
|
|
'fail',
|
|
'wechat',
|
|
'alipay',
|
|
'password-view',
|
|
'wap-nav',
|
|
'password-not-view',
|
|
'wap-home',
|
|
'ecard-pay',
|
|
'balance-pay',
|
|
'peer-pay',
|
|
'credit-pay',
|
|
'debit-pay',
|
|
'other-pay',
|
|
'shopping-cart',
|
|
'browsing-history',
|
|
'goods-collect',
|
|
'shop-collect',
|
|
'receive-gift',
|
|
'send-gift',
|
|
'setting',
|
|
'coupon',
|
|
'free-postage',
|
|
'discount',
|
|
'birthday-privilege',
|
|
'member-day-privilege',
|
|
'balance-details',
|
|
'cash-back-record',
|
|
'points-mall',
|
|
'exchange-record',
|
|
'pending-payment',
|
|
'pending-orders',
|
|
'pending-deliver',
|
|
'pending-evaluate',
|
|
'cash-on-deliver',
|
|
'gift-card-pay',
|
|
'underway',
|
|
'point-gift',
|
|
'after-sale',
|
|
'edit-data',
|
|
'question',
|
|
'description',
|
|
'card',
|
|
'gift-card',
|
|
'completed',
|
|
'value-card',
|
|
'certificate',
|
|
'tosend',
|
|
'sign',
|
|
'home',
|
|
'phone'
|
|
];
|
|
|
|
const IconListConstructor = Vue.extend({
|
|
render(h) {
|
|
return (
|
|
<div>
|
|
{icons.map(icon => (
|
|
<van-col span="8">
|
|
<van-icon name={icon}></van-icon>
|
|
<span>{icon}</span>
|
|
</van-col>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
});
|
|
|
|
export default {
|
|
mounted() {
|
|
const IconList = new IconListConstructor({
|
|
el: document.createElement('div')
|
|
});
|
|
const block = document.querySelector('.zan-doc-demo-block');
|
|
if (block) {
|
|
block.appendChild(IconList.$el);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
## Icon 图标
|
|
|
|
### 使用指南
|
|
``` javascript
|
|
import { Icon } from 'vant';
|
|
|
|
Vue.component(Icon.name, Icon);
|
|
```
|
|
|
|
### 代码演示
|
|
|
|
#### 基础用法
|
|
|
|
设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
|
|
:::demo 图标列表
|
|
```html
|
|
<van-icon name="success" />
|
|
```
|
|
:::
|
|
|
|
### API
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
|
|-----------|-----------|-----------|-------------|-------------|
|
|
| name | icon名称 | `String` | `''` | - |
|