150 lines
3.1 KiB
Vue
150 lines
3.1 KiB
Vue
<template>
|
||
<view>
|
||
<view class="uni-header">
|
||
<view class="uni-group">
|
||
<!-- 显示标题 -->
|
||
<view class="uni-title">{{$t('demo.icons.title')}}（uni-icons）</view>
|
||
<!-- 显示描述 -->
|
||
<view class="uni-sub-title">{{$t('demo.icons.describle')}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="uni-container">
|
||
<view class="icons">
|
||
<!-- 循环显示图标 -->
|
||
<view v-for="(icon,index) in icons" :key="index" class="icon-item pointer">
|
||
<view @click="setClipboardData('tag',icon)" :class="'uni-icons-'+icon"></view>
|
||
<text @click="setClipboardData('class',icon)" class="icon-text">uni-icons-{{icon}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 在非H5环境下显示fix-window组件 -->
|
||
<!-- #ifndef H5 -->
|
||
<fix-window v-if="fixWindow" />
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 导入名为 "icons" 的模块，路径为 './uni-icons.js'
|
||
import icons from './uni-icons.js'
|
||
|
||
// 导出默认模块
|
||
export default {
|
||
// 数据属性
|
||
data() {
|
||
return {
|
||
// 数据属性：icons
|
||
icons
|
||
}
|
||
},
|
||
|
||
// 属性
|
||
props:{
|
||
// 属性：tag
|
||
tag: {
|
||
// 类型为布尔型
|
||
type: Boolean,
|
||
// 默认值为 true
|
||
default: true
|
||
},
|
||
// 属性：fixWindow
|
||
fixWindow: {
|
||
// 类型为布尔型
|
||
type: Boolean,
|
||
// 默认值为 true
|
||
default: true
|
||
}
|
||
},
|
||
|
||
// 方法
|
||
methods: {
|
||
// 方法：setClipboardData，参数为 type 和 icon
|
||
setClipboardData(type, icon) {
|
||
// 定义变量 data，值为 'uni-icons-' 加上 icon 参数
|
||
let data = 'uni-icons-' + icon
|
||
|
||
// 如果 this.tag 为真且 type 等于 'tag'
|
||
if (this.tag && type === 'tag') {
|
||
// 将 data 的值修改为带有 class 属性的字符串
|
||
data = '<view class="' + data + '"></view>'
|
||
}
|
||
|
||
// 调用 uni.setClipboardData 函数
|
||
uni.setClipboardData({
|
||
// 数据为变量 data 的值
|
||
data,
|
||
|
||
// 成功回调函数
|
||
success(res) {
|
||
// 调用 uni.showToast 函数
|
||
uni.showToast({
|
||
// 图标为 'none'
|
||
icon: 'none',
|
||
// 提示信息为 '复制 ' 加上 data 的值，再加上 ' 成功！'
|
||
title: '复制 ' + data + ' 成功！'
|
||
})
|
||
},
|
||
|
||
// 失败回调函数
|
||
fail(res) {
|
||
// 调用 uni.showModal 函数
|
||
uni.showModal({
|
||
// 弹窗内容为 '复制 ' 加上 data 的值，再加上 ' 失败！'
|
||
content: '复制 ' + data + ' 失败！',
|
||
// 不显示取消按钮
|
||
showCancel: false
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
/* #ifndef H5 */
|
||
page {
|
||
padding-top: 85px;
|
||
}
|
||
/* #endif */
|
||
.icons {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.icon-item {
|
||
display: flex;
|
||
width: 16.6%;
|
||
height: 120px;
|
||
font-size: 30px;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.icon-item:hover,
|
||
.icon-item:hover .icon-text {
|
||
color: $uni-color-primary;
|
||
}
|
||
|
||
.icon-text {
|
||
color: #99a9bf;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
height: 1em;
|
||
line-height: 1em;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
/* #ifdef H5 */
|
||
@media only screen and (max-width: 500px) {
|
||
.icon-item {
|
||
width: 33.3%;
|
||
}
|
||
}
|
||
/* #endif */
|
||
</style>
|