You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

570 lines
11 KiB

<template>
<view class="page">
<view class="example-info">
<text class="example-info-text">图标组件方便用户在设计页面的时候,减少小图片的使用。可方便自定义图标单色、尺寸</text>
</view>
<uni-section title="基础图标" type="line">
<view class="uni-right">
<text class="uni-right-text">显示{{ checked?' unicode':'图标名' }}</text>
<switch :checked="checked" class="switch" @change="change" />
</view>
</uni-section>
<view class="example-body">
<view v-for="(item,index) in iconClassList" :key="index" class="icon-item" @click="switchActive(index)">
<uni-icons :type="item.name" :color="activeIndex === index?'#007aff':'#8f8f94'" size="25" />
<text :style="{color:activeIndex === index?'#007aff':'#8f8f94'}" class="icon-item-text">{{ checked? item.unicode: item.name }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
iconClassList: [{
"name": "arrowdown",
"unicode": "e581"
}, {
"name": "arrowleft",
"unicode": "e582"
}, {
"name": "arrowright",
"unicode": "e583"
}, {
"name": "arrowup",
"unicode": "e580"
}, {
"name": "arrowthindown",
"unicode": "e585"
}, {
"name": "arrowthinleft",
"unicode": "e586"
}, {
"name": "arrowthinright",
"unicode": "e587"
}, {
"name": "arrowthinup",
"unicode": "e584"
}, {
"name": "back",
"unicode": "e471"
}, {
"name": "forward",
"unicode": "e470"
}, {
"name": "camera",
"unicode": "e301"
}, {
"name": "camera-filled",
"unicode": "e7ef"
}, {
"name": "cart",
"unicode": "e7f5"
}, {
"name": "cart-filled",
"unicode": "e7f4"
}, {
"name": "chat",
"unicode": "e263"
}, {
"name": "chat-filled",
"unicode": "e847"
}, {
"name": "chatboxes",
"unicode": "e203"
}, {
"name": "chatboxes-filled",
"unicode": "e233"
}, {
"name": "chatbubble",
"unicode": "e202"
}, {
"name": "chatbubble-filled",
"unicode": "e232"
}, {
"name": "checkbox",
"unicode": "e7fa"
}, {
"name": "checkbox-filled",
"unicode": "e442"
}, {
"name": "close",
"unicode": "e404"
}, {
"name": "clear",
"unicode": "e434"
}, {
"name": "circle",
"unicode": "e411"
}, {
"name": "circle-filled",
"unicode": "e441"
}, {
"name": "checkmarkempty",
"unicode": "e472"
}, {
"name": "closeempty",
"unicode": "e460"
}, {
"name": "cloud-download",
"unicode": "e8e4"
}, {
"name": "cloud-download-filled",
"unicode": "e8e9"
}, {
"name": "cloud-upload",
"unicode": "e8e6"
}, {
"name": "cloud-upload-filled",
"unicode": "e8e5"
}, {
"name": "contact",
"unicode": "e100"
}, {
"name": "contact-filled",
"unicode": "e130"
}, {
"name": "download",
"unicode": "e403"
}, {
"name": "download-filled",
"unicode": "e8a4"
}, {
"name": "email",
"unicode": "e201"
}, {
"name": "email-filled",
"unicode": "e231"
}, {
"name": "mail-open",
"unicode": "e84e"
}, {
"name": "mail-open-filled",
"unicode": "e84d"
}, {
"name": "eye",
"unicode": "e824"
}, {
"name": "eye-filled",
"unicode": "e568"
}, {
"name": "eye-slash",
"unicode": "e823"
}, {
"name": "eye-slash-filled",
"unicode": "e822"
}, {
"name": "hand-thumbsdown",
"unicode": "e83c"
}, {
"name": "hand-thumbsdown-filled",
"unicode": "e83b"
}, {
"name": "hand-thumbsup",
"unicode": "e83f"
}, {
"name": "hand-thumbsup-filled",
"unicode": "e83d"
}, {
"name": "gear",
"unicode": "e502"
}, {
"name": "gear-filled",
"unicode": "e532"
}, {
"name": "flag",
"unicode": "e508"
}, {
"name": "flag-filled",
"unicode": "e825"
}, {
"name": "heart",
"unicode": "e840"
}, {
"name": "heart-filled",
"unicode": "e83e"
}, {
"name": "help",
"unicode": "e505"
}, {
"name": "help-filled",
"unicode": "e535"
}, {
"name": "image",
"unicode": "e363"
}, {
"name": "image-filled",
"unicode": "e877"
}, {
"name": "images",
"unicode": "e87b"
}, {
"name": "images-filled",
"unicode": "e87a"
}, {
"name": "home",
"unicode": "e500"
}, {
"name": "home-filled",
"unicode": "e530"
}, {
"name": "info",
"unicode": "e504"
}, {
"name": "info-filled",
"unicode": "e534"
}, {
"name": "location",
"unicode": "e303"
}, {
"name": "location-filled",
"unicode": "e333"
}, {
"name": "locked",
"unicode": "e506"
}, {
"name": "locked-filled",
"unicode": "e856"
}, {
"name": "map",
"unicode": "e364"
}, {
"name": "map-filled",
"unicode": "e85c"
}, {
"name": "map-pin",
"unicode": "e85e"
}, {
"name": "map-pin-ellipse",
"unicode": "e864"
}, {
"name": "mic",
"unicode": "e302"
}, {
"name": "mic-filled",
"unicode": "e332"
}, {
"name": "micoff",
"unicode": "e360"
}, {
"name": "mic-slash-filled",
"unicode": "e892"
}, {
"name": "minus",
"unicode": "e410"
}, {
"name": "minus-filled",
"unicode": "e440"
}, {
"name": "more",
"unicode": "e507"
}, {
"name": "more-filled",
"unicode": "e537"
}, {
"name": "navigate",
"unicode": "e501"
}, {
"name": "navigate-filled",
"unicode": "e884"
}, {
"name": "paperplane",
"unicode": "e503"
}, {
"name": "paperplane-filled",
"unicode": "e86e"
}, {
"name": "person",
"unicode": "e101"
}, {
"name": "person-filled",
"unicode": "e131"
}, {
"name": "personadd",
"unicode": "e102"
}, {
"name": "personadd-filled",
"unicode": "e132"
}, {
"name": "phone",
"unicode": "e200"
}, {
"name": "phone-filled",
"unicode": "e230"
}, {
"name": "plus",
"unicode": "e409"
}, {
"name": "plus-filled",
"unicode": "e439"
}, {
"name": "redo",
"unicode": "e405"
}, {
"name": "redo-filled",
"unicode": "e7d9"
}, {
"name": "undo",
"unicode": "e406"
}, {
"name": "undo-filled",
"unicode": "e7d6"
}, {
"name": "qq",
"unicode": "e264"
}, {
"name": "weibo",
"unicode": "e260"
}, {
"name": "weixin",
"unicode": "e261"
}, {
"name": "pengyouquan",
"unicode": "e262"
}, {
"name": "refresh",
"unicode": "e407"
}, {
"name": "refresh-filled",
"unicode": "e437"
}, {
"name": "refreshempty",
"unicode": "e461"
}, {
"name": "reload",
"unicode": "e462"
}, {
"name": "upload",
"unicode": "e402"
}, {
"name": "upload-filled",
"unicode": "e8b1"
}, {
"name": "smallcircle",
"unicode": "e868"
}, {
"name": "smallcircle-filled",
"unicode": "e801"
}, {
"name": "sound",
"unicode": "e590"
}, {
"name": "sound-filled",
"unicode": "e8a1"
}, {
"name": "trash",
"unicode": "e401"
}, {
"name": "trash-filled",
"unicode": "e8dc"
}, {
"name": "videocam",
"unicode": "e300"
}, {
"name": "videocam-filled",
"unicode": "e8af"
}, {
"name": "star",
"unicode": "e408"
}, {
"name": "star-filled",
"unicode": "e438"
}, {
"name": "starhalf",
"unicode": "e463"
}, {
"name": "spinner-cycle",
"unicode": "e465"
}, {
"name": "scan",
"unicode": "e612"
}, {
"name": "search",
"unicode": "e466"
}, {
"name": "settings",
"unicode": "e560"
}, {
"name": "compose",
"unicode": "e400"
}, {
"name": "bars",
"unicode": "e563"
}, {
"name": "list",
"unicode": "e562"
}, {
"name": "loop",
"unicode": "e565"
}, {
"name": "paperclip",
"unicode": "e567"
}, {
"name": "plusempty",
"unicode": "e468"
}, {
"name": "pulldown",
"unicode": "e588"
}, {
"name": "headphones",
"unicode": "e8bf"
}, {
"name": "shop",
"shop": "e609"
}],
activeIndex: -1,
checked: false
}
},
methods: {
change(e) {
// e.detail.value在安卓手机上可能是String类型,后续修复后要修改
this.checked = e.detail.value === 'false' || !e.detail.value ? false : true
},
switchActive(index) {
this.activeIndex = index
}
}
}
</script>
<style>
@charset "UTF-8";
/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url("~@/static/uni.ttf") format("truetype");
}
/* #endif */
/* #ifndef APP-NVUE */
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #efeff4;
min-height: 100%;
height: auto;
}
view {
font-size: 14px;
line-height: inherit;
}
.example {
padding: 0 15px 15px;
}
.example-info {
padding: 15px;
color: #3b4144;
background: #ffffff;
}
.example-body {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 0;
font-size: 14px;
background-color: #ffffff;
}
/* #endif */
.example {
padding: 0 15px;
}
.example-info {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
padding: 15px;
color: #3b4144;
background-color: #ffffff;
font-size: 14px;
line-height: 20px;
}
.example-info-text {
font-size: 14px;
line-height: 20px;
color: #3b4144;
}
.example-body {
flex-direction: column;
padding: 15px;
background-color: #ffffff;
}
.word-btn-white {
font-size: 18px;
color: #FFFFFF;
}
.word-btn {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 6px;
height: 48px;
margin: 15px;
background-color: #007AFF;
}
.word-btn--hover {
background-color: #4ca2ff;
}
.example-body {
padding: 0;
flex-direction: row;
flex-wrap: wrap;
}
.uni-right {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
color: #666;
}
.uni-right-text {
font-size: 28rpx;
}
.switch {
transform: scale(0.8);
margin-left: 5px;
}
.icon-item {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
width: 180rpx;
padding: 30rpx 10rpx;
text-align: center;
flex-direction: column;
}
.icon-item-text {
font-size: 24rpx;
text-align: center;
}
</style>