App/app-govern
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

t

Browse Source
This commit is contained in:
仲么了
2023-02-01 16:59:32 +08:00
parent ce0b8967f7
commit d1a1396164
18 changed files with 889 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
common/css/base.scss
View File

@@ -2,6 +2,41 @@ page {
background: #f3f4f5; background: #f3f4f5;
} }
// mt0,mr0,mb0,ml0 --> mt100,mr100,mb100,ml100
@for $i from 0 through 100 {
.mt#{$i} {
margin-top: #{$i}rpx;
}
.mr#{$i} {
margin-right: #{$i}rpx;
}
.mb#{$i} {
margin-bottom: #{$i}rpx;
}
.ml#{$i} {
margin-left: #{$i}rpx;
}
.pt#{$i} {
padding-top: #{$i}rpx;
}
.pr#{$i} {
padding-right: #{$i}rpx;
}
.pb#{$i} {
padding-bottom: #{$i}rpx;
}
.pl#{$i} {
padding-left: #{$i}rpx;
}
}
.hide-txt { .hide-txt {
overflow-x: hidden; overflow-x: hidden;
white-space: nowrap; white-space: nowrap;

8
manifest.json
View File

@@ -41,9 +41,13 @@
] ]
}, },
/* ios打包配置 */ /* ios打包配置 */
"ios" : {}, "ios" : {
"dSYMs" : false
},
/* SDK配置 */ /* SDK配置 */
"sdkConfigs" : {} "sdkConfigs" : {
"ad" : {}
}
} }
}, },
/* 快应用特有相关 */ /* 快应用特有相关 */

16
pages.json
View File

@@ -4,7 +4,7 @@
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
"navigationBarTitleText": "主页" "navigationBarTitleText": "灿能电力"
} }
}, },
{ {
@@ -102,6 +102,18 @@
"style": { "style": {
"navigationBarTitleText": "个人消息" "navigationBarTitleText": "个人消息"
} }
},
{
"path": "pages/device/list",
"style": {
"navigationBarTitleText": "设备列表"
}
},
{
"path": "pages/device/new",
"style": {
"navigationBarTitleText": "新设备"
}
} }
], ],
"tabBar": { "tabBar": {
@@ -116,7 +128,7 @@
"pagePath": "pages/index/index", "pagePath": "pages/index/index",
"iconPath": "static/index.png", "iconPath": "static/index.png",
"selectedIconPath": "static/index2.png", "selectedIconPath": "static/index2.png",
"text": "主页" "text": "首页"
}, },
{ {
"pagePath": "pages/index/report", "pagePath": "pages/index/report",

61
pages/device/list.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='device-list'>
<div class="header">
<uni-segmented-control :current="current" :values="items" :style-type="styleType"
:active-color="activeColor" @clickItem="onClickItem" />
</div>
<uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 10" :key="item"
thumbnail="/static/real_time_data.png">
<text>设备基础信息 </text>
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
<uni-fab ref="fab" horizontal="right" vertical="bottom" :content="content" @trigger="trigger" />
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
current: 0,
items: ['正常', '报警', '离线'],
styleType: 'text',
activeColor: '#007aff',
content: [{
iconPath: '/static/add.png',
text: '添加 ',
},
]
}
},
methods: {
onClickItem (e) {
this.current = e.currentIndex
},
trigger (e) {
if (e.index === 0) {
uni.navigateTo({
url: '/pages/device/new'
})
}
}
}
}
</script>
<style lang='scss'>
.device-list {
.header {
position: sticky;
top: 0;
left: 0;
z-index: 10;
background: #fff;
padding: 10rpx 20rpx 20rpx;
box-shadow: 0 0 10rpx #eee;
}
}
</style>

25
pages/device/new.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
添加新设备
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
}
}
</script>
<style lang='scss'>
.index {
padding: 34rpx;
}
</style>

80
pages/index/index.vue
View File

@@ -2,11 +2,49 @@
<Cn-page :loading="loading"> <Cn-page :loading="loading">
<view slot="body"> <view slot="body">
<view class="index"> <view class="index">
<Cn-grid title="工作准备"> <div class="header">
<Cn-grid-item background="#fff" src="/static/zantai.png" text="灿能"></Cn-grid-item> <div class="header-content">
<div class="header-content-item">
<div class="header-content-item-value">38</div>
<div class="header-content-item-label">正常设备</div>
</div>
<div class="header-content-item">
<div class="header-content-item-value">5</div>
<div class="header-content-item-label">报警设备</div>
</div>
<div class="header-content-item">
<div class="header-content-item-value">3</div>
<div class="header-content-item-label">离线设备</div>
</div>
</div>
</div>
<Cn-grid title="常用功能" class="mt20">
<Cn-grid-item background="#fff" src="/static/zantai.png" text="设备管理"
@click="jump('/pages/device/list')"></Cn-grid-item>
<Cn-grid-item background="#fff" src="/static/zantai.png" text="网关管理" @click="send"></Cn-grid-item>
<Cn-grid-item background="#fff" src="/static/zantai.png" text="直连装置管理" @click="send"></Cn-grid-item>
</Cn-grid>
<!-- <Cn-grid title="统计" class="mt20">
<Cn-grid-item background="#fff" src="/static/zantai.png" text="设备数量"></Cn-grid-item>
<Cn-grid-item background="#fff" src="/static/zantai.png" text="设备状态" @click="send"></Cn-grid-item>
<Cn-grid-item background="#fff" src="/static/zantai.png" text="告警数量" @click="send"></Cn-grid-item>
<Cn-grid-item background="#fff" src="/static/zantai.png" text="暂态事件数量" @click="send"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
</Cn-grid> -->
<!-- <Cn-grid title="能耗分析" class="mt20">
<Cn-grid-item background="#fff" src="/static/zantai.png" text="稳态治理"></Cn-grid-item>
<Cn-grid-item background="#fff" src="/static/zantai.png" text="稳态报表" @click="send"></Cn-grid-item>
<Cn-grid-item background="#fff" src="/static/zantai.png" text="暂态治理"></Cn-grid-item>
<Cn-grid-item background="#fff" src="/static/zantai.png" text="暂态报表"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item> <Cn-grid-item background="#fff"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item> <Cn-grid-item background="#fff"></Cn-grid-item>
</Cn-grid> </Cn-grid>
<Cn-grid title="日志" class="mt20">
<Cn-grid-item background="#fff" src="/static/zantai.png" text="设备操作"></Cn-grid-item>
<Cn-grid-item background="#fff" src="/static/zantai.png" text="运维" @click="send"></Cn-grid-item>
<Cn-grid-item background="#fff"></Cn-grid-item>
</Cn-grid> -->
</view> </view>
</view> </view>
</Cn-page> </Cn-page>
@@ -15,10 +53,22 @@
export default { export default {
data () { data () {
return { return {
loading: true loading: false
} }
}, },
methods: { methods: {
send () {
uni.createPushMessage({
title: '灿能',
content: '灿能推送',
success: function (res) {
console.log('推送成功')
},
fail: function (res) {
console.log('推送失败')
}
})
},
jump (url) { jump (url) {
uni.navigateTo({ uni.navigateTo({
url: url url: url
@@ -35,5 +85,29 @@ export default {
<style lang="scss"> <style lang="scss">
.index { .index {
padding: 34rpx; padding: 34rpx;
.header {
background: #fff;
border-radius: 12rpx;
background: $uni-color-primary;
padding: 30rpx 10rpx 40rpx;
.header-content {
display: flex;
justify-content: space-around;
.header-content-item {
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
font-size: 28rpx;
.header-content-item-value {
margin-bottom: 10rpx;
}
}
}
}
} }
</style> </style>

4
pages/index/mine.vue
View File

@@ -9,11 +9,11 @@
</view> </view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons> <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view> </view>
<view class="mine-nav" @click="jump('upgrade')"> <!-- <view class="mine-nav" @click="jump('upgrade')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/server.png" /> <image mode="aspectFill" class="mine-nav-icon" src="/static/server.png" />
<view class="mine-nav-label">角色升级</view> <view class="mine-nav-label">角色升级</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons> <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view> </view> -->
<view class="mine-nav" @click="jump('message')" <view class="mine-nav" @click="jump('message')"
style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c;"> style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c;">
<image mode="aspectFill" class="mine-nav-icon" src="/static/message2.png" /> <image mode="aspectFill" class="mine-nav-icon" src="/static/message2.png" />

41
pages/index/report.vue
View File

@@ -1,52 +1,27 @@
<template> <template>
<view class="content"> <view class="content">
<image class="logo" src="/static/logo.png"></image> <uni-list :border="false">
<view class="text-area"> <uni-list-item title="输入电压异常" rightText="2023-02-01 15:10:29" v-for="item in 5" />
<text class="title">{{title}}</text> </uni-list>
</view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data () {
return { return {
title: '灿能' title: '灿能'
} }
}, },
onLoad() { onLoad () {
}, },
methods: { methods: {
} }
} }
</script> </script>
<style> <style>
.content { .content {}
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style> </style>

BIN
static/add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
static/add2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

26
uni_modules/uni-card/changelog.md Normal file
View File

@@ -0,0 +1,26 @@
## 1.3.1（2021-12-20）
- 修复 在vue页面下略缩图显示不正常的bug
## 1.3.0（2021-11-19）
- 重构插槽的用法 ，header 替换为 title
- 新增 actions 插槽
- 新增 cover 封面图属性和插槽
- 新增 padding 内容默认内边距离
- 新增 margin 卡片默认外边距离
- 新增 spacing 卡片默认内边距
- 新增 shadow 卡片阴影属性
- 取消 mode 属性，可使用组合插槽代替
- 取消 note 属性 ，使用actions插槽代替
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-card](https://uniapp.dcloud.io/component/uniui/uni-card)
## 1.2.1（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.2.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.8（2021-07-01）
- 优化 图文卡片无图片加载时，提供占位图标
- 新增 header 插槽，自定义卡片头部（ 图文卡片 mode="style" 时，不支持）
- 修复 thumbnail 不存在仍然占位的 bug
## 1.1.7（2021-05-12）
- 新增 组件示例地址
## 1.1.6（2021-02-04）
- 调整为uni_modules目录规范

270
uni_modules/uni-card/components/uni-card/uni-card.vue Normal file
View File

@@ -0,0 +1,270 @@
<template>
<view class="uni-card" :class="{ 'uni-card--full': isFull, 'uni-card--shadow': isShadow,'uni-card--border':border}"
:style="{'margin':isFull?0:margin,'padding':spacing,'box-shadow':isShadow?shadow:''}">
<!-- 封面 -->
<slot name="cover">
<view v-if="cover" class="uni-card__cover">
<image class="uni-card__cover-image" mode="widthFix" @click="onClick('cover')" :src="cover"></image>
</view>
</slot>
<slot name="title">
<view v-if="title || extra" class="uni-card__header">
<!-- 卡片标题 -->
<view class="uni-card__header-box" @click="onClick('title')">
<view v-if="thumbnail" class="uni-card__header-avatar">
<image class="uni-card__header-avatar-image" :src="thumbnail" mode="aspectFit" />
</view>
<view class="uni-card__header-content">
<text class="uni-card__header-content-title uni-ellipsis">{{ title }}</text>
<text v-if="title&&subTitle"
class="uni-card__header-content-subtitle uni-ellipsis">{{ subTitle }}</text>
</view>
</view>
<view class="uni-card__header-extra" @click="onClick('extra')">
<text class="uni-card__header-extra-text">{{ extra }}</text>
</view>
</view>
</slot>
<!-- 卡片内容 -->
<view class="uni-card__content" :style="{padding:padding}" @click="onClick('content')">
<slot></slot>
</view>
<view class="uni-card__actions" @click="onClick('actions')">
<slot name="actions"></slot>
</view>
</view>
</template>
<script>
/**
* Card 卡片
* @description 卡片视图组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=22
* @property {String} title 标题文字
* @property {String} subTitle 副标题
* @property {Number} padding 内容内边距
* @property {Number} margin 卡片外边距
* @property {Number} spacing 卡片内边距
* @property {String} extra 标题额外信息
* @property {String} cover 封面图（本地路径需要引入）
* @property {String} thumbnail 标题左侧缩略图
* @property {Boolean} is-full = [true | false] 卡片内容是否通栏，为 true 时将去除padding值
* @property {Boolean} is-shadow = [true | false] 卡片内容是否开启阴影
* @property {String} shadow 卡片阴影
* @property {Boolean} border 卡片边框
* @event {Function} click 点击 Card 触发事件
*/
export default {
name: 'UniCard',
emits: ['click'],
props: {
title: {
type: String,
default: ''
},
subTitle: {
type: String,
default: ''
},
padding: {
type: String,
default: '10px'
},
margin: {
type: String,
default: '15px'
},
spacing: {
type: String,
default: '0 10px'
},
extra: {
type: String,
default: ''
},
cover: {
type: String,
default: ''
},
thumbnail: {
type: String,
default: ''
},
isFull: {
// 内容区域是否通栏
type: Boolean,
default: false
},
isShadow: {
// 是否开启阴影
type: Boolean,
default: true
},
shadow: {
type: String,
default: '0px 0px 3px 1px rgba(0, 0, 0, 0.08)'
},
border: {
type: Boolean,
default: true
}
},
methods: {
onClick(type) {
this.$emit('click', type)
}
}
}
</script>
<style lang="scss">
$uni-border-3: #EBEEF5 !default;
$uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-main-color: #3a3a3a !default;
$uni-base-color: #6a6a6a !default;
$uni-secondary-color: #909399 !default;
$uni-spacing-sm: 8px !default;
$uni-border-color:$uni-border-3;
$uni-shadow: $uni-shadow-base;
$uni-card-title: 15px;
$uni-cart-title-color:$uni-main-color;
$uni-card-subtitle: 12px;
$uni-cart-subtitle-color:$uni-secondary-color;
$uni-card-spacing: 10px;
$uni-card-content-color: $uni-base-color;
.uni-card {
margin: $uni-card-spacing;
padding: 0 $uni-spacing-sm;
border-radius: 4px;
overflow: hidden;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
background-color: #fff;
flex: 1;
.uni-card__cover {
position: relative;
margin-top: $uni-card-spacing;
flex-direction: row;
overflow: hidden;
border-radius: 4px;
.uni-card__cover-image {
flex: 1;
// width: 100%;
/* #ifndef APP-PLUS */
vertical-align: middle;
/* #endif */
}
}
.uni-card__header {
display: flex;
border-bottom: 1px $uni-border-color solid;
flex-direction: row;
align-items: center;
padding: $uni-card-spacing;
overflow: hidden;
.uni-card__header-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.uni-card__header-avatar {
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 5px;
margin-right: $uni-card-spacing;
.uni-card__header-avatar-image {
flex: 1;
width: 40px;
height: 40px;
}
}
.uni-card__header-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
flex: 1;
// height: 40px;
overflow: hidden;
.uni-card__header-content-title {
font-size: $uni-card-title;
color: $uni-cart-title-color;
// line-height: 22px;
}
.uni-card__header-content-subtitle {
font-size: $uni-card-subtitle;
margin-top: 5px;
color: $uni-cart-subtitle-color;
}
}
.uni-card__header-extra {
line-height: 12px;
.uni-card__header-extra-text {
font-size: 12px;
color: $uni-cart-subtitle-color;
}
}
}
.uni-card__content {
padding: $uni-card-spacing;
font-size: 14px;
color: $uni-card-content-color;
line-height: 22px;
}
.uni-card__actions {
font-size: 12px;
}
}
.uni-card--border {
border: 1px solid $uni-border-color;
}
.uni-card--shadow {
position: relative;
/* #ifndef APP-NVUE */
box-shadow: $uni-shadow;
/* #endif */
}
.uni-card--full {
margin: 0;
border-left-width: 0;
border-left-width: 0;
border-radius: 0;
}
/* #ifndef APP-NVUE */
.uni-card--full:after {
border-radius: 0;
}
/* #endif */
.uni-ellipsis {
/* #ifndef APP-NVUE */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* #endif */
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
}
</style>

90
uni_modules/uni-card/package.json Normal file
View File

@@ -0,0 +1,90 @@
{
"id": "uni-card",
"displayName": "uni-card 卡片",
"version": "1.3.1",
"description": "Card 组件，提供常见的卡片样式。",
"keywords": [
"uni-ui",
"uniui",
"card",
"",
"卡片"
],
"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-icons",
"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"
}
}
}
}
}

12
uni_modules/uni-card/readme.md Normal file
View File

@@ -0,0 +1,12 @@
## Card 卡片
> **组件名：uni-card**
> 代码块： `uCard`
卡片视图组件。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-card)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839

9
uni_modules/uni-segmented-control/changelog.md Normal file
View File

@@ -0,0 +1,9 @@
## 1.2.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-segmented-control](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.5（2021-05-12）
- 新增 项目示例地址
## 1.0.4（2021-02-05）
- 调整为uni_modules目录规范

145
uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
:style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
<view v-for="(item, index) in values" :class="[ styleType === 'text' ? '': 'segmented-control__item--button',
index === currentIndex&&styleType === 'button' ? 'segmented-control__item--button--active': '',
index === 0&&styleType === 'button' ? 'segmented-control__item--button--first': '',
index === values.length - 1&&styleType === 'button' ? 'segmented-control__item--button--last': '' ]" :key="index"
:style="{ backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent' }"
class="segmented-control__item" @click="_onClick(index)">
<view>
<text :style="{color:
index === currentIndex
? styleType === 'text'
? activeColor
: '#fff'
: styleType === 'text'
? '#000'
: activeColor}" class="segmented-control__text" :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
</view>
</view>
</view>
</template>
<script>
/**
* SegmentedControl 分段器
* @description 用作不同视图的显示
* @tutorial https://ext.dcloud.net.cn/plugin?id=54
* @property {Number} current 当前选中的tab索引值，从0计数
* @property {String} styleType = [button|text] 分段器样式类型
* @value button 按钮类型
* @value text 文字类型
* @property {String} activeColor 选中的标签背景色与边框颜色
* @property {Array} values 选项数组
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
*/
export default {
name: 'UniSegmentedControl',
emits: ['clickItem'],
props: {
current: {
type: Number,
default: 0
},
values: {
type: Array,
default () {
return []
}
},
activeColor: {
type: String,
default: '#2979FF'
},
styleType: {
type: String,
default: 'button'
}
},
data() {
return {
currentIndex: 0
}
},
watch: {
current(val) {
if (val !== this.currentIndex) {
this.currentIndex = val
}
}
},
created() {
this.currentIndex = this.current
},
methods: {
_onClick(index) {
if (this.currentIndex !== index) {
this.currentIndex = index
this.$emit('clickItem', {
currentIndex: index
})
}
}
}
}
</script>
<style lang="scss" scoped>
.segmented-control {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
height: 36px;
overflow: hidden;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.segmented-control__item {
/* #ifndef APP-NVUE */
display: inline-flex;
box-sizing: border-box;
/* #endif */
position: relative;
flex: 1;
justify-content: center;
align-items: center;
}
.segmented-control__item--button {
border-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 0;
}
.segmented-control__item--button--first {
border-left-width: 1px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.segmented-control__item--button--last {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.segmented-control__item--text {
border-bottom-style: solid;
border-bottom-width: 2px;
padding: 6px 0;
}
.segmented-control__text {
font-size: 14px;
line-height: 20px;
text-align: center;
}
</style>

87
uni_modules/uni-segmented-control/package.json Normal file
View File

@@ -0,0 +1,87 @@
{
"id": "uni-segmented-control",
"displayName": "uni-segmented-control 分段器",
"version": "1.2.0",
"description": "分段器由至少 2 个分段控件组成，用作不同视图的显示",
"keywords": [
"uni-ui",
"uniui",
"分段器",
"segement",
"顶部选择"
],
"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"],
"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"
}
}
}
}
}

13
uni_modules/uni-segmented-control/readme.md Normal file
View File

@@ -0,0 +1,13 @@
## SegmentedControl 分段器
> **组件名：uni-segmented-control**
> 代码块： `uSegmentedControl`
用作不同视图的显示
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-segmented-control)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839