Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 b0603133 编写于 作者: H hdx
浏览文件
操作

components: rpx to px; 移除不必要的display: flex;

上级 a1e825d2
隐藏空白更改
内联 并排
Showing with 488 addition and 493 deletion
components/api-set-tabbar/api-set-tabbar.vue
浏览文件 @ b0603133
<template> <template>
<view class="uni-padding-wrap"> <view class="uni-padding-wrap">
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<button class="button" @click="setTabBarBadge">{{ !hasSetTabBarBadge ? '设置tab徽标' : '移除tab徽标' }}</button> <button class="button" @click="setTabBarBadge">{{ !hasSetTabBarBadge ? '设置tab徽标' : '移除tab徽标' }}</button>
<button class="button" @click="showTabBarRedDot">{{ !hasShownTabBarRedDot ? '显示红点' : '移除红点'}}</button> <button class="button" @click="showTabBarRedDot">{{ !hasShownTabBarRedDot ? '显示红点' : '移除红点'}}</button>
<button class="button" @click="customStyle">{{ !hasCustomedStyle ? '自定义Tab样式' : '移除自定义样式'}}</button> <button class="button" @click="customStyle">{{ !hasCustomedStyle ? '自定义Tab样式' : '移除自定义样式'}}</button>
<button class="button" @click="customItem">{{ !hasCustomedItem ? '自定义Tab信息' : '移除自定义信息' }}</button> <button class="button" @click="customItem">{{ !hasCustomedItem ? '自定义Tab信息' : '移除自定义信息' }}</button>
<button class="button" @click="hideTabBar">{{ !hasHiddenTabBar ? '隐藏TabBar' : '显示TabBar' }}</button> <button class="button" @click="hideTabBar">{{ !hasHiddenTabBar ? '隐藏TabBar' : '显示TabBar' }}</button>
<view class="btn-area"> <view class="btn-area">
<!-- <button class="button" type="primary" @click="navigateBack">关闭</button> --> <!-- <button class="button" type="primary" @click="navigateBack">关闭</button> -->
</view> </view>
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
export default { export default {
data() { data() {
return { return {
title: 'tababr', title: 'tababr',
hasSetTabBarBadge: false, hasSetTabBarBadge: false,
hasShownTabBarRedDot: false, hasShownTabBarRedDot: false,
hasCustomedStyle: false, hasCustomedStyle: false,
hasCustomedItem: false, hasCustomedItem: false,
hasHiddenTabBar: false hasHiddenTabBar: false
} }
}, },
destroyed() { destroyed() {
if (this.hasSetTabBarBadge) { if (this.hasSetTabBarBadge) {
uni.removeTabBarBadge({ uni.removeTabBarBadge({
index: 1 index: 1
}) })
} }
if (this.hasShownTabBarRedDot) { if (this.hasShownTabBarRedDot) {
uni.hideTabBarRedDot({ uni.hideTabBarRedDot({
index: 1 index: 1
}) })
} }
if (this.hasHiddenTabBar) { if (this.hasHiddenTabBar) {
uni.showTabBar() uni.showTabBar()
} }
if (this.hasCustomedStyle) { if (this.hasCustomedStyle) {
uni.setTabBarStyle({ uni.setTabBarStyle({
color: '#7A7E83', color: '#7A7E83',
selectedColor: '#007AFF', selectedColor: '#007AFF',
backgroundColor: '#F8F8F8', backgroundColor: '#F8F8F8',
borderStyle: 'black' borderStyle: 'black'
}) })
} }
if (this.hasCustomedItem) { if (this.hasCustomedItem) {
let tabBarOptions = { let tabBarOptions = {
index: 1, index: 1,
text: '接口', text: '接口',
iconPath: '/static/api.png', iconPath: '/static/api.png',
selectedIconPath: '/static/apiHL.png' selectedIconPath: '/static/apiHL.png'
} }
uni.setTabBarItem(tabBarOptions) uni.setTabBarItem(tabBarOptions)
} }
}, },
methods: { methods: {
navigateBack() { navigateBack() {
this.$emit('unmount') this.$emit('unmount')
}, },
setTabBarBadge() { setTabBarBadge() {
if(this.hasShownTabBarRedDot){ if (this.hasShownTabBarRedDot) {
uni.hideTabBarRedDot({ uni.hideTabBarRedDot({
index: 1 index: 1
}) })
this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot
} }
if (!this.hasSetTabBarBadge) { if (!this.hasSetTabBarBadge) {
uni.setTabBarBadge({ uni.setTabBarBadge({
index: 1, index: 1,
text: '1' text: '1'
}) })
} else { } else {
uni.removeTabBarBadge({ uni.removeTabBarBadge({
index: 1 index: 1
}) })
} }
this.hasSetTabBarBadge = !this.hasSetTabBarBadge this.hasSetTabBarBadge = !this.hasSetTabBarBadge
}, },
showTabBarRedDot() { showTabBarRedDot() {
if(this.hasSetTabBarBadge) { if (this.hasSetTabBarBadge) {
uni.removeTabBarBadge({ uni.removeTabBarBadge({
index: 1 index: 1
}) })
this.hasSetTabBarBadge = !this.hasSetTabBarBadge this.hasSetTabBarBadge = !this.hasSetTabBarBadge
} }
if (!this.hasShownTabBarRedDot) { if (!this.hasShownTabBarRedDot) {
uni.showTabBarRedDot({ uni.showTabBarRedDot({
index: 1 index: 1
}) })
} else { } else {
uni.hideTabBarRedDot({ uni.hideTabBarRedDot({
index: 1 index: 1
}) })
} }
this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot this.hasShownTabBarRedDot = !this.hasShownTabBarRedDot
}, },
hideTabBar() { hideTabBar() {
if (!this.hasHiddenTabBar) { if (!this.hasHiddenTabBar) {
uni.hideTabBar() uni.hideTabBar()
} else { } else {
uni.showTabBar() uni.showTabBar()
} }
this.hasHiddenTabBar = !this.hasHiddenTabBar this.hasHiddenTabBar = !this.hasHiddenTabBar
}, },
customStyle() { customStyle() {
if (this.hasCustomedStyle) { if (this.hasCustomedStyle) {
uni.setTabBarStyle({ uni.setTabBarStyle({
color: '#7A7E83', color: '#7A7E83',
selectedColor: '#007AFF', selectedColor: '#007AFF',
backgroundColor: '#F8F8F8', backgroundColor: '#F8F8F8',
borderStyle: 'black' borderStyle: 'black'
}) })
} else { } else {
uni.setTabBarStyle({ uni.setTabBarStyle({
color: '#FFF', color: '#FFF',
selectedColor: '#007AFF', selectedColor: '#007AFF',
backgroundColor: '#000000', backgroundColor: '#000000',
borderStyle: 'black' borderStyle: 'black'
}) })
} }
this.hasCustomedStyle = !this.hasCustomedStyle this.hasCustomedStyle = !this.hasCustomedStyle
}, },
customItem() { customItem() {
let tabBarOptions = { let tabBarOptions = {
index: 1, index: 1,
text: '接口', text: '接口',
iconPath: '/static/api.png', iconPath: '/static/api.png',
selectedIconPath: '/static/apiHL.png' selectedIconPath: '/static/apiHL.png'
} as SetTabBarItemOptions } as SetTabBarItemOptions
if (this.hasCustomedItem) { if (this.hasCustomedItem) {
uni.setTabBarItem(tabBarOptions) uni.setTabBarItem(tabBarOptions)
} else { } else {
tabBarOptions.text = 'API' tabBarOptions.text = 'API'
uni.setTabBarItem(tabBarOptions) uni.setTabBarItem(tabBarOptions)
} }
this.hasCustomedItem = !this.hasCustomedItem this.hasCustomedItem = !this.hasCustomedItem
} }
} }
} }
</script> </script>
<style> <style>
.button { .button {
margin-top: 30rpx; margin-top: 15px;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.btn-area { .btn-area {
padding-top: 30rpx; padding-top: 15px;
} }
</style> </style>
components/boolean-data/boolean-data.vue
浏览文件 @ b0603133
<script lang="uts"> <script lang="uts">
export default { export default {
emits: ['change'], emits: ['change'],
props: { props: {
title: { title: {
type: String, type: String,
default: '' default: ''
}, },
defaultValue: { defaultValue: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
data() { data() {
return { return {
_checked: false _checked: false
} }
}, },
created() { created() {
this._checked = this.defaultValue this._checked = this.defaultValue
}, },
methods: { methods: {
// @ts-ignore // @ts-ignore
_change(e : SwitchChangeEvent) { _change(e : SwitchChangeEvent) {
this._checked = e.detail.value; this._checked = e.detail.value;
this.$emit('change', this._checked) this.$emit('change', this._checked)
} }
} }
} }
</script> </script>
<template> <template>
<view class="button-data-main uni-flex"> <view class="button-data-main uni-flex">
<view class="uni-title" style="width:80%">{{ title }}</view> <view class="uni-title" style="width:80%">{{ title }}</view>
<switch :checked="_checked" @change="_change" /> <switch :checked="_checked" @change="_change" />
</view> </view>
</template> </template>
<style> <style>
.button-data-main { .button-data-main {
justify-content: space-between; justify-content: space-between;
padding: 20rpx; padding: 10px;
border-bottom: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0, 0, 0, .06);
} }
</style> </style>
\ No newline at end of file
components/enum-data/enum-data.vue
浏览文件 @ b0603133
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
methods: { methods: {
// @ts-ignore // @ts-ignore
_change(e : RadioGroupChangeEvent) { _change(e : RadioGroupChangeEvent) {
const selected = this.items.find((item: ItemType) : boolean => { const selected = this.items.find((item : ItemType) : boolean => {
return item.name == e.detail.value return item.name == e.detail.value
}) })
if (selected != null) { if (selected != null) {
......
components/input-data/input-data.vue
浏览文件 @ b0603133
...@@ -82,7 +82,8 @@ ...@@ -82,7 +82,8 @@
</view> </view>
</view> </view>
<view class="input-wrapper"> <view class="input-wrapper">
<input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input" @blur="blur" @focus="focus" /> <input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input" @blur="blur"
@focus="focus" />
<image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon"> <image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
</image> </image>
</view> </view>
...@@ -95,7 +96,7 @@ ...@@ -95,7 +96,7 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
margin: 0 20rpx; margin: 0 10px;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
background-color: #ffffff; background-color: #ffffff;
...@@ -105,6 +106,6 @@ ...@@ -105,6 +106,6 @@
width: 22px; width: 22px;
height: 22px; height: 22px;
align-self: center; align-self: center;
margin-right: 10rpx; margin-right: 5px;
} }
</style> </style>
components/page-head/page-head.vue
浏览文件 @ b0603133
...@@ -18,11 +18,11 @@ ...@@ -18,11 +18,11 @@
</script> </script>
<style> <style>
.common-page-head { .common-page-head {
padding: 20px; padding: 20px;
align-items: center; align-items: center;
} }
.common-page-head-title-box { .common-page-head-title-box {
padding: 0 20px; padding: 0 20px;
border-bottom: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8;
} }
......
components/u-link/u-link.vue
浏览文件 @ b0603133
<template> <template>
<view class="uni-row"> <view class="uni-row">
<text class="text" :href="href" @click="openURL" :inWhiteList="inWhiteList">{{text}}</text> <text class="text" :href="href" @click="openURL" :inWhiteList="inWhiteList">{{text}}</text>
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
/** /**
* @description u-link是一个外部网页超链接组件，在小程序内打开内部web-view组件或复制url，在app内打开外部浏览器，在h5端打开新网页 * @description u-link是一个外部网页超链接组件，在小程序内打开内部web-view组件或复制url，在app内打开外部浏览器，在h5端打开新网页
* @property {String} href 点击后打开的外部网页url，小程序中必须以https://开头 * @property {String} href 点击后打开的外部网页url，小程序中必须以https://开头
* @property {String} text 显示的文字 * @property {String} text 显示的文字
* @property {Boolean} inWhiteList 是否在小程序白名单中，如果在的话，在小程序端会直接打开内置web-view，否则会只会复制url，提示在外部打开 * @property {Boolean} inWhiteList 是否在小程序白名单中，如果在的话，在小程序端会直接打开内置web-view，否则会只会复制url，提示在外部打开
* @example * <u-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn" :inWhiteList="true"></u-link> * @example * <u-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn" :inWhiteList="true"></u-link>
*/ */
export default { export default {
name: 'u-link', name: 'u-link',
props: { props: {
href: { href: {
type: String, type: String,
default: '' default: ''
}, },
text: { text: {
type: String, type: String,
default: '' default: ''
}, },
inWhiteList: { inWhiteList: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
methods: { methods: {
openURL() { openURL() {
// // #ifdef APP-PLUS // // #ifdef APP-PLUS
// plus.runtime.openURL(this.href) //这里默认使用外部浏览器打开而不是内部web-view组件打开 // plus.runtime.openURL(this.href) //这里默认使用外部浏览器打开而不是内部web-view组件打开
// // #endif // // #endif
// // #ifdef H5 // // #ifdef H5
// window.open(this.href) // window.open(this.href)
// // #endif // // #endif
// // #ifdef MP // // #ifdef MP
// if (this.inWhiteList) { //如果在小程序的网址白名单中，会走内置webview打开，否则会复制网址提示在外部浏览器打开 // if (this.inWhiteList) { //如果在小程序的网址白名单中，会走内置webview打开，否则会复制网址提示在外部浏览器打开
// uni.navigateTo({ // uni.navigateTo({
// url: '/pages/component/web-view/web-view?url=' + this.href // url: '/pages/component/web-view/web-view?url=' + this.href
// }); // });
// } else { // } else {
// uni.setClipboardData({ // uni.setClipboardData({
// data: this.href // data: this.href
// }); // });
// uni.showModal({ // uni.showModal({
// content: '本网址无法直接在小程序内打开。已自动复制网址，请在手机浏览器里粘贴该网址', // content: '本网址无法直接在小程序内打开。已自动复制网址，请在手机浏览器里粘贴该网址',
// showCancel: false // showCancel: false
// }); // });
// } // }
// // #endif // // #endif
} }
} }
} }
</script> </script>
<style> <style>
.text { .text {
color: #7A7E83; color: #7A7E83;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
/* border-bottom: 1px solid #7A7E83; */ /* border-bottom: 1px solid #7A7E83; */
} }
</style> </style>
components/uni-collapse-item/uni-collapse-item.vue
浏览文件 @ b0603133
<template> <template>
<view class="uni-collapse-item"> <view class="uni-collapse-item">
<view class="uni-collapse-item__title" @click="openCollapse(!is_open)"> <view class="uni-collapse-item__title" @click="openCollapse(!is_open)">
<text class="uni-collapse-item__title-text" :class="{'is-disabled':disabled,'open--active':is_open}">{{title}}</text> <text class="uni-collapse-item__title-text"
<view class="down_arrow" :class="{'down_arrow--active': is_open}"></view> :class="{'is-disabled':disabled,'open--active':is_open}">{{title}}</text>
</view> <view class="down_arrow" :class="{'down_arrow--active': is_open}"></view>
<view ref="boxRef" class="uni-collapse-item__content"> </view>
<view ref="contentRef" class="uni-collapse-item__content-box"> <view ref="boxRef" class="uni-collapse-item__content">
<slot></slot> <view ref="contentRef" class="uni-collapse-item__content-box">
</view> <slot></slot>
</view> </view>
</view> </view>
</view>
</template> </template>
<script lang="uts"> <script lang="uts">
import { $dispatch } from './util.uts' import { $dispatch } from './util.uts'
export default { export default {
name: "UniCollapseItem", name: "UniCollapseItem",
props: { props: {
// 列表标题 // 列表标题
title: { title: {
type: String, type: String,
default: '' default: ''
}, },
open: { open: {
type: Boolean, type: Boolean,
default: false default: false
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
data() { data() {
return { return {
height: 0, height: 0,
is_open: this.open as boolean, is_open: this.open as boolean,
boxNode: null as Element | null, boxNode: null as Element | null,
contentNode: null as Element | null, contentNode: null as Element | null,
}; };
}, },
watch: { watch: {
open(value: boolean) { open(value : boolean) {
// this.is_open = value // this.is_open = value
if (this.boxNode != null) { if (this.boxNode != null) {
this.openCollapse(value) this.openCollapse(value)
} }
} }
}, },
created() { created() {
$dispatch(this, 'UniCollapse', 'init', this) $dispatch(this, 'UniCollapse', 'init', this)
}, },
mounted() { mounted() {
this.boxNode = this.$refs['boxRef'] as Element; this.boxNode = this.$refs['boxRef'] as Element;
this.contentNode = this.$refs['contentRef'] as Element; this.contentNode = this.$refs['contentRef'] as Element;
// this.openCollapse(this.open) // this.openCollapse(this.open)
}, },
methods: { methods: {
// 开启或关闭折叠面板 // 开启或关闭折叠面板
openCollapse(open: boolean) { openCollapse(open : boolean) {
if (this.disabled) return if (this.disabled) return
// 关闭其他已打开 // 关闭其他已打开
$dispatch(this, 'UniCollapse', 'cloceAll') $dispatch(this, 'UniCollapse', 'cloceAll')
this.is_open = open this.is_open = open
this.openOrClose(open) this.openOrClose(open)
}, },
openOrClose(open: boolean) { openOrClose(open : boolean) {
const boxNode = this.boxNode?.style!; const boxNode = this.boxNode?.style!;
const contentNode = this.contentNode?.style!; const contentNode = this.contentNode?.style!;
let hide = open ? 'flex' : 'none'; let hide = open ? 'flex' : 'none';
const opacity = open ? "1" : "0" const opacity = open ? "1" : "0"
let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)'; let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
boxNode.setProperty('display', hide); boxNode.setProperty('display', hide);
this.$nextTick(() => { this.$nextTick(() => {
contentNode.setProperty('transform', ani_transform); contentNode.setProperty('transform', ani_transform);
contentNode.setProperty('opacity', opacity); contentNode.setProperty('opacity', opacity);
}) })
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.uni-collapse-item { .uni-collapse-item {
background-color: #fff; background-color: #fff;
} }
.uni-collapse-item__title {
flex-direction: row;
align-items: center;
padding: 12px;
background-color: #fff;
}
.uni-collapse-item__title {
flex-direction: row;
align-items: center;
padding: 12px;
background-color: #fff;
}
.down_arrow {
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px #999 solid;
border-bottom: 1px #999 solid;
margin-top: -3px;
transition-property: transform;
transition-duration: 0.2s;
}
.down_arrow { .down_arrow--active {
width: 8px; transform: rotate(-135deg);
height: 8px; margin-top: 0px;
transform: rotate(45deg); }
border-right: 1px #999 solid;
border-bottom: 1px #999 solid;
margin-top: -3px;
transition-property: transform;
transition-duration: 0.2s;
}
.down_arrow--active { .uni-collapse-item__title-text {
transform: rotate(-135deg); flex: 1;
margin-top: 0px; color: #000;
} font-size: 14px;
font-weight: 400;
}
.uni-collapse-item__title-text { .open--active {
flex: 1; /* background-color: #f0f0f0; */
color: #000; color: #bbb;
font-size: 14px; }
font-weight: 400;
}
.open--active { .is-disabled {
/* background-color: #f0f0f0; */ color: #999;
color: #bbb; }
}
.is-disabled { .uni-collapse-item__content {
color: #999; display: none;
} position: relative;
}
.uni-collapse-item__content { .uni-collapse-item__content-box {
display: none; width: 100%;
position: relative; transition-property: transform, opacity;
} transition-duration: 0.2s;
transform: translateY(-100%);
.uni-collapse-item__content-box { opacity: 0;
width: 100%; }
transition-property: transform , opacity; </style>
transition-duration: 0.2s;
transform: translateY(-100%);
opacity: 0;
}
</style>
components/uni-collapse/uni-collapse.vue
浏览文件 @ b0603133
<template> <template>
<!-- 父组件暂时无用，后续子组件联动需要使用到父组件 --> <!-- 父组件暂时无用，后续子组件联动需要使用到父组件 -->
<view> <view>
<slot></slot> <slot></slot>
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
export default { export default {
name: "UniCollapse", name: "UniCollapse",
props: { props: {
// 是否开启手风琴效果 // 是否开启手风琴效果
accordion: { accordion: {
type: Boolean, type: Boolean,
default: true default: true
} }
}, },
data() { data() {
return { return {
child_nodes: [] as Array<ComponentPublicInstance> child_nodes: [] as Array<ComponentPublicInstance>
}; };
}, },
methods: { methods: {
init(child: ComponentPublicInstance) { init(child : ComponentPublicInstance) {
this.child_nodes.push(child) this.child_nodes.push(child)
}, },
// 关闭所有 // 关闭所有
cloceAll() { cloceAll() {
// 开启手风琴效果才回关闭其他 // 开启手风琴效果才回关闭其他
if (this.accordion && this.child_nodes.length > 0) { if (this.accordion && this.child_nodes.length > 0) {
this.child_nodes.forEach((item) => { this.child_nodes.forEach((item) => {
const is_open = item.$data['is_open'] as boolean const is_open = item.$data['is_open'] as boolean
// TODO 暂时无法获取子组件上的属性和方法，暂时使用绕过方案 // TODO 暂时无法获取子组件上的属性和方法，暂时使用绕过方案
if (is_open) { if (is_open) {
item.$data['is_open'] = false item.$data['is_open'] = false
item.$callMethod('openOrClose', false) item.$callMethod('openOrClose', false)
} }
}) })
} }
} }
} }
} }
</script> </script>
<style> <style>
......
components/uni-navbar-lite/uni-navbar-lite.uvue
浏览文件 @ b0603133
...@@ -95,7 +95,6 @@ ...@@ -95,7 +95,6 @@
.uni-navbar-inner { .uni-navbar-inner {
position: relative; position: relative;
display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: 45px; height: 45px;
...@@ -103,7 +102,6 @@ ...@@ -103,7 +102,6 @@
.left-content, .left-content,
.right-content { .right-content {
display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 45px; width: 45px;
...@@ -117,7 +115,6 @@ ...@@ -117,7 +115,6 @@
bottom: 0; bottom: 0;
left: 45px; left: 45px;
right: 45px; right: 45px;
display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
components/uni-navbar-lite/uni-navbar-lite.vue
浏览文件 @ b0603133
<template> <template>
<view class="uni-navbar"> <view class="uni-navbar">
<view class="uni-navbar-inner" :style="navbarStyle"> <view class="uni-navbar-inner" :style="navbarStyle">
<view class="left-content" @click="back"> <view class="left-content" @click="back">
<text class="uni-icons uniui-back"></text> <text class="uni-icons uniui-back"></text>
</view> </view>
<view class="uni-navbar-content"> <view class="uni-navbar-content">
<slot>{{title}}</slot> <slot>{{title}}</slot>
</view> </view>
<view class="right-content"> <view class="right-content">
<slot name="right"></slot> <slot name="right"></slot>
</view> </view>
</view>
</view> </view>
</view>
</template> </template>
<script> <script>
export default { export default {
name: "uni-navbar", name: "uni-navbar",
props: { props: {
title: { title: {
type: String, type: String,
default: '' default: ''
} }
}, },
data() { data() {
return { return {
statusBarHeight: 0 statusBarHeight: 0
}; };
}, },
computed: { computed: {
navbarStyle() { navbarStyle() {
return `margin-top:${this.statusBarHeight}px` return `margin-top:${this.statusBarHeight}px`
}, },
}, },
created() { created() {
const sys = uni.getSystemInfoSync() const sys = uni.getSystemInfoSync()
const statusBarHeight = sys.statusBarHeight const statusBarHeight = sys.statusBarHeight
this.statusBarHeight = statusBarHeight this.statusBarHeight = statusBarHeight
}, },
methods: { methods: {
back() { back() {
uni.navigateBack({}) uni.navigateBack({})
} }
}, },
} }
</script> </script>
<style> <style>
@import './uni-icons.css'; @import './uni-icons.css';
.uni-icons { .uni-icons {
font-family: UniIconsLight; font-family: UniIconsLight;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
font-size: 22px; font-size: 22px;
font-style: normal; font-style: normal;
color: #333; color: #333;
} }
.uni-navbar { .uni-navbar {
border: 1px #eee solid; border: 1px #eee solid;
background-color: #fff; background-color: #fff;
} }
.uni-navbar-inner { .uni-navbar-inner {
position: relative; position: relative;
display: flex; flex-direction: row;
flex-direction: row; justify-content: space-between;
justify-content: space-between; height: 45px;
height: 45px; }
}
.left-content, .left-content,
.right-content { .right-content {
display: flex; justify-content: center;
justify-content: center; align-items: center;
align-items: center; width: 45px;
width: 45px; height: 100%;
height: 100%; }
}
.uni-navbar-content { .uni-navbar-content {
position: absolute; position: absolute;
height: 100%; height: 100%;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 45px; left: 45px;
right: 45px; right: 45px;
display: flex; justify-content: center;
justify-content: center; align-items: center;
align-items: center; }
}
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或