Commit 0c2a7782 by Sweet Zhang

安装插件

parent a06a91cf
{
"dependencies": {
"echarts": "^5.3.3",
"jweixin-module": "^1.6.0"
}
}
## 1.0.1(2021-11-23)
- 优化 label、label-width 属性
## 1.0.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-combox](https://uniapp.dcloud.io/component/uniui/uni-combox)
## 0.1.0(2021-07-30)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.0.6(2021-05-12)
- 新增 组件示例地址
## 0.0.5(2021-04-21)
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
## 0.0.4(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 0.0.3(2021-02-04)
- 调整为uni_modules目录规范
<template>
<view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
<view v-if="label" class="uni-combox__label" :style="labelStyle">
<text>{{label}}</text>
</view>
<view class="uni-combox__input-box">
<input class="uni-combox__input" type="text" :placeholder="placeholder"
placeholder-class="uni-combox__input-plac" v-model="inputVal" @input="onInput" @focus="onFocus"
@blur="onBlur" />
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
</uni-icons>
</view>
<view class="uni-combox__selector" v-if="showSelector">
<view class="uni-popper__arrow"></view>
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
<text>{{emptyTips}}</text>
</view>
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index"
@click="onSelectorClick(index)">
<text>{{item}}</text>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
/**
* Combox 组合输入框
* @description 组合输入框一般用于既可以输入也可以选择的场景
* @tutorial https://ext.dcloud.net.cn/plugin?id=1261
* @property {String} label 左侧文字
* @property {String} labelWidth 左侧内容宽度
* @property {String} placeholder 输入框占位符
* @property {Array} candidates 候选项列表
* @property {String} emptyTips 筛选结果为空时显示的文字
* @property {String} value 组合框的值
*/
export default {
name: 'uniCombox',
emits: ['input', 'update:modelValue'],
props: {
border: {
type: Boolean,
default: true
},
label: {
type: String,
default: ''
},
labelWidth: {
type: String,
default: 'auto'
},
placeholder: {
type: String,
default: ''
},
candidates: {
type: Array,
default () {
return []
}
},
emptyTips: {
type: String,
default: '无匹配项'
},
// #ifndef VUE3
value: {
type: [String, Number],
default: ''
},
// #endif
// #ifdef VUE3
modelValue: {
type: [String, Number],
default: ''
},
// #endif
},
data() {
return {
showSelector: false,
inputVal: ''
}
},
computed: {
labelStyle() {
if (this.labelWidth === 'auto') {
return ""
}
return `width: ${this.labelWidth}`
},
filterCandidates() {
return this.candidates.filter((item) => {
return item.toString().indexOf(this.inputVal) > -1
})
},
filterCandidatesLength() {
return this.filterCandidates.length
}
},
watch: {
// #ifndef VUE3
value: {
handler(newVal) {
this.inputVal = newVal
},
immediate: true
},
// #endif
// #ifdef VUE3
modelValue: {
handler(newVal) {
this.inputVal = newVal
},
immediate: true
},
// #endif
},
methods: {
toggleSelector() {
this.showSelector = !this.showSelector
},
onFocus() {
this.showSelector = true
},
onBlur() {
setTimeout(() => {
this.showSelector = false
}, 153)
},
onSelectorClick(index) {
this.inputVal = this.filterCandidates[index]
this.showSelector = false
this.$emit('input', this.inputVal)
this.$emit('update:modelValue', this.inputVal)
},
onInput() {
setTimeout(() => {
this.$emit('input', this.inputVal)
this.$emit('update:modelValue', this.inputVal)
})
}
}
}
</script>
<style lang="scss" scoped>
.uni-combox {
font-size: 14px;
border: 1px solid #DCDFE6;
border-radius: 4px;
padding: 6px 10px;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
// height: 40px;
flex-direction: row;
align-items: center;
// border-bottom: solid 1px #DDDDDD;
}
.uni-combox__label {
font-size: 16px;
line-height: 22px;
padding-right: 10px;
color: #999999;
}
.uni-combox__input-box {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
}
.uni-combox__input {
flex: 1;
font-size: 14px;
height: 22px;
line-height: 22px;
}
.uni-combox__input-plac {
font-size: 14px;
color: #999;
}
.uni-combox__selector {
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
position: absolute;
top: calc(100% + 12px);
left: 0;
width: 100%;
background-color: #FFFFFF;
border: 1px solid #EBEEF5;
border-radius: 6px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
z-index: 2;
padding: 4px 0;
}
.uni-combox__selector-scroll {
/* #ifndef APP-NVUE */
max-height: 200px;
box-sizing: border-box;
/* #endif */
}
.uni-combox__selector-empty,
.uni-combox__selector-item {
/* #ifndef APP-NVUE */
display: flex;
cursor: pointer;
/* #endif */
line-height: 36px;
font-size: 14px;
text-align: center;
// border-bottom: solid 1px #DDDDDD;
padding: 0px 10px;
}
.uni-combox__selector-item:hover {
background-color: #f9f9f9;
}
.uni-combox__selector-empty:last-child,
.uni-combox__selector-item:last-child {
/* #ifndef APP-NVUE */
border-bottom: none;
/* #endif */
}
// picker 弹出层通用的指示小三角
.uni-popper__arrow,
.uni-popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 6px;
}
.uni-popper__arrow {
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
top: -6px;
left: 10%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.uni-popper__arrow::after {
content: " ";
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
.uni-combox__no-border {
border: none;
}
</style>
{
"id": "uni-combox",
"displayName": "uni-combox 组合框",
"version": "1.0.1",
"description": "可以选择也可以输入的表单项 ",
"keywords": [
"uni-ui",
"uniui",
"combox",
"组合框",
"select"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"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": [
"uni-scss",
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"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"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## Combox 组合框
> **组件名:uni-combox**
> 代码块: `uCombox`
组合框组件。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-combox)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
## 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目录规范
export default {
"id": "2852637",
"name": "uniui图标库",
"font_family": "uniicons",
"css_prefix_text": "uniui-",
"description": "",
"glyphs": [
{
"icon_id": "25027049",
"name": "yanse",
"font_class": "color",
"unicode": "e6cf",
"unicode_decimal": 59087
},
{
"icon_id": "25027048",
"name": "wallet",
"font_class": "wallet",
"unicode": "e6b1",
"unicode_decimal": 59057
},
{
"icon_id": "25015720",
"name": "settings-filled",
"font_class": "settings-filled",
"unicode": "e6ce",
"unicode_decimal": 59086
},
{
"icon_id": "25015434",
"name": "shimingrenzheng-filled",
"font_class": "auth-filled",
"unicode": "e6cc",
"unicode_decimal": 59084
},
{
"icon_id": "24934246",
"name": "shop-filled",
"font_class": "shop-filled",
"unicode": "e6cd",
"unicode_decimal": 59085
},
{
"icon_id": "24934159",
"name": "staff-filled-01",
"font_class": "staff-filled",
"unicode": "e6cb",
"unicode_decimal": 59083
},
{
"icon_id": "24932461",
"name": "VIP-filled",
"font_class": "vip-filled",
"unicode": "e6c6",
"unicode_decimal": 59078
},
{
"icon_id": "24932462",
"name": "plus_circle_fill",
"font_class": "plus-filled",
"unicode": "e6c7",
"unicode_decimal": 59079
},
{
"icon_id": "24932463",
"name": "folder_add-filled",
"font_class": "folder-add-filled",
"unicode": "e6c8",
"unicode_decimal": 59080
},
{
"icon_id": "24932464",
"name": "yanse-filled",
"font_class": "color-filled",
"unicode": "e6c9",
"unicode_decimal": 59081
},
{
"icon_id": "24932465",
"name": "tune-filled",
"font_class": "tune-filled",
"unicode": "e6ca",
"unicode_decimal": 59082
},
{
"icon_id": "24932455",
"name": "a-rilidaka-filled",
"font_class": "calendar-filled",
"unicode": "e6c0",
"unicode_decimal": 59072
},
{
"icon_id": "24932456",
"name": "notification-filled",
"font_class": "notification-filled",
"unicode": "e6c1",
"unicode_decimal": 59073
},
{
"icon_id": "24932457",
"name": "wallet-filled",
"font_class": "wallet-filled",
"unicode": "e6c2",
"unicode_decimal": 59074
},
{
"icon_id": "24932458",
"name": "paihangbang-filled",
"font_class": "medal-filled",
"unicode": "e6c3",
"unicode_decimal": 59075
},
{
"icon_id": "24932459",
"name": "gift-filled",
"font_class": "gift-filled",
"unicode": "e6c4",
"unicode_decimal": 59076
},
{
"icon_id": "24932460",
"name": "fire-filled",
"font_class": "fire-filled",
"unicode": "e6c5",
"unicode_decimal": 59077
},
{
"icon_id": "24928001",
"name": "refreshempty",
"font_class": "refreshempty",
"unicode": "e6bf",
"unicode_decimal": 59071
},
{
"icon_id": "24926853",
"name": "location-ellipse",
"font_class": "location-filled",
"unicode": "e6af",
"unicode_decimal": 59055
},
{
"icon_id": "24926735",
"name": "person-filled",
"font_class": "person-filled",
"unicode": "e69d",
"unicode_decimal": 59037
},
{
"icon_id": "24926703",
"name": "personadd-filled",
"font_class": "personadd-filled",
"unicode": "e698",
"unicode_decimal": 59032
},
{
"icon_id": "24923351",
"name": "back",
"font_class": "back",
"unicode": "e6b9",
"unicode_decimal": 59065
},
{
"icon_id": "24923352",
"name": "forward",
"font_class": "forward",
"unicode": "e6ba",
"unicode_decimal": 59066
},
{
"icon_id": "24923353",
"name": "arrowthinright",
"font_class": "arrow-right",
"unicode": "e6bb",
"unicode_decimal": 59067
},
{
"icon_id": "24923353",
"name": "arrowthinright",
"font_class": "arrowthinright",
"unicode": "e6bb",
"unicode_decimal": 59067
},
{
"icon_id": "24923354",
"name": "arrowthinleft",
"font_class": "arrow-left",
"unicode": "e6bc",
"unicode_decimal": 59068
},
{
"icon_id": "24923354",
"name": "arrowthinleft",
"font_class": "arrowthinleft",
"unicode": "e6bc",
"unicode_decimal": 59068
},
{
"icon_id": "24923355",
"name": "arrowthinup",
"font_class": "arrow-up",
"unicode": "e6bd",
"unicode_decimal": 59069
},
{
"icon_id": "24923355",
"name": "arrowthinup",
"font_class": "arrowthinup",
"unicode": "e6bd",
"unicode_decimal": 59069
},
{
"icon_id": "24923356",
"name": "arrowthindown",
"font_class": "arrow-down",
"unicode": "e6be",
"unicode_decimal": 59070
},{
"icon_id": "24923356",
"name": "arrowthindown",
"font_class": "arrowthindown",
"unicode": "e6be",
"unicode_decimal": 59070
},
{
"icon_id": "24923349",
"name": "arrowdown",
"font_class": "bottom",
"unicode": "e6b8",
"unicode_decimal": 59064
},{
"icon_id": "24923349",
"name": "arrowdown",
"font_class": "arrowdown",
"unicode": "e6b8",
"unicode_decimal": 59064
},
{
"icon_id": "24923346",
"name": "arrowright",
"font_class": "right",
"unicode": "e6b5",
"unicode_decimal": 59061
},
{
"icon_id": "24923346",
"name": "arrowright",
"font_class": "arrowright",
"unicode": "e6b5",
"unicode_decimal": 59061
},
{
"icon_id": "24923347",
"name": "arrowup",
"font_class": "top",
"unicode": "e6b6",
"unicode_decimal": 59062
},
{
"icon_id": "24923347",
"name": "arrowup",
"font_class": "arrowup",
"unicode": "e6b6",
"unicode_decimal": 59062
},
{
"icon_id": "24923348",
"name": "arrowleft",
"font_class": "left",
"unicode": "e6b7",
"unicode_decimal": 59063
},
{
"icon_id": "24923348",
"name": "arrowleft",
"font_class": "arrowleft",
"unicode": "e6b7",
"unicode_decimal": 59063
},
{
"icon_id": "24923334",
"name": "eye",
"font_class": "eye",
"unicode": "e651",
"unicode_decimal": 58961
},
{
"icon_id": "24923335",
"name": "eye-filled",
"font_class": "eye-filled",
"unicode": "e66a",
"unicode_decimal": 58986
},
{
"icon_id": "24923336",
"name": "eye-slash",
"font_class": "eye-slash",
"unicode": "e6b3",
"unicode_decimal": 59059
},
{
"icon_id": "24923337",
"name": "eye-slash-filled",
"font_class": "eye-slash-filled",
"unicode": "e6b4",
"unicode_decimal": 59060
},
{
"icon_id": "24923305",
"name": "info-filled",
"font_class": "info-filled",
"unicode": "e649",
"unicode_decimal": 58953
},
{
"icon_id": "24923299",
"name": "reload-01",
"font_class": "reload",
"unicode": "e6b2",
"unicode_decimal": 59058
},
{
"icon_id": "24923195",
"name": "mic_slash_fill",
"font_class": "micoff-filled",
"unicode": "e6b0",
"unicode_decimal": 59056
},
{
"icon_id": "24923165",
"name": "map-pin-ellipse",
"font_class": "map-pin-ellipse",
"unicode": "e6ac",
"unicode_decimal": 59052
},
{
"icon_id": "24923166",
"name": "map-pin",
"font_class": "map-pin",
"unicode": "e6ad",
"unicode_decimal": 59053
},
{
"icon_id": "24923167",
"name": "location",
"font_class": "location",
"unicode": "e6ae",
"unicode_decimal": 59054
},
{
"icon_id": "24923064",
"name": "starhalf",
"font_class": "starhalf",
"unicode": "e683",
"unicode_decimal": 59011
},
{
"icon_id": "24923065",
"name": "star",
"font_class": "star",
"unicode": "e688",
"unicode_decimal": 59016
},
{
"icon_id": "24923066",
"name": "star-filled",
"font_class": "star-filled",
"unicode": "e68f",
"unicode_decimal": 59023
},
{
"icon_id": "24899646",
"name": "a-rilidaka",
"font_class": "calendar",
"unicode": "e6a0",
"unicode_decimal": 59040
},
{
"icon_id": "24899647",
"name": "fire",
"font_class": "fire",
"unicode": "e6a1",
"unicode_decimal": 59041
},
{
"icon_id": "24899648",
"name": "paihangbang",
"font_class": "medal",
"unicode": "e6a2",
"unicode_decimal": 59042
},
{
"icon_id": "24899649",
"name": "font",
"font_class": "font",
"unicode": "e6a3",
"unicode_decimal": 59043
},
{
"icon_id": "24899650",
"name": "gift",
"font_class": "gift",
"unicode": "e6a4",
"unicode_decimal": 59044
},
{
"icon_id": "24899651",
"name": "link",
"font_class": "link",
"unicode": "e6a5",
"unicode_decimal": 59045
},
{
"icon_id": "24899652",
"name": "notification",
"font_class": "notification",
"unicode": "e6a6",
"unicode_decimal": 59046
},
{
"icon_id": "24899653",
"name": "staff",
"font_class": "staff",
"unicode": "e6a7",
"unicode_decimal": 59047
},
{
"icon_id": "24899654",
"name": "VIP",
"font_class": "vip",
"unicode": "e6a8",
"unicode_decimal": 59048
},
{
"icon_id": "24899655",
"name": "folder_add",
"font_class": "folder-add",
"unicode": "e6a9",
"unicode_decimal": 59049
},
{
"icon_id": "24899656",
"name": "tune",
"font_class": "tune",
"unicode": "e6aa",
"unicode_decimal": 59050
},
{
"icon_id": "24899657",
"name": "shimingrenzheng",
"font_class": "auth",
"unicode": "e6ab",
"unicode_decimal": 59051
},
{
"icon_id": "24899565",
"name": "person",
"font_class": "person",
"unicode": "e699",
"unicode_decimal": 59033
},
{
"icon_id": "24899566",
"name": "email-filled",
"font_class": "email-filled",
"unicode": "e69a",
"unicode_decimal": 59034
},
{
"icon_id": "24899567",
"name": "phone-filled",
"font_class": "phone-filled",
"unicode": "e69b",
"unicode_decimal": 59035
},
{
"icon_id": "24899568",
"name": "phone",
"font_class": "phone",
"unicode": "e69c",
"unicode_decimal": 59036
},
{
"icon_id": "24899570",
"name": "email",
"font_class": "email",
"unicode": "e69e",
"unicode_decimal": 59038
},
{
"icon_id": "24899571",
"name": "personadd",
"font_class": "personadd",
"unicode": "e69f",
"unicode_decimal": 59039
},
{
"icon_id": "24899558",
"name": "chatboxes-filled",
"font_class": "chatboxes-filled",
"unicode": "e692",
"unicode_decimal": 59026
},
{
"icon_id": "24899559",
"name": "contact",
"font_class": "contact",
"unicode": "e693",
"unicode_decimal": 59027
},
{
"icon_id": "24899560",
"name": "chatbubble-filled",
"font_class": "chatbubble-filled",
"unicode": "e694",
"unicode_decimal": 59028
},
{
"icon_id": "24899561",
"name": "contact-filled",
"font_class": "contact-filled",
"unicode": "e695",
"unicode_decimal": 59029
},
{
"icon_id": "24899562",
"name": "chatboxes",
"font_class": "chatboxes",
"unicode": "e696",
"unicode_decimal": 59030
},
{
"icon_id": "24899563",
"name": "chatbubble",
"font_class": "chatbubble",
"unicode": "e697",
"unicode_decimal": 59031
},
{
"icon_id": "24881290",
"name": "upload-filled",
"font_class": "upload-filled",
"unicode": "e68e",
"unicode_decimal": 59022
},
{
"icon_id": "24881292",
"name": "upload",
"font_class": "upload",
"unicode": "e690",
"unicode_decimal": 59024
},
{
"icon_id": "24881293",
"name": "weixin",
"font_class": "weixin",
"unicode": "e691",
"unicode_decimal": 59025
},
{
"icon_id": "24881274",
"name": "compose",
"font_class": "compose",
"unicode": "e67f",
"unicode_decimal": 59007
},
{
"icon_id": "24881275",
"name": "qq",
"font_class": "qq",
"unicode": "e680",
"unicode_decimal": 59008
},
{
"icon_id": "24881276",
"name": "download-filled",
"font_class": "download-filled",
"unicode": "e681",
"unicode_decimal": 59009
},
{
"icon_id": "24881277",
"name": "pengyouquan",
"font_class": "pyq",
"unicode": "e682",
"unicode_decimal": 59010
},
{
"icon_id": "24881279",
"name": "sound",
"font_class": "sound",
"unicode": "e684",
"unicode_decimal": 59012
},
{
"icon_id": "24881280",
"name": "trash-filled",
"font_class": "trash-filled",
"unicode": "e685",
"unicode_decimal": 59013
},
{
"icon_id": "24881281",
"name": "sound-filled",
"font_class": "sound-filled",
"unicode": "e686",
"unicode_decimal": 59014
},
{
"icon_id": "24881282",
"name": "trash",
"font_class": "trash",
"unicode": "e687",
"unicode_decimal": 59015
},
{
"icon_id": "24881284",
"name": "videocam-filled",
"font_class": "videocam-filled",
"unicode": "e689",
"unicode_decimal": 59017
},
{
"icon_id": "24881285",
"name": "spinner-cycle",
"font_class": "spinner-cycle",
"unicode": "e68a",
"unicode_decimal": 59018
},
{
"icon_id": "24881286",
"name": "weibo",
"font_class": "weibo",
"unicode": "e68b",
"unicode_decimal": 59019
},
{
"icon_id": "24881288",
"name": "videocam",
"font_class": "videocam",
"unicode": "e68c",
"unicode_decimal": 59020
},
{
"icon_id": "24881289",
"name": "download",
"font_class": "download",
"unicode": "e68d",
"unicode_decimal": 59021
},
{
"icon_id": "24879601",
"name": "help",
"font_class": "help",
"unicode": "e679",
"unicode_decimal": 59001
},
{
"icon_id": "24879602",
"name": "navigate-filled",
"font_class": "navigate-filled",
"unicode": "e67a",
"unicode_decimal": 59002
},
{
"icon_id": "24879603",
"name": "plusempty",
"font_class": "plusempty",
"unicode": "e67b",
"unicode_decimal": 59003
},
{
"icon_id": "24879604",
"name": "smallcircle",
"font_class": "smallcircle",
"unicode": "e67c",
"unicode_decimal": 59004
},
{
"icon_id": "24879605",
"name": "minus-filled",
"font_class": "minus-filled",
"unicode": "e67d",
"unicode_decimal": 59005
},
{
"icon_id": "24879606",
"name": "micoff",
"font_class": "micoff",
"unicode": "e67e",
"unicode_decimal": 59006
},
{
"icon_id": "24879588",
"name": "closeempty",
"font_class": "closeempty",
"unicode": "e66c",
"unicode_decimal": 58988
},
{
"icon_id": "24879589",
"name": "clear",
"font_class": "clear",
"unicode": "e66d",
"unicode_decimal": 58989
},
{
"icon_id": "24879590",
"name": "navigate",
"font_class": "navigate",
"unicode": "e66e",
"unicode_decimal": 58990
},
{
"icon_id": "24879591",
"name": "minus",
"font_class": "minus",
"unicode": "e66f",
"unicode_decimal": 58991
},
{
"icon_id": "24879592",
"name": "image",
"font_class": "image",
"unicode": "e670",
"unicode_decimal": 58992
},
{
"icon_id": "24879593",
"name": "mic",
"font_class": "mic",
"unicode": "e671",
"unicode_decimal": 58993
},
{
"icon_id": "24879594",
"name": "paperplane",
"font_class": "paperplane",
"unicode": "e672",
"unicode_decimal": 58994
},
{
"icon_id": "24879595",
"name": "close",
"font_class": "close",
"unicode": "e673",
"unicode_decimal": 58995
},
{
"icon_id": "24879596",
"name": "help-filled",
"font_class": "help-filled",
"unicode": "e674",
"unicode_decimal": 58996
},
{
"icon_id": "24879597",
"name": "plus-filled",
"font_class": "paperplane-filled",
"unicode": "e675",
"unicode_decimal": 58997
},
{
"icon_id": "24879598",
"name": "plus",
"font_class": "plus",
"unicode": "e676",
"unicode_decimal": 58998
},
{
"icon_id": "24879599",
"name": "mic-filled",
"font_class": "mic-filled",
"unicode": "e677",
"unicode_decimal": 58999
},
{
"icon_id": "24879600",
"name": "image-filled",
"font_class": "image-filled",
"unicode": "e678",
"unicode_decimal": 59000
},
{
"icon_id": "24855900",
"name": "locked-filled",
"font_class": "locked-filled",
"unicode": "e668",
"unicode_decimal": 58984
},
{
"icon_id": "24855901",
"name": "info",
"font_class": "info",
"unicode": "e669",
"unicode_decimal": 58985
},
{
"icon_id": "24855903",
"name": "locked",
"font_class": "locked",
"unicode": "e66b",
"unicode_decimal": 58987
},
{
"icon_id": "24855884",
"name": "camera-filled",
"font_class": "camera-filled",
"unicode": "e658",
"unicode_decimal": 58968
},
{
"icon_id": "24855885",
"name": "chat-filled",
"font_class": "chat-filled",
"unicode": "e659",
"unicode_decimal": 58969
},
{
"icon_id": "24855886",
"name": "camera",
"font_class": "camera",
"unicode": "e65a",
"unicode_decimal": 58970
},
{
"icon_id": "24855887",
"name": "circle",
"font_class": "circle",
"unicode": "e65b",
"unicode_decimal": 58971
},
{
"icon_id": "24855888",
"name": "checkmarkempty",
"font_class": "checkmarkempty",
"unicode": "e65c",
"unicode_decimal": 58972
},
{
"icon_id": "24855889",
"name": "chat",
"font_class": "chat",
"unicode": "e65d",
"unicode_decimal": 58973
},
{
"icon_id": "24855890",
"name": "circle-filled",
"font_class": "circle-filled",
"unicode": "e65e",
"unicode_decimal": 58974
},
{
"icon_id": "24855891",
"name": "flag",
"font_class": "flag",
"unicode": "e65f",
"unicode_decimal": 58975
},
{
"icon_id": "24855892",
"name": "flag-filled",
"font_class": "flag-filled",
"unicode": "e660",
"unicode_decimal": 58976
},
{
"icon_id": "24855893",
"name": "gear-filled",
"font_class": "gear-filled",
"unicode": "e661",
"unicode_decimal": 58977
},
{
"icon_id": "24855894",
"name": "home",
"font_class": "home",
"unicode": "e662",
"unicode_decimal": 58978
},
{
"icon_id": "24855895",
"name": "home-filled",
"font_class": "home-filled",
"unicode": "e663",
"unicode_decimal": 58979
},
{
"icon_id": "24855896",
"name": "gear",
"font_class": "gear",
"unicode": "e664",
"unicode_decimal": 58980
},
{
"icon_id": "24855897",
"name": "smallcircle-filled",
"font_class": "smallcircle-filled",
"unicode": "e665",
"unicode_decimal": 58981
},
{
"icon_id": "24855898",
"name": "map-filled",
"font_class": "map-filled",
"unicode": "e666",
"unicode_decimal": 58982
},
{
"icon_id": "24855899",
"name": "map",
"font_class": "map",
"unicode": "e667",
"unicode_decimal": 58983
},
{
"icon_id": "24855825",
"name": "refresh-filled",
"font_class": "refresh-filled",
"unicode": "e656",
"unicode_decimal": 58966
},
{
"icon_id": "24855826",
"name": "refresh",
"font_class": "refresh",
"unicode": "e657",
"unicode_decimal": 58967
},
{
"icon_id": "24855808",
"name": "cloud-upload",
"font_class": "cloud-upload",
"unicode": "e645",
"unicode_decimal": 58949
},
{
"icon_id": "24855809",
"name": "cloud-download-filled",
"font_class": "cloud-download-filled",
"unicode": "e646",
"unicode_decimal": 58950
},
{
"icon_id": "24855810",
"name": "cloud-download",
"font_class": "cloud-download",
"unicode": "e647",
"unicode_decimal": 58951
},
{
"icon_id": "24855811",
"name": "cloud-upload-filled",
"font_class": "cloud-upload-filled",
"unicode": "e648",
"unicode_decimal": 58952
},
{
"icon_id": "24855813",
"name": "redo",
"font_class": "redo",
"unicode": "e64a",
"unicode_decimal": 58954
},
{
"icon_id": "24855814",
"name": "images-filled",
"font_class": "images-filled",
"unicode": "e64b",
"unicode_decimal": 58955
},
{
"icon_id": "24855815",
"name": "undo-filled",
"font_class": "undo-filled",
"unicode": "e64c",
"unicode_decimal": 58956
},
{
"icon_id": "24855816",
"name": "more",
"font_class": "more",
"unicode": "e64d",
"unicode_decimal": 58957
},
{
"icon_id": "24855817",
"name": "more-filled",
"font_class": "more-filled",
"unicode": "e64e",
"unicode_decimal": 58958
},
{
"icon_id": "24855818",
"name": "undo",
"font_class": "undo",
"unicode": "e64f",
"unicode_decimal": 58959
},
{
"icon_id": "24855819",
"name": "images",
"font_class": "images",
"unicode": "e650",
"unicode_decimal": 58960
},
{
"icon_id": "24855821",
"name": "paperclip",
"font_class": "paperclip",
"unicode": "e652",
"unicode_decimal": 58962
},
{
"icon_id": "24855822",
"name": "settings",
"font_class": "settings",
"unicode": "e653",
"unicode_decimal": 58963
},
{
"icon_id": "24855823",
"name": "search",
"font_class": "search",
"unicode": "e654",
"unicode_decimal": 58964
},
{
"icon_id": "24855824",
"name": "redo-filled",
"font_class": "redo-filled",
"unicode": "e655",
"unicode_decimal": 58965
},
{
"icon_id": "24841702",
"name": "list",
"font_class": "list",
"unicode": "e644",
"unicode_decimal": 58948
},
{
"icon_id": "24841489",
"name": "mail-open-filled",
"font_class": "mail-open-filled",
"unicode": "e63a",
"unicode_decimal": 58938
},
{
"icon_id": "24841491",
"name": "hand-thumbsdown-filled",
"font_class": "hand-down-filled",
"unicode": "e63c",
"unicode_decimal": 58940
},
{
"icon_id": "24841492",
"name": "hand-thumbsdown",
"font_class": "hand-down",
"unicode": "e63d",
"unicode_decimal": 58941
},
{
"icon_id": "24841493",
"name": "hand-thumbsup-filled",
"font_class": "hand-up-filled",
"unicode": "e63e",
"unicode_decimal": 58942
},
{
"icon_id": "24841494",
"name": "hand-thumbsup",
"font_class": "hand-up",
"unicode": "e63f",
"unicode_decimal": 58943
},
{
"icon_id": "24841496",
"name": "heart-filled",
"font_class": "heart-filled",
"unicode": "e641",
"unicode_decimal": 58945
},
{
"icon_id": "24841498",
"name": "mail-open",
"font_class": "mail-open",
"unicode": "e643",
"unicode_decimal": 58947
},
{
"icon_id": "24841488",
"name": "heart",
"font_class": "heart",
"unicode": "e639",
"unicode_decimal": 58937
},
{
"icon_id": "24839963",
"name": "loop",
"font_class": "loop",
"unicode": "e633",
"unicode_decimal": 58931
},
{
"icon_id": "24839866",
"name": "pulldown",
"font_class": "pulldown",
"unicode": "e632",
"unicode_decimal": 58930
},
{
"icon_id": "24813798",
"name": "scan",
"font_class": "scan",
"unicode": "e62a",
"unicode_decimal": 58922
},
{
"icon_id": "24813786",
"name": "bars",
"font_class": "bars",
"unicode": "e627",
"unicode_decimal": 58919
},
{
"icon_id": "24813788",
"name": "cart-filled",
"font_class": "cart-filled",
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "24813790",
"name": "checkbox",
"font_class": "checkbox",
"unicode": "e62b",
"unicode_decimal": 58923
},
{
"icon_id": "24813791",
"name": "checkbox-filled",
"font_class": "checkbox-filled",
"unicode": "e62c",
"unicode_decimal": 58924
},
{
"icon_id": "24813794",
"name": "shop",
"font_class": "shop",
"unicode": "e62f",
"unicode_decimal": 58927
},
{
"icon_id": "24813795",
"name": "headphones",
"font_class": "headphones",
"unicode": "e630",
"unicode_decimal": 58928
},
{
"icon_id": "24813796",
"name": "cart",
"font_class": "cart",
"unicode": "e631",
"unicode_decimal": 58929
}
]
}
<template>
<!-- #ifdef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
<!-- #endif -->
</template>
<script>
import icons from './icons.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: ''
}
},
data() {
return {
icons: icons.glyphs
}
},
computed:{
unicode(){
let code = this.icons.find(v=>v.font_class === this.type)
if(code){
return unescape(`%u${code.unicode}`)
}
return ''
},
iconSize(){
return getVal(this.size)
}
},
methods: {
_onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
@import './uniicons.css';
@font-face {
font-family: uniicons;
src: url('./uniicons.ttf') format('truetype');
}
/* #endif */
.uni-icons {
font-family: uniicons;
text-decoration: none;
text-align: center;
}
</style>
.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-gift-filled:before {
content: "\e6c4";
}
.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-back:before {
content: "\e6b9";
}
.uniui-forward:before {
content: "\e6ba";
}
.uniui-arrow-right:before {
content: "\e6bb";
}
.uniui-arrowthinright:before {
content: "\e6bb";
}
.uniui-arrow-left:before {
content: "\e6bc";
}
.uniui-arrowthinleft:before {
content: "\e6bc";
}
.uniui-arrow-up:before {
content: "\e6bd";
}
.uniui-arrowthinup:before {
content: "\e6bd";
}
.uniui-arrow-down:before {
content: "\e6be";
}
.uniui-arrowthindown:before {
content: "\e6be";
}
.uniui-bottom:before {
content: "\e6b8";
}
.uniui-arrowdown:before {
content: "\e6b8";
}
.uniui-right:before {
content: "\e6b5";
}
.uniui-arrowright:before {
content: "\e6b5";
}
.uniui-top:before {
content: "\e6b6";
}
.uniui-arrowup:before {
content: "\e6b6";
}
.uniui-left:before {
content: "\e6b7";
}
.uniui-arrowleft:before {
content: "\e6b7";
}
.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-cart-filled:before {
content: "\e629";
}
.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";
}
{
"id": "uni-icons",
"displayName": "uni-icons 图标",
"version": "1.3.5",
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
"keywords": [
"uni-ui",
"uniui",
"icon",
"图标"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.2.14"
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"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": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "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"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## Icons 图标
> **组件名:uni-icons**
> 代码块: `uIcons`
用于展示 icons 图标 。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
## 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
@import './styles/index.scss';
{
"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"
}
}
}
}
}
`uni-sass``uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
@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';
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
// 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;
}
@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)
}
}
}
}
@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);
}
}
}
}
\ No newline at end of file
/* #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 */
@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 */
}
// @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;
// 合并 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;
};
// 间距基础倍数
$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);
@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);
## 2.0.2(2021-12-16)
修复在某些情况下报:`Cannot read property 'hide' of undefined`的问题
## 2.0.1(2021-11-29)
修改错误的scene值WXSenceTimeline(分享到朋友圈)更正为WXSceneTimeline
## 2.0.0(2021-10-14)
支持监听返回操作(如:物理返回,全面屏手机侧滑)关闭分享弹窗
## 1.0.6(2021-08-25)
兼容vue3
## 1.0.5(2021-08-05)
优化代码实现,修改原来用`eval()`函数实现的逻辑
## 1.0.4(2021-06-07)
为符合苹果应用市场的审核,只显示存在对应的分享客户端的选项。如:配置包含微信分享,但是用户手机上并没有安装微信,就不显示微信分享。
## 1.0.2(2021-05-06)
修复错误的提示:“打包时未添加oauth模块”
## 1.0.1(2021-04-30)
新增完整示例
## 1.0.0(2021-04-28)
第1版发布
var nvMask, nvImageMenu;
class NvImageMenu {
constructor(arg) {
this.isShow = false
}
show({
list,
cancelText
}, callback) {
if (!list) {
list = [{
"img": "/static/sharemenu/wechatfriend.png",
"text": "图标文字"
}]
}
//以下为计算菜单的nview绘制布局,为固定算法,使用者无关关心
var screenWidth = plus.screen.resolutionWidth
//以360px宽度屏幕为例,上下左右边距及2排按钮边距留25像素,图标宽度55像素,同行图标间的间距在360宽的屏幕是30px,但需要动态计算,以此原则计算4列图标分别的left位置
//图标下的按钮文字距离图标5像素,文字大小12像素
//底部取消按钮高度固定为44px
//TODO 未处理横屏和pad,这些情况6个图标应该一排即可
var margin = 20,
iconWidth = 60,
icontextSpace = 5,
textHeight = 12
var left1 = margin / 360 * screenWidth
var iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距,再减去4个图标的宽度,就是3个同行图标的间距
if (iconSpace <= 5) { //屏幕过窄时,缩小边距和图标大小,再算一次
margin = 15
iconWidth = 40
left1 = margin / 360 * screenWidth
iconSpace = (screenWidth - (left1 * 2) - (iconWidth * 4)) / 3 //屏幕宽度减去左右留白间距,再减去4个图标的宽度,就是3个同行图标的间距
}
var left2 = left1 + iconWidth + iconSpace
var left3 = left1 + (iconWidth + iconSpace) * 2
var left4 = left1 + (iconWidth + iconSpace) * 3
var top1 = left1
var top2 = top1 + iconWidth + icontextSpace + textHeight + left1
const TOP = {
top1,
top2
},
LEFT = {
left1,
left2,
left3,
left4
};
nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
top: '0px',
left: '0px',
height: '100%',
width: '100%',
backgroundColor: 'rgba(0,0,0,0.2)'
});
nvImageMenu = new plus.nativeObj.View("nvImageMenu", { //创建底部图标菜单
bottom: '0px',
left: '0px',
height: (iconWidth + textHeight + 2 * margin) * Math.ceil(list.length / 4) + 44 +
'px', //'264px',
width: '100%',
backgroundColor: 'rgb(255,255,255)'
});
nvMask.addEventListener("click", () => { //处理遮罩层点击
// console.log('处理遮罩层点击');
this.hide()
callback({
event: "clickMask"
})
})
let myList = []
list.forEach((item, i) => {
myList.push({
tag: 'img',
src: item.img,
position: {
top: TOP['top' + (parseInt(i / 4) + 1)],
left: LEFT['left' + (1 + i % 4)],
width: iconWidth,
height: iconWidth
}
})
myList.push({
tag: 'font',
text: item.text,
textStyles: {
size: textHeight
},
position: {
top: TOP['top' + (parseInt(i / 4) + 1)] + iconWidth + icontextSpace,
left: LEFT['left' + (1 + i % 4)],
width: iconWidth,
height: textHeight
}
})
})
//绘制底部图标菜单的内容
nvImageMenu.draw([{
tag: 'rect', //菜单顶部的分割灰线
color: '#e7e7e7',
position: {
top: '0px',
height: '1px'
}
},
{
tag: 'font',
text: cancelText, //底部取消按钮的文字
textStyles: {
size: '14px'
},
position: {
bottom: '0px',
height: '44px'
}
},
{
tag: 'rect', //底部取消按钮的顶部边线
color: '#e7e7e7',
position: {
bottom: '45px',
height: '1px'
}
},
...myList
])
nvMask.show()
nvImageMenu.show()
// 开始动画
/*
plus.nativeObj.View.startAnimation({
type: 'slide-in-bottom',
duration: 300
}, nvImageMenu, {}, function() {
console.log('plus.nativeObj.View.startAnimation动画结束');
// 关闭原生动画
plus.nativeObj.View.clearAnimation();
nvImageMenu.show()
});
*/
this.isShow = true
nvImageMenu.addEventListener("click", e => { //处理底部图标菜单的点击事件,根据点击位置触发不同的逻辑
// console.log("click menu"+JSON.stringify(e));
if (e.screenY > plus.screen.resolutionHeight - 44) { //点击了底部取消按钮
// callback({event:"clickCancelButton"})
this.hide()
} else if (e.clientX < 5 || e.clientX > screenWidth - 5 || e.clientY < 5) {
//屏幕左右边缘5像素及菜单顶部5像素不处理点击
} else { //点击了图标按钮
var iClickIndex = -1 //点击的图标按钮序号,第一个图标按钮的index为0
var iRow = e.clientY < (top2 - (left1 / 2)) ? 0 : 1
var iCol = -1
if (e.clientX < (left2 - (iconSpace / 2))) {
iCol = 0
} else if (e.clientX < (left3 - (iconSpace / 2))) {
iCol = 1
} else if (e.clientX < (left4 - (iconSpace / 2))) {
iCol = 2
} else {
iCol = 3
}
if (iRow == 0) {
iClickIndex = iCol
} else {
iClickIndex = iCol + 4
}
// console.log("点击按钮的序号: " + iClickIndex);
// if (iClickIndex >= 0 && iClickIndex <= 5) { //处理具体的点击逻辑,此处也可以自行定义逻辑。如果增减了按钮,此处也需要跟着修改
// }
callback({
event: "clickMenu",
index: iClickIndex
})
}
})
/* nvImageMenu.addEventListener("touchstart", function(e) {
if (e.screenY > (plus.screen.resolutionHeight - 44)) {
//TODO 这里可以处理按下背景变灰的效果
}
})
nvImageMenu.addEventListener("touchmove", function(e) {
//TODO 这里可以处理按下背景变灰的效果
if (e.screenY > plus.screen.resolutionHeight - 44) {}
})
nvImageMenu.addEventListener("touchend", function(e) {
//TODO 这里可以处理释放背景恢复的效果
})
*/
}
hide() {
if (this.isShow) {
nvMask.hide()
nvImageMenu.hide()
this.isShow = false
}
}
}
export default NvImageMenu
\ No newline at end of file
import UniImageMenu from './uni-image-menu.js';
class UniShare extends UniImageMenu{
constructor(arg) {
super()
this.isShow = super.isShow
}
async show(param, callback){
var menus = []
plus.share.getServices(services => { //只显示有服务的项目
services = services.filter(item => item.nativeClient)
let servicesList = services.map(e => e.id)
param.menus.forEach(item => {
if (servicesList.includes(item.share.provider) || typeof(item.share) == 'string') {
menus.push(item)
}
})
super.show({
list: menus,
cancelText: param.cancelText
}, e => {
callback(e)
if(e.event == 'clickMenu'){
if (typeof(menus[e.index]['share']) == 'string') {
this[menus[e.index]['share']](param)
} else {
uni.share({
...param.content,
...menus[e.index].share,
success: res=> {
console.log("success:" + JSON.stringify(res));
super.hide()
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
uni.showModal({
content: JSON.stringify(err),
showCancel: false,
confirmText: "知道了"
});
}
})
}
}
})
}, err => {
uni.showModal({
title: '获取服务供应商失败:' + JSON.stringify(err),
showCancel: false,
confirmText: '知道了'
});
console.error('获取服务供应商失败:' + JSON.stringify(err));
})
}
hide(){
super.hide()
}
copyurl(param) {
console.log('copyurl',param);
uni.setClipboardData({
data: param.content.href,
success: ()=>{
console.log('success');
uni.hideToast() //关闭自带的toast
uni.showToast({
title: '复制成功',
icon: 'none'
});
super.hide();
},
fail: (err) => {
uni.showModal({
content: JSON.stringify(err),
showCancel: false
});
}
});
}
// 使用系统分享发送分享消息
shareSystem(param) {
console.log('shareSystem',param);
plus.share.sendWithSystem({
type: 'text',
content: param.content.title + param.content.summary || '',
href: param.content.href,
}, (e)=> {
console.log('分享成功');
super.hide()
}, (err)=> {
console.log('分享失败:' + JSON.stringify(err));
uni.showModal({
title: '获取服务供应商失败:' + JSON.stringify(err),
showCancel: false,
confirmText: '知道了'
});
});
}
}
export default UniShare
\ No newline at end of file
{
"id": "uni-share",
"displayName": "uni-share",
"version": "2.0.2",
"description": "底部弹出宫格图标式的分享菜单,可覆盖原生组件。",
"keywords": [
"分享菜单"
],
"repository": "",
"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": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "n",
"Android Browser": "n",
"微信浏览器(Android)": "n",
"QQ浏览器(Android)": "n"
},
"H5-pc": {
"Chrome": "n",
"IE": "n",
"Edge": "n",
"Firefox": "n",
"Safari": "n"
},
"小程序": {
"微信": "n",
"阿里": "n",
"百度": "n",
"字节跳动": "n",
"QQ": "n"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
#### 本功能基于[底部图标菜单](https://ext.dcloud.net.cn/plugin?id=4858)封装而成。
### 示例代码
```
<template>
<button type="default" @click="uniShare">显示</button>
</template>
<script>
import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js';
export default {
onBackPress({from}) {
console.log(from);
if(from=='backbutton'){
this.$nextTick(function(){
uniShare.hide()
})
return uniShare.isShow;
}
},
methods: {
uniShare() {
uniShare.show({
content: { //公共的分享参数配置 类型(type)、链接(herf)、标题(title)、summary(描述)、imageUrl(缩略图)
type: 0,
href: 'https://uniapp.dcloud.io/',
title: '标题',
summary: '描述',
imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
},
menus: [{
"img": "/static/app-plus/sharemenu/wechatfriend.png",
"text": "微信好友",
"share": { //当前项的分享参数配置。可覆盖公共的配置如下:分享到微信小程序,配置了type=5
"provider": "weixin",
"scene": "WXSceneSession"
}
},
{
"img": "/static/app-plus/sharemenu/wechatmoments.png",
"text": "微信朋友圈",
"share": {
"provider": "weixin",
"scene": "WXSceneTimeline"
}
},
{
"img": "/static/app-plus/sharemenu/mp_weixin.png",
"text": "微信小程序",
"share": {
provider: "weixin",
scene: "WXSceneSession",
type: 5,
miniProgram: {
id: '123',
path: '/pages/list/detail',
webUrl: '/#/pages/list/detail',
type: 0
},
}
},
{
"img": "/static/app-plus/sharemenu/weibo.png",
"text": "微博",
"share": {
"provider": "sinaweibo"
}
},
{
"img": "/static/app-plus/sharemenu/qq.png",
"text": "QQ",
"share": {
"provider": "qq"
}
},
{
"img": "/static/app-plus/sharemenu/copyurl.png",
"text": "复制",
"share": "copyurl"
},
{
"img": "/static/app-plus/sharemenu/more.png",
"text": "更多",
"share": "shareSystem"
}
],
cancelText: "取消分享",
}, e => { //callback
console.log(uniShare.isShow);
console.log(e);
})
}
}
}
</script>
```
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment