-
2.gitignore
-
17App.vue
-
20index.html
-
22main.js
-
79manifest.json
-
24pages.json
-
88pages/index/index.vue
-
13uni.promisify.adaptor.js
-
76uni.scss
-
42uni_modules/uni-icons/changelog.md
-
91uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
-
110uni_modules/uni-icons/components/uni-icons/uni-icons.vue
-
664uni_modules/uni-icons/components/uni-icons/uniicons.css
-
BINuni_modules/uni-icons/components/uni-icons/uniicons.ttf
-
664uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
-
649uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
-
89uni_modules/uni-icons/package.json
-
8uni_modules/uni-icons/readme.md
-
8uni_modules/uni-scss/changelog.md
-
1uni_modules/uni-scss/index.scss
-
82uni_modules/uni-scss/package.json
-
4uni_modules/uni-scss/readme.md
-
7uni_modules/uni-scss/styles/index.scss
-
3uni_modules/uni-scss/styles/setting/_border.scss
-
66uni_modules/uni-scss/styles/setting/_color.scss
-
55uni_modules/uni-scss/styles/setting/_radius.scss
-
56uni_modules/uni-scss/styles/setting/_space.scss
-
167uni_modules/uni-scss/styles/setting/_styles.scss
-
24uni_modules/uni-scss/styles/setting/_text.scss
-
146uni_modules/uni-scss/styles/setting/_variables.scss
-
19uni_modules/uni-scss/styles/tools/functions.scss
-
31uni_modules/uni-scss/theme.scss
-
62uni_modules/uni-scss/variables.scss
-
10uni_modules/vrapile-tree/changelog.md
-
BINuni_modules/vrapile-tree/components/static/image/add.png
-
BINuni_modules/vrapile-tree/components/static/image/addblue.png
-
BINuni_modules/vrapile-tree/components/static/image/downrect.png
-
BINuni_modules/vrapile-tree/components/static/image/edit.png
-
BINuni_modules/vrapile-tree/components/static/image/editBlue.png
-
BINuni_modules/vrapile-tree/components/static/image/falling.png
-
BINuni_modules/vrapile-tree/components/static/image/reeor.png
-
BINuni_modules/vrapile-tree/components/static/image/reeorblue.png
-
BINuni_modules/vrapile-tree/components/static/image/rising.png
-
179uni_modules/vrapile-tree/components/vrapile-tree/vrapile-node.vue
-
80uni_modules/vrapile-tree/components/vrapile-tree/vrapile-tree.vue
-
97uni_modules/vrapile-tree/package.json
-
122uni_modules/vrapile-tree/readme.md
@ -0,0 +1,2 @@ |
|||
/.hbuilderx |
|||
/unpackage |
@ -0,0 +1,17 @@ |
|||
<script> |
|||
export default { |
|||
onLaunch: function() { |
|||
// console.log('App Launch') |
|||
}, |
|||
onShow: function() { |
|||
// console.log('App Show') |
|||
}, |
|||
onHide: function() { |
|||
// console.log('App Hide') |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
/*每个页面公共css */ |
|||
</style> |
@ -0,0 +1,20 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<script> |
|||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || |
|||
CSS.supports('top: constant(a)')) |
|||
document.write( |
|||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + |
|||
(coverSupport ? ', viewport-fit=cover' : '') + '" />') |
|||
</script> |
|||
<title></title> |
|||
<!--preload-links--> |
|||
<!--app-context--> |
|||
</head> |
|||
<body> |
|||
<div id="app"><!--app-html--></div> |
|||
<script type="module" src="/main.js"></script> |
|||
</body> |
|||
</html> |
@ -0,0 +1,22 @@ |
|||
import App from './App' |
|||
|
|||
// #ifndef VUE3
|
|||
import Vue from 'vue' |
|||
import './uni.promisify.adaptor' |
|||
Vue.config.productionTip = false |
|||
App.mpType = 'app' |
|||
const app = new Vue({ |
|||
...App |
|||
}) |
|||
app.$mount() |
|||
// #endif
|
|||
|
|||
// #ifdef VUE3
|
|||
import { createSSRApp } from 'vue' |
|||
export function createApp() { |
|||
const app = createSSRApp(App) |
|||
return { |
|||
app |
|||
} |
|||
} |
|||
// #endif
|
@ -0,0 +1,79 @@ |
|||
{ |
|||
"name" : "udemo-tree", |
|||
"appid" : "__UNI__8B138E8", |
|||
"description" : "", |
|||
"versionName" : "1.0.0", |
|||
"versionCode" : "100", |
|||
"transformPx" : false, |
|||
/* 5+App特有相关 */ |
|||
"app-plus" : { |
|||
"usingComponents" : true, |
|||
"nvueStyleCompiler" : "uni-app", |
|||
"compilerVersion" : 3, |
|||
"splashscreen" : { |
|||
"alwaysShowBeforeRender" : true, |
|||
"waiting" : true, |
|||
"autoclose" : true, |
|||
"delay" : 0 |
|||
}, |
|||
/* 模块配置 */ |
|||
"modules" : {}, |
|||
/* 应用发布信息 */ |
|||
"distribute" : { |
|||
/* android打包配置 */ |
|||
"android" : { |
|||
"permissions" : [ |
|||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
|||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CAMERA\"/>", |
|||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
|||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
|||
] |
|||
}, |
|||
/* ios打包配置 */ |
|||
"ios" : {}, |
|||
/* SDK配置 */ |
|||
"sdkConfigs" : {} |
|||
} |
|||
}, |
|||
/* 快应用特有相关 */ |
|||
"quickapp" : {}, |
|||
/* 小程序特有相关 */ |
|||
"mp-weixin" : { |
|||
"appid" : "", |
|||
"setting" : { |
|||
"urlCheck" : false |
|||
}, |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-alipay" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-baidu" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-toutiao" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"uniStatistics" : { |
|||
"enable" : false |
|||
}, |
|||
"vueVersion" : "3", |
|||
"h5" : { |
|||
"router" : { |
|||
"mode" : "hash", |
|||
"base" : "/udemo/tree/" |
|||
}, |
|||
"title" : "简易树Demo" |
|||
} |
|||
} |
@ -0,0 +1,24 @@ |
|||
{ |
|||
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages |
|||
{ |
|||
"path": "pages/index/index", |
|||
"style": { |
|||
"navigationBarTitleText": "树组件样例", |
|||
"enablePullDownRefresh": false |
|||
} |
|||
} |
|||
], |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "black", |
|||
"navigationBarTitleText": "树组件样例", |
|||
"navigationBarBackgroundColor": "#FFFFFF", |
|||
"backgroundColor": "#FFFFFF", |
|||
"h5": { |
|||
"titleNView": false, |
|||
"maxWidth": 1190, |
|||
"navigationBarTextStyle": "black", |
|||
"navigationBarBackgroundColor": "#FFFFFF" |
|||
} |
|||
}, |
|||
"uniIdRouter": {} |
|||
} |
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<view class="vrapile-content-001"> |
|||
<view class="question-class-tree"> |
|||
<vrapile-tree ref="vrapileTreeRef" :defaultProps="defaultProps" |
|||
:data="treeList" :divider="true" :unfold="true" |
|||
:edit="true" @node-click="nodeClick" @add-item="addNode" |
|||
@edit-item="editNode" @long-press="longPressNode"> |
|||
</vrapile-tree> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
treeList: [ |
|||
{ id: "A01", parentId: "0", label: "A01-全部", name: "全部", level: 1, lastFlag: 0, orderNum: 1, children: [ |
|||
{ id: "A01001", parentId: "A01", label: "A01001-架构师题库", name: "架构师题库", level: 2, lastFlag: 0, orderNum: 1, children: [ |
|||
{ id: "A01001001", parentId: "A01001", label: "A01001001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 11, children: []}, |
|||
{ id: "A01001002", parentId: "A01001", label: "A01001002-题库二", name: "题库二", level: 3, lastFlag: 1, orderNum: 12, children: []} |
|||
]}, |
|||
{ id: "A01003", parentId: "A01", label: "A01003-大数据AI题库", name: "大数据AI题库", level: 2, lastFlag: 0, orderNum: 13, children: [ |
|||
{ id: "A01003001", parentId: "A01003", label: "A01003001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 1, children: []} |
|||
]}, |
|||
{ id: "A01004", parentId: "A01", label: "A01004-驾照考试题库", name: "驾照考试题库", level: 2, lastFlag: 0, orderNum: 4, children: []}, |
|||
]} |
|||
], |
|||
|
|||
defaultProps: { id: "id", children: "children", label: "name" }, |
|||
}; |
|||
}, |
|||
onShow(){ |
|||
}, |
|||
methods: { |
|||
//节点单击事件 |
|||
nodeClick(e) { |
|||
console.log("单击事件:" + JSON.stringify(e)) |
|||
uni.showToast({ |
|||
title: "单击事件:" + JSON.stringify(e).substring(0, 200) + (JSON.stringify(e).length > 200?" ...":""), |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
//节点新增点击事件 |
|||
addNode(e) { |
|||
console.log("新增按钮点击事件:" + JSON.stringify(e).length) |
|||
uni.showToast({ |
|||
title: "新增按钮点击事件:" + JSON.stringify(e).substring(0, 200) + (JSON.stringify(e).length > 200?" ...":""), |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
//节点修改点击事件 |
|||
editNode(e) { |
|||
console.log("修改按钮点击事件:" + JSON.stringify(e)) |
|||
uni.showToast({ |
|||
title: "修改按钮点击事件:" + JSON.stringify(e).substring(0, 200) + (JSON.stringify(e).length > 200?" ...":""), |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
//节点长按事件 |
|||
longPressNode(e) { |
|||
console.log("长按事件:" + JSON.stringify(e)) |
|||
uni.showToast({ |
|||
title: "长按事件:" + JSON.stringify(e).substring(0, 200) + (JSON.stringify(e).length > 200?" ...":""), |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.vrapile-content-001{ |
|||
padding: 0; |
|||
margin: 0; |
|||
width: 750rpx; |
|||
height: calc(100vh - 0px); |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.question-class-tree{ |
|||
padding: 0rpx 10rpx 30rpx 10rpx; |
|||
background-color: #ffffff; |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
@ -0,0 +1,13 @@ |
|||
uni.addInterceptor({ |
|||
returnValue (res) { |
|||
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) { |
|||
return res; |
|||
} |
|||
return new Promise((resolve, reject) => { |
|||
res.then((res) => { |
|||
if (!res) return resolve(res) |
|||
return res[0] ? reject(res[0]) : resolve(res[1]) |
|||
}); |
|||
}); |
|||
}, |
|||
}); |
@ -0,0 +1,76 @@ |
|||
/** |
|||
* 这里是uni-app内置的常用样式变量 |
|||
* |
|||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 |
|||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App |
|||
* |
|||
*/ |
|||
|
|||
/** |
|||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 |
|||
* |
|||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 |
|||
*/ |
|||
|
|||
/* 颜色变量 */ |
|||
|
|||
/* 行为相关颜色 */ |
|||
$uni-color-primary: #007aff; |
|||
$uni-color-success: #4cd964; |
|||
$uni-color-warning: #f0ad4e; |
|||
$uni-color-error: #dd524d; |
|||
|
|||
/* 文字基本颜色 */ |
|||
$uni-text-color:#333;//基本色 |
|||
$uni-text-color-inverse:#fff;//反色 |
|||
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息 |
|||
$uni-text-color-placeholder: #808080; |
|||
$uni-text-color-disable:#c0c0c0; |
|||
|
|||
/* 背景颜色 */ |
|||
$uni-bg-color:#ffffff; |
|||
$uni-bg-color-grey:#f8f8f8; |
|||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色 |
|||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 |
|||
|
|||
/* 边框颜色 */ |
|||
$uni-border-color:#c8c7cc; |
|||
|
|||
/* 尺寸变量 */ |
|||
|
|||
/* 文字尺寸 */ |
|||
$uni-font-size-sm:12px; |
|||
$uni-font-size-base:14px; |
|||
$uni-font-size-lg:16px; |
|||
|
|||
/* 图片尺寸 */ |
|||
$uni-img-size-sm:20px; |
|||
$uni-img-size-base:26px; |
|||
$uni-img-size-lg:40px; |
|||
|
|||
/* Border Radius */ |
|||
$uni-border-radius-sm: 2px; |
|||
$uni-border-radius-base: 3px; |
|||
$uni-border-radius-lg: 6px; |
|||
$uni-border-radius-circle: 50%; |
|||
|
|||
/* 水平间距 */ |
|||
$uni-spacing-row-sm: 5px; |
|||
$uni-spacing-row-base: 10px; |
|||
$uni-spacing-row-lg: 15px; |
|||
|
|||
/* 垂直间距 */ |
|||
$uni-spacing-col-sm: 4px; |
|||
$uni-spacing-col-base: 8px; |
|||
$uni-spacing-col-lg: 12px; |
|||
|
|||
/* 透明度 */ |
|||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 |
|||
|
|||
/* 文章场景相关 */ |
|||
$uni-color-title: #2C405A; // 文章标题颜色 |
|||
$uni-font-size-title:20px; |
|||
$uni-color-subtitle: #555555; // 二级标题颜色 |
|||
$uni-font-size-subtitle:26px; |
|||
$uni-color-paragraph: #3F536E; // 文章段落颜色 |
|||
$uni-font-size-paragraph:15px; |
@ -0,0 +1,42 @@ |
|||
## 2.0.10(2024-06-07) |
|||
- 优化 uni-app x 中,size 属性的类型 |
|||
## 2.0.9(2024-01-12) |
|||
fix: 修复图标大小默认值错误的问题 |
|||
## 2.0.8(2023-12-14) |
|||
- 修复 项目未使用 ts 情况下,打包报错的bug |
|||
## 2.0.7(2023-12-14) |
|||
- 修复 size 属性为 string 时,不加单位导致尺寸异常的bug |
|||
## 2.0.6(2023-12-11) |
|||
- 优化 兼容老版本icon类型,如 top ,bottom 等 |
|||
## 2.0.5(2023-12-11) |
|||
- 优化 兼容老版本icon类型,如 top ,bottom 等 |
|||
## 2.0.4(2023-12-06) |
|||
- 优化 uni-app x 下示例项目图标排序 |
|||
## 2.0.3(2023-12-06) |
|||
- 修复 nvue下引入组件报错的bug |
|||
## 2.0.2(2023-12-05) |
|||
-优化 size 属性支持单位 |
|||
## 2.0.1(2023-12-05) |
|||
- 新增 uni-app x 支持定义图标 |
|||
## 1.3.5(2022-01-24) |
|||
- 优化 size 属性可以传入不带单位的字符串数值 |
|||
## 1.3.4(2022-01-24) |
|||
- 优化 size 支持其他单位 |
|||
## 1.3.3(2022-01-17) |
|||
- 修复 nvue 有些图标不显示的bug,兼容老版本图标 |
|||
## 1.3.2(2021-12-01) |
|||
- 优化 示例可复制图标名称 |
|||
## 1.3.1(2021-11-23) |
|||
- 优化 兼容旧组件 type 值 |
|||
## 1.3.0(2021-11-19) |
|||
- 新增 更多图标 |
|||
- 优化 自定义图标使用方式 |
|||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) |
|||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons) |
|||
## 1.1.7(2021-11-08) |
|||
## 1.2.0(2021-07-30) |
|||
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) |
|||
## 1.1.5(2021-05-12) |
|||
- 新增 组件示例地址 |
|||
## 1.1.4(2021-02-05) |
|||
- 调整为uni_modules目录规范 |
@ -0,0 +1,91 @@ |
|||
<template> |
|||
<text class="uni-icons" :style="styleObj"> |
|||
<slot>{{unicode}}</slot> |
|||
</text> |
|||
</template> |
|||
|
|||
<script> |
|||
import { fontData, IconsDataItem } from './uniicons_file' |
|||
|
|||
/** |
|||
* Icons 图标 |
|||
* @description 用于展示 icon 图标 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 |
|||
* @property {Number,String} size 图标大小 |
|||
* @property {String} type 图标图案,参考示例 |
|||
* @property {String} color 图标颜色 |
|||
* @property {String} customPrefix 自定义图标 |
|||
* @event {Function} click 点击 Icon 触发事件 |
|||
*/ |
|||
export default { |
|||
name: "uni-icons", |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#333333' |
|||
}, |
|||
size: { |
|||
type: [Number, String], |
|||
default: 16 |
|||
}, |
|||
fontFamily: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
computed: { |
|||
unicode() : string { |
|||
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type }) |
|||
if (codes !== null) { |
|||
return codes.unicode |
|||
} |
|||
return '' |
|||
}, |
|||
iconSize() : string { |
|||
const size = this.size |
|||
if (typeof size == 'string') { |
|||
const reg = /^[0-9]*$/g |
|||
return reg.test(size as string) ? '' + size + 'px' : '' + size; |
|||
// return '' + this.size |
|||
} |
|||
return this.getFontSize(size as number) |
|||
}, |
|||
styleObj() : UTSJSONObject { |
|||
if (this.fontFamily !== '') { |
|||
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily } |
|||
} |
|||
return { color: this.color, fontSize: this.iconSize } |
|||
} |
|||
}, |
|||
created() { }, |
|||
methods: { |
|||
/** |
|||
* 字体大小 |
|||
*/ |
|||
getFontSize(size : number) : string { |
|||
return size + 'px'; |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
@font-face { |
|||
font-family: UniIconsFontFamily; |
|||
src: url('./uniicons.ttf'); |
|||
} |
|||
|
|||
.uni-icons { |
|||
font-family: UniIconsFontFamily; |
|||
font-size: 18px; |
|||
font-style: normal; |
|||
color: #333; |
|||
} |
|||
</style> |
@ -0,0 +1,110 @@ |
|||
<template> |
|||
<!-- #ifdef APP-NVUE --> |
|||
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text> |
|||
<!-- #endif --> |
|||
<!-- #ifndef APP-NVUE --> |
|||
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"> |
|||
<slot></slot> |
|||
</text> |
|||
<!-- #endif --> |
|||
</template> |
|||
|
|||
<script> |
|||
import { fontData } from './uniicons_file_vue.js'; |
|||
|
|||
const getVal = (val) => { |
|||
const reg = /^[0-9]*$/g |
|||
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val; |
|||
} |
|||
|
|||
// #ifdef APP-NVUE |
|||
var domModule = weex.requireModule('dom'); |
|||
import iconUrl from './uniicons.ttf' |
|||
domModule.addRule('fontFace', { |
|||
'fontFamily': "uniicons", |
|||
'src': "url('" + iconUrl + "')" |
|||
}); |
|||
// #endif |
|||
|
|||
/** |
|||
* Icons 图标 |
|||
* @description 用于展示 icons 图标 |
|||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28 |
|||
* @property {Number} size 图标大小 |
|||
* @property {String} type 图标图案,参考示例 |
|||
* @property {String} color 图标颜色 |
|||
* @property {String} customPrefix 自定义图标 |
|||
* @event {Function} click 点击 Icon 触发事件 |
|||
*/ |
|||
export default { |
|||
name: 'UniIcons', |
|||
emits: ['click'], |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#333333' |
|||
}, |
|||
size: { |
|||
type: [Number, String], |
|||
default: 16 |
|||
}, |
|||
customPrefix: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
fontFamily: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
icons: fontData |
|||
} |
|||
}, |
|||
computed: { |
|||
unicode() { |
|||
let code = this.icons.find(v => v.font_class === this.type) |
|||
if (code) { |
|||
return code.unicode |
|||
} |
|||
return '' |
|||
}, |
|||
iconSize() { |
|||
return getVal(this.size) |
|||
}, |
|||
styleObj() { |
|||
if (this.fontFamily !== '') { |
|||
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};` |
|||
} |
|||
return `color: ${this.color}; font-size: ${this.iconSize};` |
|||
} |
|||
}, |
|||
methods: { |
|||
_onClick() { |
|||
this.$emit('click') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
/* #ifndef APP-NVUE */ |
|||
@import './uniicons.css'; |
|||
|
|||
@font-face { |
|||
font-family: uniicons; |
|||
src: url('./uniicons.ttf'); |
|||
} |
|||
|
|||
/* #endif */ |
|||
.uni-icons { |
|||
font-family: uniicons; |
|||
text-decoration: none; |
|||
text-align: center; |
|||
} |
|||
</style> |
@ -0,0 +1,664 @@ |
|||
|
|||
.uniui-cart-filled:before { |
|||
content: "\e6d0"; |
|||
} |
|||
|
|||
.uniui-gift-filled:before { |
|||
content: "\e6c4"; |
|||
} |
|||
|
|||
.uniui-color:before { |
|||
content: "\e6cf"; |
|||
} |
|||
|
|||
.uniui-wallet:before { |
|||
content: "\e6b1"; |
|||
} |
|||
|
|||
.uniui-settings-filled:before { |
|||
content: "\e6ce"; |
|||
} |
|||
|
|||
.uniui-auth-filled:before { |
|||
content: "\e6cc"; |
|||
} |
|||
|
|||
.uniui-shop-filled:before { |
|||
content: "\e6cd"; |
|||
} |
|||
|
|||
.uniui-staff-filled:before { |
|||
content: "\e6cb"; |
|||
} |
|||
|
|||
.uniui-vip-filled:before { |
|||
content: "\e6c6"; |
|||
} |
|||
|
|||
.uniui-plus-filled:before { |
|||
content: "\e6c7"; |
|||
} |
|||
|
|||
.uniui-folder-add-filled:before { |
|||
content: "\e6c8"; |
|||
} |
|||
|
|||
.uniui-color-filled:before { |
|||
content: "\e6c9"; |
|||
} |
|||
|
|||
.uniui-tune-filled:before { |
|||
content: "\e6ca"; |
|||
} |
|||
|
|||
.uniui-calendar-filled:before { |
|||
content: "\e6c0"; |
|||
} |
|||
|
|||
.uniui-notification-filled:before { |
|||
content: "\e6c1"; |
|||
} |
|||
|
|||
.uniui-wallet-filled:before { |
|||
content: "\e6c2"; |
|||
} |
|||
|
|||
.uniui-medal-filled:before { |
|||
content: "\e6c3"; |
|||
} |
|||
|
|||
.uniui-fire-filled:before { |
|||
content: "\e6c5"; |
|||
} |
|||
|
|||
.uniui-refreshempty:before { |
|||
content: "\e6bf"; |
|||
} |
|||
|
|||
.uniui-location-filled:before { |
|||
content: "\e6af"; |
|||
} |
|||
|
|||
.uniui-person-filled:before { |
|||
content: "\e69d"; |
|||
} |
|||
|
|||
.uniui-personadd-filled:before { |
|||
content: "\e698"; |
|||
} |
|||
|
|||
.uniui-arrowthinleft:before { |
|||
content: "\e6d2"; |
|||
} |
|||
|
|||
.uniui-arrowthinup:before { |
|||
content: "\e6d3"; |
|||
} |
|||
|
|||
.uniui-arrowthindown:before { |
|||
content: "\e6d4"; |
|||
} |
|||
|
|||
.uniui-back:before { |
|||
content: "\e6b9"; |
|||
} |
|||
|
|||
.uniui-forward:before { |
|||
content: "\e6ba"; |
|||
} |
|||
|
|||
.uniui-arrow-right:before { |
|||
content: "\e6bb"; |
|||
} |
|||
|
|||
.uniui-arrow-left:before { |
|||
content: "\e6bc"; |
|||
} |
|||
|
|||
.uniui-arrow-up:before { |
|||
content: "\e6bd"; |
|||
} |
|||
|
|||
.uniui-arrow-down:before { |
|||
content: "\e6be"; |
|||
} |
|||
|
|||
.uniui-arrowthinright:before { |
|||
content: "\e6d1"; |
|||
} |
|||
|
|||
.uniui-down:before { |
|||
content: "\e6b8"; |
|||
} |
|||
|
|||
.uniui-bottom:before { |
|||
content: "\e6b8"; |
|||
} |
|||
|
|||
.uniui-arrowright:before { |
|||
content: "\e6d5"; |
|||
} |
|||
|
|||
.uniui-right:before { |
|||
content: "\e6b5"; |
|||
} |
|||
|
|||
.uniui-up:before { |
|||
content: "\e6b6"; |
|||
} |
|||
|
|||
.uniui-top:before { |
|||
content: "\e6b6"; |
|||
} |
|||
|
|||
.uniui-left:before { |
|||
content: "\e6b7"; |
|||
} |
|||
|
|||
.uniui-arrowup:before { |
|||
content: "\e6d6"; |
|||
} |
|||
|
|||
.uniui-eye:before { |
|||
content: "\e651"; |
|||
} |
|||
|
|||
.uniui-eye-filled:before { |
|||
content: "\e66a"; |
|||
} |
|||
|
|||
.uniui-eye-slash:before { |
|||
content: "\e6b3"; |
|||
} |
|||
|
|||
.uniui-eye-slash-filled:before { |
|||
content: "\e6b4"; |
|||
} |
|||
|
|||
.uniui-info-filled:before { |
|||
content: "\e649"; |
|||
} |
|||
|
|||
.uniui-reload:before { |
|||
content: "\e6b2"; |
|||
} |
|||
|
|||
.uniui-micoff-filled:before { |
|||
content: "\e6b0"; |
|||
} |
|||
|
|||
.uniui-map-pin-ellipse:before { |
|||
content: "\e6ac"; |
|||
} |
|||
|
|||
.uniui-map-pin:before { |
|||
content: "\e6ad"; |
|||
} |
|||
|
|||
.uniui-location:before { |
|||
content: "\e6ae"; |
|||
} |
|||
|
|||
.uniui-starhalf:before { |
|||
content: "\e683"; |
|||
} |
|||
|
|||
.uniui-star:before { |
|||
content: "\e688"; |
|||
} |
|||
|
|||
.uniui-star-filled:before { |
|||
content: "\e68f"; |
|||
} |
|||
|
|||
.uniui-calendar:before { |
|||
content: "\e6a0"; |
|||
} |
|||
|
|||
.uniui-fire:before { |
|||
content: "\e6a1"; |
|||
} |
|||
|
|||
.uniui-medal:before { |
|||
content: "\e6a2"; |
|||
} |
|||
|
|||
.uniui-font:before { |
|||
content: "\e6a3"; |
|||
} |
|||
|
|||
.uniui-gift:before { |
|||
content: "\e6a4"; |
|||
} |
|||
|
|||
.uniui-link:before { |
|||
content: "\e6a5"; |
|||
} |
|||
|
|||
.uniui-notification:before { |
|||
content: "\e6a6"; |
|||
} |
|||
|
|||
.uniui-staff:before { |
|||
content: "\e6a7"; |
|||
} |
|||
|
|||
.uniui-vip:before { |
|||
content: "\e6a8"; |
|||
} |
|||
|
|||
.uniui-folder-add:before { |
|||
content: "\e6a9"; |
|||
} |
|||
|
|||
.uniui-tune:before { |
|||
content: "\e6aa"; |
|||
} |
|||
|
|||
.uniui-auth:before { |
|||
content: "\e6ab"; |
|||
} |
|||
|
|||
.uniui-person:before { |
|||
content: "\e699"; |
|||
} |
|||
|
|||
.uniui-email-filled:before { |
|||
content: "\e69a"; |
|||
} |
|||
|
|||
.uniui-phone-filled:before { |
|||
content: "\e69b"; |
|||
} |
|||
|
|||
.uniui-phone:before { |
|||
content: "\e69c"; |
|||
} |
|||
|
|||
.uniui-email:before { |
|||
content: "\e69e"; |
|||
} |
|||
|
|||
.uniui-personadd:before { |
|||
content: "\e69f"; |
|||
} |
|||
|
|||
.uniui-chatboxes-filled:before { |
|||
content: "\e692"; |
|||
} |
|||
|
|||
.uniui-contact:before { |
|||
content: "\e693"; |
|||
} |
|||
|
|||
.uniui-chatbubble-filled:before { |
|||
content: "\e694"; |
|||
} |
|||
|
|||
.uniui-contact-filled:before { |
|||
content: "\e695"; |
|||
} |
|||
|
|||
.uniui-chatboxes:before { |
|||
content: "\e696"; |
|||
} |
|||
|
|||
.uniui-chatbubble:before { |
|||
content: "\e697"; |
|||
} |
|||
|
|||
.uniui-upload-filled:before { |
|||
content: "\e68e"; |
|||
} |
|||
|
|||
.uniui-upload:before { |
|||
content: "\e690"; |
|||
} |
|||
|
|||
.uniui-weixin:before { |
|||
content: "\e691"; |
|||
} |
|||
|
|||
.uniui-compose:before { |
|||
content: "\e67f"; |
|||
} |
|||
|
|||
.uniui-qq:before { |
|||
content: "\e680"; |
|||
} |
|||
|
|||
.uniui-download-filled:before { |
|||
content: "\e681"; |
|||
} |
|||
|
|||
.uniui-pyq:before { |
|||
content: "\e682"; |
|||
} |
|||
|
|||
.uniui-sound:before { |
|||
content: "\e684"; |
|||
} |
|||
|
|||
.uniui-trash-filled:before { |
|||
content: "\e685"; |
|||
} |
|||
|
|||
.uniui-sound-filled:before { |
|||
content: "\e686"; |
|||
} |
|||
|
|||
.uniui-trash:before { |
|||
content: "\e687"; |
|||
} |
|||
|
|||
.uniui-videocam-filled:before { |
|||
content: "\e689"; |
|||
} |
|||
|
|||
.uniui-spinner-cycle:before { |
|||
content: "\e68a"; |
|||
} |
|||
|
|||
.uniui-weibo:before { |
|||
content: "\e68b"; |
|||
} |
|||
|
|||
.uniui-videocam:before { |
|||
content: "\e68c"; |
|||
} |
|||
|
|||
.uniui-download:before { |
|||
content: "\e68d"; |
|||
} |
|||
|
|||
.uniui-help:before { |
|||
content: "\e679"; |
|||
} |
|||
|
|||
.uniui-navigate-filled:before { |
|||
content: "\e67a"; |
|||
} |
|||
|
|||
.uniui-plusempty:before { |
|||
content: "\e67b"; |
|||
} |
|||
|
|||
.uniui-smallcircle:before { |
|||
content: "\e67c"; |
|||
} |
|||
|
|||
.uniui-minus-filled:before { |
|||
content: "\e67d"; |
|||
} |
|||
|
|||
.uniui-micoff:before { |
|||
content: "\e67e"; |
|||
} |
|||
|
|||
.uniui-closeempty:before { |
|||
content: "\e66c"; |
|||
} |
|||
|
|||
.uniui-clear:before { |
|||
content: "\e66d"; |
|||
} |
|||
|
|||
.uniui-navigate:before { |
|||
content: "\e66e"; |
|||
} |
|||
|
|||
.uniui-minus:before { |
|||
content: "\e66f"; |
|||
} |
|||
|
|||
.uniui-image:before { |
|||
content: "\e670"; |
|||
} |
|||
|
|||
.uniui-mic:before { |
|||
content: "\e671"; |
|||
} |
|||
|
|||
.uniui-paperplane:before { |
|||
content: "\e672"; |
|||
} |
|||
|
|||
.uniui-close:before { |
|||
content: "\e673"; |
|||
} |
|||
|
|||
.uniui-help-filled:before { |
|||
content: "\e674"; |
|||
} |
|||
|
|||
.uniui-paperplane-filled:before { |
|||
content: "\e675"; |
|||
} |
|||
|
|||
.uniui-plus:before { |
|||
content: "\e676"; |
|||
} |
|||
|
|||
.uniui-mic-filled:before { |
|||
content: "\e677"; |
|||
} |
|||
|
|||
.uniui-image-filled:before { |
|||
content: "\e678"; |
|||
} |
|||
|
|||
.uniui-locked-filled:before { |
|||
content: "\e668"; |
|||
} |
|||
|
|||
.uniui-info:before { |
|||
content: "\e669"; |
|||
} |
|||
|
|||
.uniui-locked:before { |
|||
content: "\e66b"; |
|||
} |
|||
|
|||
.uniui-camera-filled:before { |
|||
content: "\e658"; |
|||
} |
|||
|
|||
.uniui-chat-filled:before { |
|||
content: "\e659"; |
|||
} |
|||
|
|||
.uniui-camera:before { |
|||
content: "\e65a"; |
|||
} |
|||
|
|||
.uniui-circle:before { |
|||
content: "\e65b"; |
|||
} |
|||
|
|||
.uniui-checkmarkempty:before { |
|||
content: "\e65c"; |
|||
} |
|||
|
|||
.uniui-chat:before { |
|||
content: "\e65d"; |
|||
} |
|||
|
|||
.uniui-circle-filled:before { |
|||
content: "\e65e"; |
|||
} |
|||
|
|||
.uniui-flag:before { |
|||
content: "\e65f"; |
|||
} |
|||
|
|||
.uniui-flag-filled:before { |
|||
content: "\e660"; |
|||
} |
|||
|
|||
.uniui-gear-filled:before { |
|||
content: "\e661"; |
|||
} |
|||
|
|||
.uniui-home:before { |
|||
content: "\e662"; |
|||
} |
|||
|
|||
.uniui-home-filled:before { |
|||
content: "\e663"; |
|||
} |
|||
|
|||
.uniui-gear:before { |
|||
content: "\e664"; |
|||
} |
|||
|
|||
.uniui-smallcircle-filled:before { |
|||
content: "\e665"; |
|||
} |
|||
|
|||
.uniui-map-filled:before { |
|||
content: "\e666"; |
|||
} |
|||
|
|||
.uniui-map:before { |
|||
content: "\e667"; |
|||
} |
|||
|
|||
.uniui-refresh-filled:before { |
|||
content: "\e656"; |
|||
} |
|||
|
|||
.uniui-refresh:before { |
|||
content: "\e657"; |
|||
} |
|||
|
|||
.uniui-cloud-upload:before { |
|||
content: "\e645"; |
|||
} |
|||
|
|||
.uniui-cloud-download-filled:before { |
|||
content: "\e646"; |
|||
} |
|||
|
|||
.uniui-cloud-download:before { |
|||
content: "\e647"; |
|||
} |
|||
|
|||
.uniui-cloud-upload-filled:before { |
|||
content: "\e648"; |
|||
} |
|||
|
|||
.uniui-redo:before { |
|||
content: "\e64a"; |
|||
} |
|||
|
|||
.uniui-images-filled:before { |
|||
content: "\e64b"; |
|||
} |
|||
|
|||
.uniui-undo-filled:before { |
|||
content: "\e64c"; |
|||
} |
|||
|
|||
.uniui-more:before { |
|||
content: "\e64d"; |
|||
} |
|||
|
|||
.uniui-more-filled:before { |
|||
content: "\e64e"; |
|||
} |
|||
|
|||
.uniui-undo:before { |
|||
content: "\e64f"; |
|||
} |
|||
|
|||
.uniui-images:before { |
|||
content: "\e650"; |
|||
} |
|||
|
|||
.uniui-paperclip:before { |
|||
content: "\e652"; |
|||
} |
|||
|
|||
.uniui-settings:before { |
|||
content: "\e653"; |
|||
} |
|||
|
|||
.uniui-search:before { |
|||
content: "\e654"; |
|||
} |
|||
|
|||
.uniui-redo-filled:before { |
|||
content: "\e655"; |
|||
} |
|||
|
|||
.uniui-list:before { |
|||
content: "\e644"; |
|||
} |
|||
|
|||
.uniui-mail-open-filled:before { |
|||
content: "\e63a"; |
|||
} |
|||
|
|||
.uniui-hand-down-filled:before { |
|||
content: "\e63c"; |
|||
} |
|||
|
|||
.uniui-hand-down:before { |
|||
content: "\e63d"; |
|||
} |
|||
|
|||
.uniui-hand-up-filled:before { |
|||
content: "\e63e"; |
|||
} |
|||
|
|||
.uniui-hand-up:before { |
|||
content: "\e63f"; |
|||
} |
|||
|
|||
.uniui-heart-filled:before { |
|||
content: "\e641"; |
|||
} |
|||
|
|||
.uniui-mail-open:before { |
|||
content: "\e643"; |
|||
} |
|||
|
|||
.uniui-heart:before { |
|||
content: "\e639"; |
|||
} |
|||
|
|||
.uniui-loop:before { |
|||
content: "\e633"; |
|||
} |
|||
|
|||
.uniui-pulldown:before { |
|||
content: "\e632"; |
|||
} |
|||
|
|||
.uniui-scan:before { |
|||
content: "\e62a"; |
|||
} |
|||
|
|||
.uniui-bars:before { |
|||
content: "\e627"; |
|||
} |
|||
|
|||
.uniui-checkbox:before { |
|||
content: "\e62b"; |
|||
} |
|||
|
|||
.uniui-checkbox-filled:before { |
|||
content: "\e62c"; |
|||
} |
|||
|
|||
.uniui-shop:before { |
|||
content: "\e62f"; |
|||
} |
|||
|
|||
.uniui-headphones:before { |
|||
content: "\e630"; |
|||
} |
|||
|
|||
.uniui-cart:before { |
|||
content: "\e631"; |
|||
} |
@ -0,0 +1,664 @@ |
|||
|
|||
export type IconsData = { |
|||
id : string |
|||
name : string |
|||
font_family : string |
|||
css_prefix_text : string |
|||
description : string |
|||
glyphs : Array<IconsDataItem> |
|||
} |
|||
|
|||
export type IconsDataItem = { |
|||
font_class : string |
|||
unicode : string |
|||
} |
|||
|
|||
|
|||
export const fontData = [ |
|||
{ |
|||
"font_class": "arrow-down", |
|||
"unicode": "\ue6be" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-left", |
|||
"unicode": "\ue6bc" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-right", |
|||
"unicode": "\ue6bb" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-up", |
|||
"unicode": "\ue6bd" |
|||
}, |
|||
{ |
|||
"font_class": "auth", |
|||
"unicode": "\ue6ab" |
|||
}, |
|||
{ |
|||
"font_class": "auth-filled", |
|||
"unicode": "\ue6cc" |
|||
}, |
|||
{ |
|||
"font_class": "back", |
|||
"unicode": "\ue6b9" |
|||
}, |
|||
{ |
|||
"font_class": "bars", |
|||
"unicode": "\ue627" |
|||
}, |
|||
{ |
|||
"font_class": "calendar", |
|||
"unicode": "\ue6a0" |
|||
}, |
|||
{ |
|||
"font_class": "calendar-filled", |
|||
"unicode": "\ue6c0" |
|||
}, |
|||
{ |
|||
"font_class": "camera", |
|||
"unicode": "\ue65a" |
|||
}, |
|||
{ |
|||
"font_class": "camera-filled", |
|||
"unicode": "\ue658" |
|||
}, |
|||
{ |
|||
"font_class": "cart", |
|||
"unicode": "\ue631" |
|||
}, |
|||
{ |
|||
"font_class": "cart-filled", |
|||
"unicode": "\ue6d0" |
|||
}, |
|||
{ |
|||
"font_class": "chat", |
|||
"unicode": "\ue65d" |
|||
}, |
|||
{ |
|||
"font_class": "chat-filled", |
|||
"unicode": "\ue659" |
|||
}, |
|||
{ |
|||
"font_class": "chatboxes", |
|||
"unicode": "\ue696" |
|||
}, |
|||
{ |
|||
"font_class": "chatboxes-filled", |
|||
"unicode": "\ue692" |
|||
}, |
|||
{ |
|||
"font_class": "chatbubble", |
|||
"unicode": "\ue697" |
|||
}, |
|||
{ |
|||
"font_class": "chatbubble-filled", |
|||
"unicode": "\ue694" |
|||
}, |
|||
{ |
|||
"font_class": "checkbox", |
|||
"unicode": "\ue62b" |
|||
}, |
|||
{ |
|||
"font_class": "checkbox-filled", |
|||
"unicode": "\ue62c" |
|||
}, |
|||
{ |
|||
"font_class": "checkmarkempty", |
|||
"unicode": "\ue65c" |
|||
}, |
|||
{ |
|||
"font_class": "circle", |
|||
"unicode": "\ue65b" |
|||
}, |
|||
{ |
|||
"font_class": "circle-filled", |
|||
"unicode": "\ue65e" |
|||
}, |
|||
{ |
|||
"font_class": "clear", |
|||
"unicode": "\ue66d" |
|||
}, |
|||
{ |
|||
"font_class": "close", |
|||
"unicode": "\ue673" |
|||
}, |
|||
{ |
|||
"font_class": "closeempty", |
|||
"unicode": "\ue66c" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-download", |
|||
"unicode": "\ue647" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-download-filled", |
|||
"unicode": "\ue646" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-upload", |
|||
"unicode": "\ue645" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-upload-filled", |
|||
"unicode": "\ue648" |
|||
}, |
|||
{ |
|||
"font_class": "color", |
|||
"unicode": "\ue6cf" |
|||
}, |
|||
{ |
|||
"font_class": "color-filled", |
|||
"unicode": "\ue6c9" |
|||
}, |
|||
{ |
|||
"font_class": "compose", |
|||
"unicode": "\ue67f" |
|||
}, |
|||
{ |
|||
"font_class": "contact", |
|||
"unicode": "\ue693" |
|||
}, |
|||
{ |
|||
"font_class": "contact-filled", |
|||
"unicode": "\ue695" |
|||
}, |
|||
{ |
|||
"font_class": "down", |
|||
"unicode": "\ue6b8" |
|||
}, |
|||
{ |
|||
"font_class": "bottom", |
|||
"unicode": "\ue6b8" |
|||
}, |
|||
{ |
|||
"font_class": "download", |
|||
"unicode": "\ue68d" |
|||
}, |
|||
{ |
|||
"font_class": "download-filled", |
|||
"unicode": "\ue681" |
|||
}, |
|||
{ |
|||
"font_class": "email", |
|||
"unicode": "\ue69e" |
|||
}, |
|||
{ |
|||
"font_class": "email-filled", |
|||
"unicode": "\ue69a" |
|||
}, |
|||
{ |
|||
"font_class": "eye", |
|||
"unicode": "\ue651" |
|||
}, |
|||
{ |
|||
"font_class": "eye-filled", |
|||
"unicode": "\ue66a" |
|||
}, |
|||
{ |
|||
"font_class": "eye-slash", |
|||
"unicode": "\ue6b3" |
|||
}, |
|||
{ |
|||
"font_class": "eye-slash-filled", |
|||
"unicode": "\ue6b4" |
|||
}, |
|||
{ |
|||
"font_class": "fire", |
|||
"unicode": "\ue6a1" |
|||
}, |
|||
{ |
|||
"font_class": "fire-filled", |
|||
"unicode": "\ue6c5" |
|||
}, |
|||
{ |
|||
"font_class": "flag", |
|||
"unicode": "\ue65f" |
|||
}, |
|||
{ |
|||
"font_class": "flag-filled", |
|||
"unicode": "\ue660" |
|||
}, |
|||
{ |
|||
"font_class": "folder-add", |
|||
"unicode": "\ue6a9" |
|||
}, |
|||
{ |
|||
"font_class": "folder-add-filled", |
|||
"unicode": "\ue6c8" |
|||
}, |
|||
{ |
|||
"font_class": "font", |
|||
"unicode": "\ue6a3" |
|||
}, |
|||
{ |
|||
"font_class": "forward", |
|||
"unicode": "\ue6ba" |
|||
}, |
|||
{ |
|||
"font_class": "gear", |
|||
"unicode": "\ue664" |
|||
}, |
|||
{ |
|||
"font_class": "gear-filled", |
|||
"unicode": "\ue661" |
|||
}, |
|||
{ |
|||
"font_class": "gift", |
|||
"unicode": "\ue6a4" |
|||
}, |
|||
{ |
|||
"font_class": "gift-filled", |
|||
"unicode": "\ue6c4" |
|||
}, |
|||
{ |
|||
"font_class": "hand-down", |
|||
"unicode": "\ue63d" |
|||
}, |
|||
{ |
|||
"font_class": "hand-down-filled", |
|||
"unicode": "\ue63c" |
|||
}, |
|||
{ |
|||
"font_class": "hand-up", |
|||
"unicode": "\ue63f" |
|||
}, |
|||
{ |
|||
"font_class": "hand-up-filled", |
|||
"unicode": "\ue63e" |
|||
}, |
|||
{ |
|||
"font_class": "headphones", |
|||
"unicode": "\ue630" |
|||
}, |
|||
{ |
|||
"font_class": "heart", |
|||
"unicode": "\ue639" |
|||
}, |
|||
{ |
|||
"font_class": "heart-filled", |
|||
"unicode": "\ue641" |
|||
}, |
|||
{ |
|||
"font_class": "help", |
|||
"unicode": "\ue679" |
|||
}, |
|||
{ |
|||
"font_class": "help-filled", |
|||
"unicode": "\ue674" |
|||
}, |
|||
{ |
|||
"font_class": "home", |
|||
"unicode": "\ue662" |
|||
}, |
|||
{ |
|||
"font_class": "home-filled", |
|||
"unicode": "\ue663" |
|||
}, |
|||
{ |
|||
"font_class": "image", |
|||
"unicode": "\ue670" |
|||
}, |
|||
{ |
|||
"font_class": "image-filled", |
|||
"unicode": "\ue678" |
|||
}, |
|||
{ |
|||
"font_class": "images", |
|||
"unicode": "\ue650" |
|||
}, |
|||
{ |
|||
"font_class": "images-filled", |
|||
"unicode": "\ue64b" |
|||
}, |
|||
{ |
|||
"font_class": "info", |
|||
"unicode": "\ue669" |
|||
}, |
|||
{ |
|||
"font_class": "info-filled", |
|||
"unicode": "\ue649" |
|||
}, |
|||
{ |
|||
"font_class": "left", |
|||
"unicode": "\ue6b7" |
|||
}, |
|||
{ |
|||
"font_class": "link", |
|||
"unicode": "\ue6a5" |
|||
}, |
|||
{ |
|||
"font_class": "list", |
|||
"unicode": "\ue644" |
|||
}, |
|||
{ |
|||
"font_class": "location", |
|||
"unicode": "\ue6ae" |
|||
}, |
|||
{ |
|||
"font_class": "location-filled", |
|||
"unicode": "\ue6af" |
|||
}, |
|||
{ |
|||
"font_class": "locked", |
|||
"unicode": "\ue66b" |
|||
}, |
|||
{ |
|||
"font_class": "locked-filled", |
|||
"unicode": "\ue668" |
|||
}, |
|||
{ |
|||
"font_class": "loop", |
|||
"unicode": "\ue633" |
|||
}, |
|||
{ |
|||
"font_class": "mail-open", |
|||
"unicode": "\ue643" |
|||
}, |
|||
{ |
|||
"font_class": "mail-open-filled", |
|||
"unicode": "\ue63a" |
|||
}, |
|||
{ |
|||
"font_class": "map", |
|||
"unicode": "\ue667" |
|||
}, |
|||
{ |
|||
"font_class": "map-filled", |
|||
"unicode": "\ue666" |
|||
}, |
|||
{ |
|||
"font_class": "map-pin", |
|||
"unicode": "\ue6ad" |
|||
}, |
|||
{ |
|||
"font_class": "map-pin-ellipse", |
|||
"unicode": "\ue6ac" |
|||
}, |
|||
{ |
|||
"font_class": "medal", |
|||
"unicode": "\ue6a2" |
|||
}, |
|||
{ |
|||
"font_class": "medal-filled", |
|||
"unicode": "\ue6c3" |
|||
}, |
|||
{ |
|||
"font_class": "mic", |
|||
"unicode": "\ue671" |
|||
}, |
|||
{ |
|||
"font_class": "mic-filled", |
|||
"unicode": "\ue677" |
|||
}, |
|||
{ |
|||
"font_class": "micoff", |
|||
"unicode": "\ue67e" |
|||
}, |
|||
{ |
|||
"font_class": "micoff-filled", |
|||
"unicode": "\ue6b0" |
|||
}, |
|||
{ |
|||
"font_class": "minus", |
|||
"unicode": "\ue66f" |
|||
}, |
|||
{ |
|||
"font_class": "minus-filled", |
|||
"unicode": "\ue67d" |
|||
}, |
|||
{ |
|||
"font_class": "more", |
|||
"unicode": "\ue64d" |
|||
}, |
|||
{ |
|||
"font_class": "more-filled", |
|||
"unicode": "\ue64e" |
|||
}, |
|||
{ |
|||
"font_class": "navigate", |
|||
"unicode": "\ue66e" |
|||
}, |
|||
{ |
|||
"font_class": "navigate-filled", |
|||
"unicode": "\ue67a" |
|||
}, |
|||
{ |
|||
"font_class": "notification", |
|||
"unicode": "\ue6a6" |
|||
}, |
|||
{ |
|||
"font_class": "notification-filled", |
|||
"unicode": "\ue6c1" |
|||
}, |
|||
{ |
|||
"font_class": "paperclip", |
|||
"unicode": "\ue652" |
|||
}, |
|||
{ |
|||
"font_class": "paperplane", |
|||
"unicode": "\ue672" |
|||
}, |
|||
{ |
|||
"font_class": "paperplane-filled", |
|||
"unicode": "\ue675" |
|||
}, |
|||
{ |
|||
"font_class": "person", |
|||
"unicode": "\ue699" |
|||
}, |
|||
{ |
|||
"font_class": "person-filled", |
|||
"unicode": "\ue69d" |
|||
}, |
|||
{ |
|||
"font_class": "personadd", |
|||
"unicode": "\ue69f" |
|||
}, |
|||
{ |
|||
"font_class": "personadd-filled", |
|||
"unicode": "\ue698" |
|||
}, |
|||
{ |
|||
"font_class": "personadd-filled-copy", |
|||
"unicode": "\ue6d1" |
|||
}, |
|||
{ |
|||
"font_class": "phone", |
|||
"unicode": "\ue69c" |
|||
}, |
|||
{ |
|||
"font_class": "phone-filled", |
|||
"unicode": "\ue69b" |
|||
}, |
|||
{ |
|||
"font_class": "plus", |
|||
"unicode": "\ue676" |
|||
}, |
|||
{ |
|||
"font_class": "plus-filled", |
|||
"unicode": "\ue6c7" |
|||
}, |
|||
{ |
|||
"font_class": "plusempty", |
|||
"unicode": "\ue67b" |
|||
}, |
|||
{ |
|||
"font_class": "pulldown", |
|||
"unicode": "\ue632" |
|||
}, |
|||
{ |
|||
"font_class": "pyq", |
|||
"unicode": "\ue682" |
|||
}, |
|||
{ |
|||
"font_class": "qq", |
|||
"unicode": "\ue680" |
|||
}, |
|||
{ |
|||
"font_class": "redo", |
|||
"unicode": "\ue64a" |
|||
}, |
|||
{ |
|||
"font_class": "redo-filled", |
|||
"unicode": "\ue655" |
|||
}, |
|||
{ |
|||
"font_class": "refresh", |
|||
"unicode": "\ue657" |
|||
}, |
|||
{ |
|||
"font_class": "refresh-filled", |
|||
"unicode": "\ue656" |
|||
}, |
|||
{ |
|||
"font_class": "refreshempty", |
|||
"unicode": "\ue6bf" |
|||
}, |
|||
{ |
|||
"font_class": "reload", |
|||
"unicode": "\ue6b2" |
|||
}, |
|||
{ |
|||
"font_class": "right", |
|||
"unicode": "\ue6b5" |
|||
}, |
|||
{ |
|||
"font_class": "scan", |
|||
"unicode": "\ue62a" |
|||
}, |
|||
{ |
|||
"font_class": "search", |
|||
"unicode": "\ue654" |
|||
}, |
|||
{ |
|||
"font_class": "settings", |
|||
"unicode": "\ue653" |
|||
}, |
|||
{ |
|||
"font_class": "settings-filled", |
|||
"unicode": "\ue6ce" |
|||
}, |
|||
{ |
|||
"font_class": "shop", |
|||
"unicode": "\ue62f" |
|||
}, |
|||
{ |
|||
"font_class": "shop-filled", |
|||
"unicode": "\ue6cd" |
|||
}, |
|||
{ |
|||
"font_class": "smallcircle", |
|||
"unicode": "\ue67c" |
|||
}, |
|||
{ |
|||
"font_class": "smallcircle-filled", |
|||
"unicode": "\ue665" |
|||
}, |
|||
{ |
|||
"font_class": "sound", |
|||
"unicode": "\ue684" |
|||
}, |
|||
{ |
|||
"font_class": "sound-filled", |
|||
"unicode": "\ue686" |
|||
}, |
|||
{ |
|||
"font_class": "spinner-cycle", |
|||
"unicode": "\ue68a" |
|||
}, |
|||
{ |
|||
"font_class": "staff", |
|||
"unicode": "\ue6a7" |
|||
}, |
|||
{ |
|||
"font_class": "staff-filled", |
|||
"unicode": "\ue6cb" |
|||
}, |
|||
{ |
|||
"font_class": "star", |
|||
"unicode": "\ue688" |
|||
}, |
|||
{ |
|||
"font_class": "star-filled", |
|||
"unicode": "\ue68f" |
|||
}, |
|||
{ |
|||
"font_class": "starhalf", |
|||
"unicode": "\ue683" |
|||
}, |
|||
{ |
|||
"font_class": "trash", |
|||
"unicode": "\ue687" |
|||
}, |
|||
{ |
|||
"font_class": "trash-filled", |
|||
"unicode": "\ue685" |
|||
}, |
|||
{ |
|||
"font_class": "tune", |
|||
"unicode": "\ue6aa" |
|||
}, |
|||
{ |
|||
"font_class": "tune-filled", |
|||
"unicode": "\ue6ca" |
|||
}, |
|||
{ |
|||
"font_class": "undo", |
|||
"unicode": "\ue64f" |
|||
}, |
|||
{ |
|||
"font_class": "undo-filled", |
|||
"unicode": "\ue64c" |
|||
}, |
|||
{ |
|||
"font_class": "up", |
|||
"unicode": "\ue6b6" |
|||
}, |
|||
{ |
|||
"font_class": "top", |
|||
"unicode": "\ue6b6" |
|||
}, |
|||
{ |
|||
"font_class": "upload", |
|||
"unicode": "\ue690" |
|||
}, |
|||
{ |
|||
"font_class": "upload-filled", |
|||
"unicode": "\ue68e" |
|||
}, |
|||
{ |
|||
"font_class": "videocam", |
|||
"unicode": "\ue68c" |
|||
}, |
|||
{ |
|||
"font_class": "videocam-filled", |
|||
"unicode": "\ue689" |
|||
}, |
|||
{ |
|||
"font_class": "vip", |
|||
"unicode": "\ue6a8" |
|||
}, |
|||
{ |
|||
"font_class": "vip-filled", |
|||
"unicode": "\ue6c6" |
|||
}, |
|||
{ |
|||
"font_class": "wallet", |
|||
"unicode": "\ue6b1" |
|||
}, |
|||
{ |
|||
"font_class": "wallet-filled", |
|||
"unicode": "\ue6c2" |
|||
}, |
|||
{ |
|||
"font_class": "weibo", |
|||
"unicode": "\ue68b" |
|||
}, |
|||
{ |
|||
"font_class": "weixin", |
|||
"unicode": "\ue691" |
|||
} |
|||
] as IconsDataItem[] |
|||
|
|||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
@ -0,0 +1,649 @@ |
|||
|
|||
export const fontData = [ |
|||
{ |
|||
"font_class": "arrow-down", |
|||
"unicode": "\ue6be" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-left", |
|||
"unicode": "\ue6bc" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-right", |
|||
"unicode": "\ue6bb" |
|||
}, |
|||
{ |
|||
"font_class": "arrow-up", |
|||
"unicode": "\ue6bd" |
|||
}, |
|||
{ |
|||
"font_class": "auth", |
|||
"unicode": "\ue6ab" |
|||
}, |
|||
{ |
|||
"font_class": "auth-filled", |
|||
"unicode": "\ue6cc" |
|||
}, |
|||
{ |
|||
"font_class": "back", |
|||
"unicode": "\ue6b9" |
|||
}, |
|||
{ |
|||
"font_class": "bars", |
|||
"unicode": "\ue627" |
|||
}, |
|||
{ |
|||
"font_class": "calendar", |
|||
"unicode": "\ue6a0" |
|||
}, |
|||
{ |
|||
"font_class": "calendar-filled", |
|||
"unicode": "\ue6c0" |
|||
}, |
|||
{ |
|||
"font_class": "camera", |
|||
"unicode": "\ue65a" |
|||
}, |
|||
{ |
|||
"font_class": "camera-filled", |
|||
"unicode": "\ue658" |
|||
}, |
|||
{ |
|||
"font_class": "cart", |
|||
"unicode": "\ue631" |
|||
}, |
|||
{ |
|||
"font_class": "cart-filled", |
|||
"unicode": "\ue6d0" |
|||
}, |
|||
{ |
|||
"font_class": "chat", |
|||
"unicode": "\ue65d" |
|||
}, |
|||
{ |
|||
"font_class": "chat-filled", |
|||
"unicode": "\ue659" |
|||
}, |
|||
{ |
|||
"font_class": "chatboxes", |
|||
"unicode": "\ue696" |
|||
}, |
|||
{ |
|||
"font_class": "chatboxes-filled", |
|||
"unicode": "\ue692" |
|||
}, |
|||
{ |
|||
"font_class": "chatbubble", |
|||
"unicode": "\ue697" |
|||
}, |
|||
{ |
|||
"font_class": "chatbubble-filled", |
|||
"unicode": "\ue694" |
|||
}, |
|||
{ |
|||
"font_class": "checkbox", |
|||
"unicode": "\ue62b" |
|||
}, |
|||
{ |
|||
"font_class": "checkbox-filled", |
|||
"unicode": "\ue62c" |
|||
}, |
|||
{ |
|||
"font_class": "checkmarkempty", |
|||
"unicode": "\ue65c" |
|||
}, |
|||
{ |
|||
"font_class": "circle", |
|||
"unicode": "\ue65b" |
|||
}, |
|||
{ |
|||
"font_class": "circle-filled", |
|||
"unicode": "\ue65e" |
|||
}, |
|||
{ |
|||
"font_class": "clear", |
|||
"unicode": "\ue66d" |
|||
}, |
|||
{ |
|||
"font_class": "close", |
|||
"unicode": "\ue673" |
|||
}, |
|||
{ |
|||
"font_class": "closeempty", |
|||
"unicode": "\ue66c" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-download", |
|||
"unicode": "\ue647" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-download-filled", |
|||
"unicode": "\ue646" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-upload", |
|||
"unicode": "\ue645" |
|||
}, |
|||
{ |
|||
"font_class": "cloud-upload-filled", |
|||
"unicode": "\ue648" |
|||
}, |
|||
{ |
|||
"font_class": "color", |
|||
"unicode": "\ue6cf" |
|||
}, |
|||
{ |
|||
"font_class": "color-filled", |
|||
"unicode": "\ue6c9" |
|||
}, |
|||
{ |
|||
"font_class": "compose", |
|||
"unicode": "\ue67f" |
|||
}, |
|||
{ |
|||
"font_class": "contact", |
|||
"unicode": "\ue693" |
|||
}, |
|||
{ |
|||
"font_class": "contact-filled", |
|||
"unicode": "\ue695" |
|||
}, |
|||
{ |
|||
"font_class": "down", |
|||
"unicode": "\ue6b8" |
|||
}, |
|||
{ |
|||
"font_class": "bottom", |
|||
"unicode": "\ue6b8" |
|||
}, |
|||
{ |
|||
"font_class": "download", |
|||
"unicode": "\ue68d" |
|||
}, |
|||
{ |
|||
"font_class": "download-filled", |
|||
"unicode": "\ue681" |
|||
}, |
|||
{ |
|||
"font_class": "email", |
|||
"unicode": "\ue69e" |
|||
}, |
|||
{ |
|||
"font_class": "email-filled", |
|||
"unicode": "\ue69a" |
|||
}, |
|||
{ |
|||
"font_class": "eye", |
|||
"unicode": "\ue651" |
|||
}, |
|||
{ |
|||
"font_class": "eye-filled", |
|||
"unicode": "\ue66a" |
|||
}, |
|||
{ |
|||
"font_class": "eye-slash", |
|||
"unicode": "\ue6b3" |
|||
}, |
|||
{ |
|||
"font_class": "eye-slash-filled", |
|||
"unicode": "\ue6b4" |
|||
}, |
|||
{ |
|||
"font_class": "fire", |
|||
"unicode": "\ue6a1" |
|||
}, |
|||
{ |
|||
"font_class": "fire-filled", |
|||
"unicode": "\ue6c5" |
|||
}, |
|||
{ |
|||
"font_class": "flag", |
|||
"unicode": "\ue65f" |
|||
}, |
|||
{ |
|||
"font_class": "flag-filled", |
|||
"unicode": "\ue660" |
|||
}, |
|||
{ |
|||
"font_class": "folder-add", |
|||
"unicode": "\ue6a9" |
|||
}, |
|||
{ |
|||
"font_class": "folder-add-filled", |
|||
"unicode": "\ue6c8" |
|||
}, |
|||
{ |
|||
"font_class": "font", |
|||
"unicode": "\ue6a3" |
|||
}, |
|||
{ |
|||
"font_class": "forward", |
|||
"unicode": "\ue6ba" |
|||
}, |
|||
{ |
|||
"font_class": "gear", |
|||
"unicode": "\ue664" |
|||
}, |
|||
{ |
|||
"font_class": "gear-filled", |
|||
"unicode": "\ue661" |
|||
}, |
|||
{ |
|||
"font_class": "gift", |
|||
"unicode": "\ue6a4" |
|||
}, |
|||
{ |
|||
"font_class": "gift-filled", |
|||
"unicode": "\ue6c4" |
|||
}, |
|||
{ |
|||
"font_class": "hand-down", |
|||
"unicode": "\ue63d" |
|||
}, |
|||
{ |
|||
"font_class": "hand-down-filled", |
|||
"unicode": "\ue63c" |
|||
}, |
|||
{ |
|||
"font_class": "hand-up", |
|||
"unicode": "\ue63f" |
|||
}, |
|||
{ |
|||
"font_class": "hand-up-filled", |
|||
"unicode": "\ue63e" |
|||
}, |
|||
{ |
|||
"font_class": "headphones", |
|||
"unicode": "\ue630" |
|||
}, |
|||
{ |
|||
"font_class": "heart", |
|||
"unicode": "\ue639" |
|||
}, |
|||
{ |
|||
"font_class": "heart-filled", |
|||
"unicode": "\ue641" |
|||
}, |
|||
{ |
|||
"font_class": "help", |
|||
"unicode": "\ue679" |
|||
}, |
|||
{ |
|||
"font_class": "help-filled", |
|||
"unicode": "\ue674" |
|||
}, |
|||
{ |
|||
"font_class": "home", |
|||
"unicode": "\ue662" |
|||
}, |
|||
{ |
|||
"font_class": "home-filled", |
|||
"unicode": "\ue663" |
|||
}, |
|||
{ |
|||
"font_class": "image", |
|||
"unicode": "\ue670" |
|||
}, |
|||
{ |
|||
"font_class": "image-filled", |
|||
"unicode": "\ue678" |
|||
}, |
|||
{ |
|||
"font_class": "images", |
|||
"unicode": "\ue650" |
|||
}, |
|||
{ |
|||
"font_class": "images-filled", |
|||
"unicode": "\ue64b" |
|||
}, |
|||
{ |
|||
"font_class": "info", |
|||
"unicode": "\ue669" |
|||
}, |
|||
{ |
|||
"font_class": "info-filled", |
|||
"unicode": "\ue649" |
|||
}, |
|||
{ |
|||
"font_class": "left", |
|||
"unicode": "\ue6b7" |
|||
}, |
|||
{ |
|||
"font_class": "link", |
|||
"unicode": "\ue6a5" |
|||
}, |
|||
{ |
|||
"font_class": "list", |
|||
"unicode": "\ue644" |
|||
}, |
|||
{ |
|||
"font_class": "location", |
|||
"unicode": "\ue6ae" |
|||
}, |
|||
{ |
|||
"font_class": "location-filled", |
|||
"unicode": "\ue6af" |
|||
}, |
|||
{ |
|||
"font_class": "locked", |
|||
"unicode": "\ue66b" |
|||
}, |
|||
{ |
|||
"font_class": "locked-filled", |
|||
"unicode": "\ue668" |
|||
}, |
|||
{ |
|||
"font_class": "loop", |
|||
"unicode": "\ue633" |
|||
}, |
|||
{ |
|||
"font_class": "mail-open", |
|||
"unicode": "\ue643" |
|||
}, |
|||
{ |
|||
"font_class": "mail-open-filled", |
|||
"unicode": "\ue63a" |
|||
}, |
|||
{ |
|||
"font_class": "map", |
|||
"unicode": "\ue667" |
|||
}, |
|||
{ |
|||
"font_class": "map-filled", |
|||
"unicode": "\ue666" |
|||
}, |
|||
{ |
|||
"font_class": "map-pin", |
|||
"unicode": "\ue6ad" |
|||
}, |
|||
{ |
|||
"font_class": "map-pin-ellipse", |
|||
"unicode": "\ue6ac" |
|||
}, |
|||
{ |
|||
"font_class": "medal", |
|||
"unicode": "\ue6a2" |
|||
}, |
|||
{ |
|||
"font_class": "medal-filled", |
|||
"unicode": "\ue6c3" |
|||
}, |
|||
{ |
|||
"font_class": "mic", |
|||
"unicode": "\ue671" |
|||
}, |
|||
{ |
|||
"font_class": "mic-filled", |
|||
"unicode": "\ue677" |
|||
}, |
|||
{ |
|||
"font_class": "micoff", |
|||
"unicode": "\ue67e" |
|||
}, |
|||
{ |
|||
"font_class": "micoff-filled", |
|||
"unicode": "\ue6b0" |
|||
}, |
|||
{ |
|||
"font_class": "minus", |
|||
"unicode": "\ue66f" |
|||
}, |
|||
{ |
|||
"font_class": "minus-filled", |
|||
"unicode": "\ue67d" |
|||
}, |
|||
{ |
|||
"font_class": "more", |
|||
"unicode": "\ue64d" |
|||
}, |
|||
{ |
|||
"font_class": "more-filled", |
|||
"unicode": "\ue64e" |
|||
}, |
|||
{ |
|||
"font_class": "navigate", |
|||
"unicode": "\ue66e" |
|||
}, |
|||
{ |
|||
"font_class": "navigate-filled", |
|||
"unicode": "\ue67a" |
|||
}, |
|||
{ |
|||
"font_class": "notification", |
|||
"unicode": "\ue6a6" |
|||
}, |
|||
{ |
|||
"font_class": "notification-filled", |
|||
"unicode": "\ue6c1" |
|||
}, |
|||
{ |
|||
"font_class": "paperclip", |
|||
"unicode": "\ue652" |
|||
}, |
|||
{ |
|||
"font_class": "paperplane", |
|||
"unicode": "\ue672" |
|||
}, |
|||
{ |
|||
"font_class": "paperplane-filled", |
|||
"unicode": "\ue675" |
|||
}, |
|||
{ |
|||
"font_class": "person", |
|||
"unicode": "\ue699" |
|||
}, |
|||
{ |
|||
"font_class": "person-filled", |
|||
"unicode": "\ue69d" |
|||
}, |
|||
{ |
|||
"font_class": "personadd", |
|||
"unicode": "\ue69f" |
|||
}, |
|||
{ |
|||
"font_class": "personadd-filled", |
|||
"unicode": "\ue698" |
|||
}, |
|||
{ |
|||
"font_class": "personadd-filled-copy", |
|||
"unicode": "\ue6d1" |
|||
}, |
|||
{ |
|||
"font_class": "phone", |
|||
"unicode": "\ue69c" |
|||
}, |
|||
{ |
|||
"font_class": "phone-filled", |
|||
"unicode": "\ue69b" |
|||
}, |
|||
{ |
|||
"font_class": "plus", |
|||
"unicode": "\ue676" |
|||
}, |
|||
{ |
|||
"font_class": "plus-filled", |
|||
"unicode": "\ue6c7" |
|||
}, |
|||
{ |
|||
"font_class": "plusempty", |
|||
"unicode": "\ue67b" |
|||
}, |
|||
{ |
|||
"font_class": "pulldown", |
|||
"unicode": "\ue632" |
|||
}, |
|||
{ |
|||
"font_class": "pyq", |
|||
"unicode": "\ue682" |
|||
}, |
|||
{ |
|||
"font_class": "qq", |
|||
"unicode": "\ue680" |
|||
}, |
|||
{ |
|||
"font_class": "redo", |
|||
"unicode": "\ue64a" |
|||
}, |
|||
{ |
|||
"font_class": "redo-filled", |
|||
"unicode": "\ue655" |
|||
}, |
|||
{ |
|||
"font_class": "refresh", |
|||
"unicode": "\ue657" |
|||
}, |
|||
{ |
|||
"font_class": "refresh-filled", |
|||
"unicode": "\ue656" |
|||
}, |
|||
{ |
|||
"font_class": "refreshempty", |
|||
"unicode": "\ue6bf" |
|||
}, |
|||
{ |
|||
"font_class": "reload", |
|||
"unicode": "\ue6b2" |
|||
}, |
|||
{ |
|||
"font_class": "right", |
|||
"unicode": "\ue6b5" |
|||
}, |
|||
{ |
|||
"font_class": "scan", |
|||
"unicode": "\ue62a" |
|||
}, |
|||
{ |
|||
"font_class": "search", |
|||
"unicode": "\ue654" |
|||
}, |
|||
{ |
|||
"font_class": "settings", |
|||
"unicode": "\ue653" |
|||
}, |
|||
{ |
|||
"font_class": "settings-filled", |
|||
"unicode": "\ue6ce" |
|||
}, |
|||
{ |
|||
"font_class": "shop", |
|||
"unicode": "\ue62f" |
|||
}, |
|||
{ |
|||
"font_class": "shop-filled", |
|||
"unicode": "\ue6cd" |
|||
}, |
|||
{ |
|||
"font_class": "smallcircle", |
|||
"unicode": "\ue67c" |
|||
}, |
|||
{ |
|||
"font_class": "smallcircle-filled", |
|||
"unicode": "\ue665" |
|||
}, |
|||
{ |
|||
"font_class": "sound", |
|||
"unicode": "\ue684" |
|||
}, |
|||
{ |
|||
"font_class": "sound-filled", |
|||
"unicode": "\ue686" |
|||
}, |
|||
{ |
|||
"font_class": "spinner-cycle", |
|||
"unicode": "\ue68a" |
|||
}, |
|||
{ |
|||
"font_class": "staff", |
|||
"unicode": "\ue6a7" |
|||
}, |
|||
{ |
|||
"font_class": "staff-filled", |
|||
"unicode": "\ue6cb" |
|||
}, |
|||
{ |
|||
"font_class": "star", |
|||
"unicode": "\ue688" |
|||
}, |
|||
{ |
|||
"font_class": "star-filled", |
|||
"unicode": "\ue68f" |
|||
}, |
|||
{ |
|||
"font_class": "starhalf", |
|||
"unicode": "\ue683" |
|||
}, |
|||
{ |
|||
"font_class": "trash", |
|||
"unicode": "\ue687" |
|||
}, |
|||
{ |
|||
"font_class": "trash-filled", |
|||
"unicode": "\ue685" |
|||
}, |
|||
{ |
|||
"font_class": "tune", |
|||
"unicode": "\ue6aa" |
|||
}, |
|||
{ |
|||
"font_class": "tune-filled", |
|||
"unicode": "\ue6ca" |
|||
}, |
|||
{ |
|||
"font_class": "undo", |
|||
"unicode": "\ue64f" |
|||
}, |
|||
{ |
|||
"font_class": "undo-filled", |
|||
"unicode": "\ue64c" |
|||
}, |
|||
{ |
|||
"font_class": "up", |
|||
"unicode": "\ue6b6" |
|||
}, |
|||
{ |
|||
"font_class": "top", |
|||
"unicode": "\ue6b6" |
|||
}, |
|||
{ |
|||
"font_class": "upload", |
|||
"unicode": "\ue690" |
|||
}, |
|||
{ |
|||
"font_class": "upload-filled", |
|||
"unicode": "\ue68e" |
|||
}, |
|||
{ |
|||
"font_class": "videocam", |
|||
"unicode": "\ue68c" |
|||
}, |
|||
{ |
|||
"font_class": "videocam-filled", |
|||
"unicode": "\ue689" |
|||
}, |
|||
{ |
|||
"font_class": "vip", |
|||
"unicode": "\ue6a8" |
|||
}, |
|||
{ |
|||
"font_class": "vip-filled", |
|||
"unicode": "\ue6c6" |
|||
}, |
|||
{ |
|||
"font_class": "wallet", |
|||
"unicode": "\ue6b1" |
|||
}, |
|||
{ |
|||
"font_class": "wallet-filled", |
|||
"unicode": "\ue6c2" |
|||
}, |
|||
{ |
|||
"font_class": "weibo", |
|||
"unicode": "\ue68b" |
|||
}, |
|||
{ |
|||
"font_class": "weixin", |
|||
"unicode": "\ue691" |
|||
} |
|||
] |
|||
|
|||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
@ -0,0 +1,89 @@ |
|||
{ |
|||
"id": "uni-icons", |
|||
"displayName": "uni-icons 图标", |
|||
"version": "2.0.10", |
|||
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。", |
|||
"keywords": [ |
|||
"uni-ui", |
|||
"uniui", |
|||
"icon", |
|||
"图标" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "^3.2.14" |
|||
}, |
|||
"directories": { |
|||
"example": "../../temps/example_temps" |
|||
}, |
|||
"dcloudext": { |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", |
|||
"type": "component-vue" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": ["uni-scss"], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y", |
|||
"alipay": "n" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "y", |
|||
"app-uvue": "y" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y", |
|||
"钉钉": "y", |
|||
"快手": "y", |
|||
"飞书": "y", |
|||
"京东": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "y", |
|||
"联盟": "y" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,8 @@ |
|||
## Icons 图标 |
|||
> **组件名:uni-icons** |
|||
> 代码块: `uIcons` |
|||
|
|||
用于展示 icons 图标 。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons) |
|||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 |
@ -0,0 +1,8 @@ |
|||
## 1.0.3(2022-01-21) |
|||
- 优化 组件示例 |
|||
## 1.0.2(2021-11-22) |
|||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 |
|||
## 1.0.1(2021-11-22) |
|||
- 修复 vue3中scss语法兼容问题 |
|||
## 1.0.0(2021-11-18) |
|||
- init |
@ -0,0 +1 @@ |
|||
@import './styles/index.scss'; |
@ -0,0 +1,82 @@ |
|||
{ |
|||
"id": "uni-scss", |
|||
"displayName": "uni-scss 辅助样式", |
|||
"version": "1.0.3", |
|||
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。", |
|||
"keywords": [ |
|||
"uni-scss", |
|||
"uni-ui", |
|||
"辅助样式" |
|||
], |
|||
"repository": "https://github.com/dcloudio/uni-ui", |
|||
"engines": { |
|||
"HBuilderX": "^3.1.0" |
|||
}, |
|||
"dcloudext": { |
|||
"category": [ |
|||
"JS SDK", |
|||
"通用 SDK" |
|||
], |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "无", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "y", |
|||
"aliyun": "y" |
|||
}, |
|||
"client": { |
|||
"App": { |
|||
"app-vue": "y", |
|||
"app-nvue": "u" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "y", |
|||
"Android Browser": "y", |
|||
"微信浏览器(Android)": "y", |
|||
"QQ浏览器(Android)": "y" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "y", |
|||
"IE": "y", |
|||
"Edge": "y", |
|||
"Firefox": "y", |
|||
"Safari": "y" |
|||
}, |
|||
"小程序": { |
|||
"微信": "y", |
|||
"阿里": "y", |
|||
"百度": "y", |
|||
"字节跳动": "y", |
|||
"QQ": "y" |
|||
}, |
|||
"快应用": { |
|||
"华为": "n", |
|||
"联盟": "n" |
|||
}, |
|||
"Vue": { |
|||
"vue2": "y", |
|||
"vue3": "y" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,4 @@ |
|||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。 |
|||
|
|||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) |
|||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839 |
@ -0,0 +1,7 @@ |
|||
@import './setting/_variables.scss'; |
|||
@import './setting/_border.scss'; |
|||
@import './setting/_color.scss'; |
|||
@import './setting/_space.scss'; |
|||
@import './setting/_radius.scss'; |
|||
@import './setting/_text.scss'; |
|||
@import './setting/_styles.scss'; |
@ -0,0 +1,3 @@ |
|||
.uni-border { |
|||
border: 1px $uni-border-1 solid; |
|||
} |
@ -0,0 +1,66 @@ |
|||
|
|||
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐 |
|||
// @mixin get-styles($k,$c) { |
|||
// @if $k == size or $k == weight{ |
|||
// font-#{$k}:#{$c} |
|||
// }@else{ |
|||
// #{$k}:#{$c} |
|||
// } |
|||
// } |
|||
$uni-ui-color:( |
|||
// 主色 |
|||
primary: $uni-primary, |
|||
primary-disable: $uni-primary-disable, |
|||
primary-light: $uni-primary-light, |
|||
// 辅助色 |
|||
success: $uni-success, |
|||
success-disable: $uni-success-disable, |
|||
success-light: $uni-success-light, |
|||
warning: $uni-warning, |
|||
warning-disable: $uni-warning-disable, |
|||
warning-light: $uni-warning-light, |
|||
error: $uni-error, |
|||
error-disable: $uni-error-disable, |
|||
error-light: $uni-error-light, |
|||
info: $uni-info, |
|||
info-disable: $uni-info-disable, |
|||
info-light: $uni-info-light, |
|||
// 中性色 |
|||
main-color: $uni-main-color, |
|||
base-color: $uni-base-color, |
|||
secondary-color: $uni-secondary-color, |
|||
extra-color: $uni-extra-color, |
|||
// 背景色 |
|||
bg-color: $uni-bg-color, |
|||
// 边框颜色 |
|||
border-1: $uni-border-1, |
|||
border-2: $uni-border-2, |
|||
border-3: $uni-border-3, |
|||
border-4: $uni-border-4, |
|||
// 黑色 |
|||
black:$uni-black, |
|||
// 白色 |
|||
white:$uni-white, |
|||
// 透明 |
|||
transparent:$uni-transparent |
|||
) !default; |
|||
@each $key, $child in $uni-ui-color { |
|||
.uni-#{"" + $key} { |
|||
color: $child; |
|||
} |
|||
.uni-#{"" + $key}-bg { |
|||
background-color: $child; |
|||
} |
|||
} |
|||
.uni-shadow-sm { |
|||
box-shadow: $uni-shadow-sm; |
|||
} |
|||
.uni-shadow-base { |
|||
box-shadow: $uni-shadow-base; |
|||
} |
|||
.uni-shadow-lg { |
|||
box-shadow: $uni-shadow-lg; |
|||
} |
|||
.uni-mask { |
|||
background-color:$uni-mask; |
|||
} |
@ -0,0 +1,55 @@ |
|||
@mixin radius($r,$d:null ,$important: false){ |
|||
$radius-value:map-get($uni-radius, $r) if($important, !important, null); |
|||
// Key exists within the $uni-radius variable |
|||
@if (map-has-key($uni-radius, $r) and $d){ |
|||
@if $d == t { |
|||
border-top-left-radius:$radius-value; |
|||
border-top-right-radius:$radius-value; |
|||
}@else if $d == r { |
|||
border-top-right-radius:$radius-value; |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == b { |
|||
border-bottom-left-radius:$radius-value; |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == l { |
|||
border-top-left-radius:$radius-value; |
|||
border-bottom-left-radius:$radius-value; |
|||
}@else if $d == tl { |
|||
border-top-left-radius:$radius-value; |
|||
}@else if $d == tr { |
|||
border-top-right-radius:$radius-value; |
|||
}@else if $d == br { |
|||
border-bottom-right-radius:$radius-value; |
|||
}@else if $d == bl { |
|||
border-bottom-left-radius:$radius-value; |
|||
} |
|||
}@else{ |
|||
border-radius:$radius-value; |
|||
} |
|||
} |
|||
|
|||
@each $key, $child in $uni-radius { |
|||
@if($key){ |
|||
.uni-radius-#{"" + $key} { |
|||
@include radius($key) |
|||
} |
|||
}@else{ |
|||
.uni-radius { |
|||
@include radius($key) |
|||
} |
|||
} |
|||
} |
|||
|
|||
@each $direction in t, r, b, l,tl, tr, br, bl { |
|||
@each $key, $child in $uni-radius { |
|||
@if($key){ |
|||
.uni-radius-#{"" + $direction}-#{"" + $key} { |
|||
@include radius($key,$direction,false) |
|||
} |
|||
}@else{ |
|||
.uni-radius-#{$direction} { |
|||
@include radius($key,$direction,false) |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,56 @@ |
|||
|
|||
@mixin fn($space,$direction,$size,$n) { |
|||
@if $n { |
|||
#{$space}-#{$direction}: #{$size*$uni-space-root}px |
|||
} @else { |
|||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px |
|||
} |
|||
} |
|||
@mixin get-styles($direction,$i,$space,$n){ |
|||
@if $direction == t { |
|||
@include fn($space, top,$i,$n); |
|||
} |
|||
@if $direction == r { |
|||
@include fn($space, right,$i,$n); |
|||
} |
|||
@if $direction == b { |
|||
@include fn($space, bottom,$i,$n); |
|||
} |
|||
@if $direction == l { |
|||
@include fn($space, left,$i,$n); |
|||
} |
|||
@if $direction == x { |
|||
@include fn($space, left,$i,$n); |
|||
@include fn($space, right,$i,$n); |
|||
} |
|||
@if $direction == y { |
|||
@include fn($space, top,$i,$n); |
|||
@include fn($space, bottom,$i,$n); |
|||
} |
|||
@if $direction == a { |
|||
@if $n { |
|||
#{$space}:#{$i*$uni-space-root}px; |
|||
} @else { |
|||
#{$space}:#{-$i*$uni-space-root}px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@each $orientation in m,p { |
|||
$space: margin; |
|||
@if $orientation == m { |
|||
$space: margin; |
|||
} @else { |
|||
$space: padding; |
|||
} |
|||
@for $i from 0 through 16 { |
|||
@each $direction in t, r, b, l, x, y, a { |
|||
.uni-#{$orientation}#{$direction}-#{$i} { |
|||
@include get-styles($direction,$i,$space,true); |
|||
} |
|||
.uni-#{$orientation}#{$direction}-n#{$i} { |
|||
@include get-styles($direction,$i,$space,false); |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,167 @@ |
|||
/* #ifndef APP-NVUE */ |
|||
|
|||
$-color-white:#fff; |
|||
$-color-black:#000; |
|||
@mixin base-style($color) { |
|||
color: #fff; |
|||
background-color: $color; |
|||
border-color: mix($-color-black, $color, 8%); |
|||
&:not([hover-class]):active { |
|||
background: mix($-color-black, $color, 10%); |
|||
border-color: mix($-color-black, $color, 20%); |
|||
color: $-color-white; |
|||
outline: none; |
|||
} |
|||
} |
|||
@mixin is-color($color) { |
|||
@include base-style($color); |
|||
&[loading] { |
|||
@include base-style($color); |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
&[disabled] { |
|||
&, |
|||
&[loading], |
|||
&:not([hover-class]):active { |
|||
color: $-color-white; |
|||
border-color: mix(darken($color,10%), $-color-white); |
|||
background-color: mix($color, $-color-white); |
|||
} |
|||
} |
|||
|
|||
} |
|||
@mixin base-plain-style($color) { |
|||
color:$color; |
|||
background-color: mix($-color-white, $color, 90%); |
|||
border-color: mix($-color-white, $color, 70%); |
|||
&:not([hover-class]):active { |
|||
background: mix($-color-white, $color, 80%); |
|||
color: $color; |
|||
outline: none; |
|||
border-color: mix($-color-white, $color, 50%); |
|||
} |
|||
} |
|||
@mixin is-plain($color){ |
|||
&[plain] { |
|||
@include base-plain-style($color); |
|||
&[loading] { |
|||
@include base-plain-style($color); |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
&[disabled] { |
|||
&, |
|||
&:active { |
|||
color: mix($-color-white, $color, 40%); |
|||
background-color: mix($-color-white, $color, 90%); |
|||
border-color: mix($-color-white, $color, 80%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.uni-btn { |
|||
margin: 5px; |
|||
color: #393939; |
|||
border:1px solid #ccc; |
|||
font-size: 16px; |
|||
font-weight: 200; |
|||
background-color: #F9F9F9; |
|||
// TODO 暂时处理边框隐藏一边的问题 |
|||
overflow: visible; |
|||
&::after{ |
|||
border: none; |
|||
} |
|||
|
|||
&:not([type]),&[type=default] { |
|||
color: #999; |
|||
&[loading] { |
|||
background: none; |
|||
&::before { |
|||
margin-right:5px; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
&[disabled]{ |
|||
color: mix($-color-white, #999, 60%); |
|||
&, |
|||
&[loading], |
|||
&:active { |
|||
color: mix($-color-white, #999, 60%); |
|||
background-color: mix($-color-white,$-color-black , 98%); |
|||
border-color: mix($-color-white, #999, 85%); |
|||
} |
|||
} |
|||
|
|||
&[plain] { |
|||
color: #999; |
|||
background: none; |
|||
border-color: $uni-border-1; |
|||
&:not([hover-class]):active { |
|||
background: none; |
|||
color: mix($-color-white, $-color-black, 80%); |
|||
border-color: mix($-color-white, $-color-black, 90%); |
|||
outline: none; |
|||
} |
|||
&[disabled]{ |
|||
&, |
|||
&[loading], |
|||
&:active { |
|||
background: none; |
|||
color: mix($-color-white, #999, 60%); |
|||
border-color: mix($-color-white, #999, 85%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:not([hover-class]):active { |
|||
color: mix($-color-white, $-color-black, 50%); |
|||
} |
|||
|
|||
&[size=mini] { |
|||
font-size: 16px; |
|||
font-weight: 200; |
|||
border-radius: 8px; |
|||
} |
|||
|
|||
|
|||
|
|||
&.uni-btn-small { |
|||
font-size: 14px; |
|||
} |
|||
&.uni-btn-mini { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
&.uni-btn-radius { |
|||
border-radius: 999px; |
|||
} |
|||
&[type=primary] { |
|||
@include is-color($uni-primary); |
|||
@include is-plain($uni-primary) |
|||
} |
|||
&[type=success] { |
|||
@include is-color($uni-success); |
|||
@include is-plain($uni-success) |
|||
} |
|||
&[type=error] { |
|||
@include is-color($uni-error); |
|||
@include is-plain($uni-error) |
|||
} |
|||
&[type=warning] { |
|||
@include is-color($uni-warning); |
|||
@include is-plain($uni-warning) |
|||
} |
|||
&[type=info] { |
|||
@include is-color($uni-info); |
|||
@include is-plain($uni-info) |
|||
} |
|||
} |
|||
/* #endif */ |
@ -0,0 +1,24 @@ |
|||
@mixin get-styles($k,$c) { |
|||
@if $k == size or $k == weight{ |
|||
font-#{$k}:#{$c} |
|||
}@else{ |
|||
#{$k}:#{$c} |
|||
} |
|||
} |
|||
|
|||
@each $key, $child in $uni-headings { |
|||
/* #ifndef APP-NVUE */ |
|||
.uni-#{$key} { |
|||
@each $k, $c in $child { |
|||
@include get-styles($k,$c) |
|||
} |
|||
} |
|||
/* #endif */ |
|||
/* #ifdef APP-NVUE */ |
|||
.container .uni-#{$key} { |
|||
@each $k, $c in $child { |
|||
@include get-styles($k,$c) |
|||
} |
|||
} |
|||
/* #endif */ |
|||
} |
@ -0,0 +1,146 @@ |
|||
// @use "sass:math"; |
|||
@import '../tools/functions.scss'; |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2 !default; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px !default; |
|||
$uni-radius: () !default; |
|||
// 边框半径断点 |
|||
$uni-radius: map-deep-merge( |
|||
( |
|||
0: 0, |
|||
// TODO 当前版本暂时不支持 sm 属性 |
|||
// 'sm': math.div($uni-radius-root, 2), |
|||
null: $uni-radius-root, |
|||
'lg': $uni-radius-root * 2, |
|||
'xl': $uni-radius-root * 6, |
|||
'pill': 9999px, |
|||
'circle': 50% |
|||
), |
|||
$uni-radius |
|||
); |
|||
// 字体家族 |
|||
$body-font-family: 'Roboto', sans-serif !default; |
|||
// 文本 |
|||
$heading-font-family: $body-font-family !default; |
|||
$uni-headings: () !default; |
|||
$letterSpacing: -0.01562em; |
|||
$uni-headings: map-deep-merge( |
|||
( |
|||
'h1': ( |
|||
size: 32px, |
|||
weight: 300, |
|||
line-height: 50px, |
|||
// letter-spacing:-0.01562em |
|||
), |
|||
'h2': ( |
|||
size: 28px, |
|||
weight: 300, |
|||
line-height: 40px, |
|||
// letter-spacing: -0.00833em |
|||
), |
|||
'h3': ( |
|||
size: 24px, |
|||
weight: 400, |
|||
line-height: 32px, |
|||
// letter-spacing: normal |
|||
), |
|||
'h4': ( |
|||
size: 20px, |
|||
weight: 400, |
|||
line-height: 30px, |
|||
// letter-spacing: 0.00735em |
|||
), |
|||
'h5': ( |
|||
size: 16px, |
|||
weight: 400, |
|||
line-height: 24px, |
|||
// letter-spacing: normal |
|||
), |
|||
'h6': ( |
|||
size: 14px, |
|||
weight: 500, |
|||
line-height: 18px, |
|||
// letter-spacing: 0.0125em |
|||
), |
|||
'subtitle': ( |
|||
size: 12px, |
|||
weight: 400, |
|||
line-height: 20px, |
|||
// letter-spacing: 0.00937em |
|||
), |
|||
'body': ( |
|||
font-size: 14px, |
|||
font-weight: 400, |
|||
line-height: 22px, |
|||
// letter-spacing: 0.03125em |
|||
), |
|||
'caption': ( |
|||
'size': 12px, |
|||
'weight': 400, |
|||
'line-height': 20px, |
|||
// 'letter-spacing': 0.03333em, |
|||
// 'text-transform': false |
|||
) |
|||
), |
|||
$uni-headings |
|||
); |
|||
|
|||
|
|||
|
|||
// 主色 |
|||
$uni-primary: #2979ff !default; |
|||
$uni-primary-disable:lighten($uni-primary,20%) !default; |
|||
$uni-primary-light: lighten($uni-primary,25%) !default; |
|||
|
|||
// 辅助色 |
|||
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。 |
|||
$uni-success: #18bc37 !default; |
|||
$uni-success-disable:lighten($uni-success,20%) !default; |
|||
$uni-success-light: lighten($uni-success,25%) !default; |
|||
|
|||
$uni-warning: #f3a73f !default; |
|||
$uni-warning-disable:lighten($uni-warning,20%) !default; |
|||
$uni-warning-light: lighten($uni-warning,25%) !default; |
|||
|
|||
$uni-error: #e43d33 !default; |
|||
$uni-error-disable:lighten($uni-error,20%) !default; |
|||
$uni-error-light: lighten($uni-error,25%) !default; |
|||
|
|||
$uni-info: #8f939c !default; |
|||
$uni-info-disable:lighten($uni-info,20%) !default; |
|||
$uni-info-light: lighten($uni-info,25%) !default; |
|||
|
|||
// 中性色 |
|||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 |
|||
$uni-main-color: #3a3a3a !default; // 主要文字 |
|||
$uni-base-color: #6a6a6a !default; // 常规文字 |
|||
$uni-secondary-color: #909399 !default; // 次要文字 |
|||
$uni-extra-color: #c7c7c7 !default; // 辅助说明 |
|||
|
|||
// 边框颜色 |
|||
$uni-border-1: #F0F0F0 !default; |
|||
$uni-border-2: #EDEDED !default; |
|||
$uni-border-3: #DCDCDC !default; |
|||
$uni-border-4: #B9B9B9 !default; |
|||
|
|||
// 常规色 |
|||
$uni-black: #000000 !default; |
|||
$uni-white: #ffffff !default; |
|||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default; |
|||
|
|||
// 背景色 |
|||
$uni-bg-color: #f7f7f7 !default; |
|||
|
|||
/* 水平间距 */ |
|||
$uni-spacing-sm: 8px !default; |
|||
$uni-spacing-base: 15px !default; |
|||
$uni-spacing-lg: 30px !default; |
|||
|
|||
// 阴影 |
|||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; |
|||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; |
|||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; |
|||
|
|||
// 蒙版 |
|||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; |
@ -0,0 +1,19 @@ |
|||
// 合并 map |
|||
@function map-deep-merge($parent-map, $child-map){ |
|||
$result: $parent-map; |
|||
@each $key, $child in $child-map { |
|||
$parent-has-key: map-has-key($result, $key); |
|||
$parent-value: map-get($result, $key); |
|||
$parent-type: type-of($parent-value); |
|||
$child-type: type-of($child); |
|||
$parent-is-map: $parent-type == map; |
|||
$child-is-map: $child-type == map; |
|||
|
|||
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ |
|||
$result: map-merge($result, ( $key: $child )); |
|||
}@else { |
|||
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); |
|||
} |
|||
} |
|||
@return $result; |
|||
}; |
@ -0,0 +1,31 @@ |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px; |
|||
// 主色 |
|||
$uni-primary: #2979ff; |
|||
// 辅助色 |
|||
$uni-success: #4cd964; |
|||
// 警告色 |
|||
$uni-warning: #f0ad4e; |
|||
// 错误色 |
|||
$uni-error: #dd524d; |
|||
// 描述色 |
|||
$uni-info: #909399; |
|||
// 中性色 |
|||
$uni-main-color: #303133; |
|||
$uni-base-color: #606266; |
|||
$uni-secondary-color: #909399; |
|||
$uni-extra-color: #C0C4CC; |
|||
// 背景色 |
|||
$uni-bg-color: #f5f5f5; |
|||
// 边框颜色 |
|||
$uni-border-1: #DCDFE6; |
|||
$uni-border-2: #E4E7ED; |
|||
$uni-border-3: #EBEEF5; |
|||
$uni-border-4: #F2F6FC; |
|||
|
|||
// 常规色 |
|||
$uni-black: #000000; |
|||
$uni-white: #ffffff; |
|||
$uni-transparent: rgba($color: #000000, $alpha: 0); |
@ -0,0 +1,62 @@ |
|||
@import './styles/setting/_variables.scss'; |
|||
// 间距基础倍数 |
|||
$uni-space-root: 2; |
|||
// 边框半径默认值 |
|||
$uni-radius-root:5px; |
|||
|
|||
// 主色 |
|||
$uni-primary: #2979ff; |
|||
$uni-primary-disable:mix(#fff,$uni-primary,50%); |
|||
$uni-primary-light: mix(#fff,$uni-primary,80%); |
|||
|
|||
// 辅助色 |
|||
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。 |
|||
$uni-success: #18bc37; |
|||
$uni-success-disable:mix(#fff,$uni-success,50%); |
|||
$uni-success-light: mix(#fff,$uni-success,80%); |
|||
|
|||
$uni-warning: #f3a73f; |
|||
$uni-warning-disable:mix(#fff,$uni-warning,50%); |
|||
$uni-warning-light: mix(#fff,$uni-warning,80%); |
|||
|
|||
$uni-error: #e43d33; |
|||
$uni-error-disable:mix(#fff,$uni-error,50%); |
|||
$uni-error-light: mix(#fff,$uni-error,80%); |
|||
|
|||
$uni-info: #8f939c; |
|||
$uni-info-disable:mix(#fff,$uni-info,50%); |
|||
$uni-info-light: mix(#fff,$uni-info,80%); |
|||
|
|||
// 中性色 |
|||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。 |
|||
$uni-main-color: #3a3a3a; // 主要文字 |
|||
$uni-base-color: #6a6a6a; // 常规文字 |
|||
$uni-secondary-color: #909399; // 次要文字 |
|||
$uni-extra-color: #c7c7c7; // 辅助说明 |
|||
|
|||
// 边框颜色 |
|||
$uni-border-1: #F0F0F0; |
|||
$uni-border-2: #EDEDED; |
|||
$uni-border-3: #DCDCDC; |
|||
$uni-border-4: #B9B9B9; |
|||
|
|||
// 常规色 |
|||
$uni-black: #000000; |
|||
$uni-white: #ffffff; |
|||
$uni-transparent: rgba($color: #000000, $alpha: 0); |
|||
|
|||
// 背景色 |
|||
$uni-bg-color: #f7f7f7; |
|||
|
|||
/* 水平间距 */ |
|||
$uni-spacing-sm: 8px; |
|||
$uni-spacing-base: 15px; |
|||
$uni-spacing-lg: 30px; |
|||
|
|||
// 阴影 |
|||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); |
|||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); |
|||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); |
|||
|
|||
// 蒙版 |
|||
$uni-mask: rgba($color: #000000, $alpha: 0.4); |
@ -0,0 +1,10 @@ |
|||
## 1.0.8(2025-07-14) |
|||
更新项目gitea地址 |
|||
## 1.0.7(2025-07-14) |
|||
上传示例工程 |
|||
## 1.0.2(2025-02-20) |
|||
插件下载应用测试完成,功能都正常,完成文档 |
|||
## 1.0.1(2025-02-19) |
|||
规范语法 |
|||
## 1.0.0(2025-02-19) |
|||
代码和文档还在撰写中,敬请期待 |
After Width: 64 | Height: 64 | Size: 4.8 KiB |
After Width: 64 | Height: 64 | Size: 7.0 KiB |
After Width: 64 | Height: 64 | Size: 611 B |
After Width: 64 | Height: 64 | Size: 879 B |
After Width: 64 | Height: 64 | Size: 4.7 KiB |
After Width: 64 | Height: 64 | Size: 746 B |
After Width: 64 | Height: 64 | Size: 5.1 KiB |
After Width: 64 | Height: 64 | Size: 7.5 KiB |
After Width: 64 | Height: 64 | Size: 853 B |
@ -0,0 +1,179 @@ |
|||
<template> |
|||
<view class="vrapile-node-item"> |
|||
<view class="vrapile-node-head"> |
|||
<view class="vrapile-node-head-left" @click="node_nodeClick" @longpress="longPress"> |
|||
<image v-if="item[node_defaultProps.children] && item[node_defaultProps.children].length > 0" |
|||
src="../static/image/downrect.png" mode="scaleToFill" |
|||
class="vrapile-node-left-icon" :class="node_unfold ? 'vrapile-node-rt45' : ''"> |
|||
</image> |
|||
<text class="vrapile-node-left-txt" :class="item[node_defaultProps.children] && item[node_defaultProps.children].length > 0 ? '': 'vrapile-node-left-txt-no-child'"> |
|||
{{item[defaultProps.label]}} |
|||
</text> |
|||
</view> |
|||
<view v-if="node_edit" class="vrapile-node-head-right"> |
|||
<image src="../static/image/editBlue.png" class="vrapile-node-head-right-edit-icon" @click.stop="node_editClick" /> |
|||
<image src="../static/image/addblue.png" class="vrapile-node-head-right-edit-icon" @click.stop="node_addClick" /> |
|||
</view> |
|||
</view> |
|||
<view v-if="divider" class="vrapile-node-divider"></view> |
|||
<view v-if="item[node_defaultProps.children] && item[node_defaultProps.children].length > 0" |
|||
class="vrapile-node-content" v-show="node_unfold" :key="item.id"> |
|||
<vrapile-node v-for="(sitem, sindex) in item[node_defaultProps.children]" |
|||
:items="item[node_defaultProps.children]" |
|||
:item="sitem" |
|||
:index="sindex" |
|||
:key="sitem[node_defaultProps.id]" |
|||
:defaultProps="node_defaultProps"> |
|||
</vrapile-node> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import vrapileNode from './vrapile-node.vue'; |
|||
export default { |
|||
name: 'vrapileNode', |
|||
// #ifdef MP-WEIXIN |
|||
components: { |
|||
vrapileNode |
|||
}, |
|||
// #endif |
|||
props: { |
|||
items: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
item: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
inject: [ |
|||
'defaultProps', |
|||
'divider', |
|||
'unfold', |
|||
'edit', |
|||
'onClickItem', |
|||
'addItem', |
|||
'editItem', |
|||
'onLongPress' |
|||
], |
|||
data() { |
|||
return { |
|||
node_defaultProps: this.defaultProps, |
|||
node_divider: this.divider, |
|||
node_unfold: this.unfold, |
|||
node_edit: this.edit, |
|||
node_onClickItem: this.onClickItem, |
|||
node_addItem: this.addItem, |
|||
node_editItem: this.editItem, |
|||
node_onLongPress: this.onLongPress |
|||
} |
|||
}, |
|||
methods: { |
|||
node_nodeClick() { |
|||
this.node_onClickItem(this.item); |
|||
if (this.item[this.node_defaultProps.children] && this.item[this.node_defaultProps.children].length > 0) { |
|||
this.node_unfold = !this.node_unfold; |
|||
} |
|||
}, |
|||
longPress() { |
|||
if(this.edit){ |
|||
this.node_onLongPress(this.item); |
|||
} |
|||
}, |
|||
node_addClick() { |
|||
this.node_addItem(this.item); |
|||
}, |
|||
node_editClick() { |
|||
this.node_editItem(this.item); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
@mixin animate2 { |
|||
-moz-transition: all .2s linear; |
|||
-webkit-transition: all .2s linear; |
|||
-o-transition: all .2s linear; |
|||
-ms-transition: all .2s linear; |
|||
transition: all .2s linear; |
|||
} |
|||
.vrapile-node-head{ |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
line-height: 60rpx; |
|||
} |
|||
.vrapile-node-head-left{ |
|||
display: flex; |
|||
align-items: center; |
|||
flex-basis: auto; |
|||
margin-top: 10rpx; |
|||
flex: 1; |
|||
|
|||
} |
|||
.vrapile-node-left-txt{ |
|||
font-size: 30rpx; |
|||
color: #222; |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 1; /* 这里是超出几行省略 */ |
|||
overflow: hidden; |
|||
} |
|||
.vrapile-node-left-txt-no-child{ |
|||
margin-left: 30rpx; |
|||
} |
|||
|
|||
.vrapile-node-left-icon{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
@include animate2; |
|||
transform: rotate(-90deg); |
|||
-ms-transform:rotate(-90deg); |
|||
-moz-transform:rotate(-90deg); |
|||
-webkit-transform: rotate(-90deg); |
|||
-o-transform:rotate(-90deg); |
|||
&.vrapile-node-rt45{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
transform: rotate(0deg); |
|||
-ms-transform:rotate(0deg); |
|||
-moz-transform:rotate(0deg); |
|||
-webkit-transform: rotate(0deg); |
|||
-o-transform:rotate(0deg); |
|||
} |
|||
&.vrapile-node-rt46{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
opacity: 0 |
|||
} |
|||
} |
|||
.vrapile-node-head-right{ |
|||
margin-right: 10rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
.vrapile-node-head-right-edit-icon{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
padding: 2rpx 15rpx; |
|||
} |
|||
|
|||
.vrapile-node-divider { |
|||
align-self: center; |
|||
margin: 0 20rpx; |
|||
height: 2rpx; |
|||
background-color: #f9f9f9; |
|||
} |
|||
.vrapile-node-content{ |
|||
padding-left: 30rpx; |
|||
} |
|||
</style> |
@ -0,0 +1,80 @@ |
|||
<template> |
|||
<view class="vrapile-tree"> |
|||
<vrapile-node |
|||
v-for="item in data" |
|||
:items="data" |
|||
:item="item" |
|||
:key="item[defaultProps.id]" |
|||
:defaultProps="defaultProps" |
|||
:divider="divider" |
|||
:unfold="unfold" |
|||
:edit="edit" |
|||
@add-item="addItem" |
|||
@edit-item="editItem"> |
|||
</vrapile-node> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import vrapileNode from './vrapile-node.vue'; |
|||
export default { |
|||
components:{ |
|||
vrapileNode |
|||
}, |
|||
props: { |
|||
data: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
defaultProps: { |
|||
type: Object, |
|||
default: () => { |
|||
return { |
|||
id: 'id', |
|||
children: 'children', |
|||
label : 'label' |
|||
} |
|||
} |
|||
}, |
|||
divider: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
unfold: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
edit: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
provide(){ |
|||
return { |
|||
defaultProps: this.defaultProps, |
|||
divider: this.divider, |
|||
unfold: this.unfold, |
|||
edit: this.edit, |
|||
onClickItem: this.onClickItem, |
|||
addItem: this.addItem, |
|||
editItem: this.editItem, |
|||
onLongPress: this.onLongPress |
|||
} |
|||
}, |
|||
methods: { |
|||
onClickItem(e) { |
|||
this.$emit('node-click', e); |
|||
}, |
|||
addItem(e) { |
|||
this.$emit('add-item', e); |
|||
}, |
|||
editItem(e) { |
|||
this.$emit('edit-item', e); |
|||
}, |
|||
onLongPress(e) { |
|||
this.$emit('long-press', e); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
@ -0,0 +1,97 @@ |
|||
{ |
|||
"id": "vrapile-tree", |
|||
"displayName": "简易树组件展示与操作", |
|||
"version": "1.0.8", |
|||
"description": "操作支持编辑/新增/长按,兼容vue2/vue3、完全兼容App/H5/微信小程序,易二次开发", |
|||
"keywords": [ |
|||
"简易树组件展示与操作" |
|||
], |
|||
"repository": "https://git.ninecloud.top/yuanlei/udemo-tree.git", |
|||
"engines": { |
|||
"HBuilderX": "^3.8.12", |
|||
"uni-app": "^4.06", |
|||
"uni-app-x": "^4.06" |
|||
}, |
|||
"dcloudext": { |
|||
"type": "component-vue", |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "642678614" |
|||
}, |
|||
"declaration": { |
|||
"ads": "无", |
|||
"data": "插件不采集任何数据", |
|||
"permissions": "无" |
|||
}, |
|||
"npmurl": "", |
|||
"darkmode": "x", |
|||
"i18n": "√", |
|||
"widescreen": "√" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "√", |
|||
"aliyun": "√", |
|||
"alipay": "√" |
|||
}, |
|||
"client": { |
|||
"uni-app": { |
|||
"vue": { |
|||
"vue2": "√", |
|||
"vue3": "√" |
|||
}, |
|||
"web": { |
|||
"safari": "√", |
|||
"chrome": "√" |
|||
}, |
|||
"app": { |
|||
"vue": "√", |
|||
"nvue": "√", |
|||
"android": "√", |
|||
"ios": "√", |
|||
"harmony": "√" |
|||
}, |
|||
"mp": { |
|||
"weixin": "√", |
|||
"alipay": "√", |
|||
"toutiao": "√", |
|||
"baidu": "√", |
|||
"kuaishou": "√", |
|||
"jd": "√", |
|||
"harmony": "√", |
|||
"qq": "√", |
|||
"lark": "√" |
|||
}, |
|||
"quickapp": { |
|||
"huawei": "√", |
|||
"union": "√" |
|||
} |
|||
}, |
|||
"uni-app-x": { |
|||
"web": { |
|||
"safari": "√", |
|||
"chrome": "√" |
|||
}, |
|||
"app": { |
|||
"android": "√", |
|||
"ios": "√", |
|||
"harmony": "√" |
|||
}, |
|||
"mp": { |
|||
"weixin": "√" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
@ -0,0 +1,122 @@ |
|||
## 引用样例 |
|||
|
|||
|
|||
``` javascript |
|||
<template> |
|||
<view class="vrapile-content-001"> |
|||
<view class="vrapile-content-001-tree"> |
|||
<vrapile-tree ref="vrapileTreeRef" :defaultProps="defaultProps" |
|||
:data="treeList" :divider="true" :unfold="true" |
|||
:edit="true" @node-click="nodeClick" @add-item="addNode" |
|||
@edit-item="editNode" @long-press="longPressNode"> |
|||
</vrapile-tree> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
treeList: [ |
|||
{ id: "A01", parentId: "0", label: "A01-全部", name: "全部", level: 1, lastFlag: 0, orderNum: 1, children: [ |
|||
{ id: "A01001", parentId: "A01", label: "A01001-架构师题库", name: "架构师题库", level: 2, lastFlag: 0, orderNum: 1, children: [ |
|||
{ id: "A01001001", parentId: "A01001", label: "A01001001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 11, children: []}, |
|||
{ id: "A01001002", parentId: "A01001", label: "A01001002-题库二", name: "题库二", level: 3, lastFlag: 1, orderNum: 12, children: []} |
|||
]}, |
|||
{ id: "A01003", parentId: "A01", label: "A01003-大数据AI题库", name: "大数据AI题库", level: 2, lastFlag: 0, orderNum: 13, children: [ |
|||
{ id: "A01003001", parentId: "A01003", label: "A01003001-题库一", name: "题库一", level: 3, lastFlag: 1, orderNum: 1, children: []} |
|||
]}, |
|||
{ id: "A01004", parentId: "A01", label: "A01004-驾照考试题库", name: "驾照考试题库", level: 2, lastFlag: 0, orderNum: 4, children: []}, |
|||
]} |
|||
], |
|||
|
|||
defaultProps: { id: "id", children: "children", label: "name" }, |
|||
}; |
|||
}, |
|||
onShow(){ |
|||
}, |
|||
methods: { |
|||
//节点单击事件 |
|||
nodeClick(e) { |
|||
console.log("单击事件:" + JSON.stringify(e)) |
|||
}, |
|||
//节点新增点击事件 |
|||
addNode(e) { |
|||
console.log("新增按钮点击事件:" + JSON.stringify(e)) |
|||
}, |
|||
//节点修改点击事件 |
|||
editNode(e) { |
|||
console.log("修改按钮点击事件:" + JSON.stringify(e)) |
|||
}, |
|||
//节点长按事件 |
|||
longPressNode(e) { |
|||
console.log("长按事件:" + JSON.stringify(e)) |
|||
}, |
|||
} |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.vrapile-content-001{ |
|||
padding: 0; |
|||
margin: 0; |
|||
width: 750rpx; |
|||
height: calc(100vh - 0px); |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.vrapile-content-001-tree{ |
|||
padding: 0rpx 10rpx 30rpx 10rpx; |
|||
background-color: #ffffff; |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
|||
``` |
|||
<br > |
|||
|
|||
## 功能说明 |
|||
|
|||
|
|||
* 入参 *data* :非必传,树数据结构列表,默认 *[]* |
|||
|
|||
* 入参 *defaultProps* :非必传,Json格式,关键字段对照,默认 *{ id: 'id', children: 'children', label : 'label' }* |
|||
``` javascript |
|||
如:部门树,主键deptId、名称deptName、子集child,则defaultProps需设为: |
|||
|
|||
{ id: "deptId", label : "deptName", children: "child" } |
|||
``` |
|||
|
|||
|
|||
* 入参 *divider* :非必传,分隔线,默认 *false* |
|||
|
|||
* 入参 *unfold* :非必传,是否展开,默认 *false* |
|||
|
|||
* 入参 *edit* :非必传,是否显示按钮,默认 *false* |
|||
|
|||
* 函数 *node-click* :单击,内容是Json数据体 |
|||
|
|||
* 函数 *add-item* :添加按钮,内容是Json数据体 |
|||
|
|||
* 函数 *edit-item* :编辑按钮,内容是Json数据体 |
|||
|
|||
* 函数 *long-press* :长按,内容是Json数据体 |
|||
|
|||
<br > |
|||
|
|||
注:<font color="red">所有入参和函数都是非必传,用到哪个实现哪个即可</font> |
|||
<br > |
|||
<br > |
|||
|
|||
## 演示说明 |
|||
|
|||
以下所有工程共用一个后端,账号互通 |
|||
<font color="gray">( *皆可用访客账号/密码:visitor/visitor* )</font> |
|||
|
|||
演示Demo: |
|||
<a href="https://www.ninecloud.top/udemo/tree/index.html" target="_blank">https://www.ninecloud.top/udemo/tree/index.html</a> |
|||
|
|||
演示微信小程序: |
|||
<font color="gray">*九云题库*</font> |
|||
|
|||
<img src="https://fs.ninecloud.top/uniapp/uquestion/qrcode.png" width="300"> |