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
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> |