mirror of
https://github.com/youzan/vant.git
synced 2026-03-06 02:06:58 +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
2.6 KiB
2.6 KiB
<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 (
{icons.map(icon => (
{icon}
))}
)
}
});
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 图标
使用指南
import { Icon } from 'vant';
Vue.component(Icon.name, Icon);
代码演示
基础用法
设置name属性为对应的图标名称即可，所有可用的图标名称见右侧列表
:::demo 图标列表
<van-icon name="success" />
:::
API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| name | icon名称 | String |
'' |
- |