dykj-outsource-12123/uni_modules/uview-plus/components/u-toolbar/u-toolbar.vue
2024-06-28 14:18:30 +08:00

106 lines
2.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view
class="u-toolbar"
@touchmove.stop.prevent="noop"
v-if="show"
>
<view
class="u-toolbar__cancel__wrapper"
hover-class="u-hover-class"
>
<text
class="u-toolbar__wrapper__cancel"
@tap="cancel"
:style="{
color: cancelColor
}"
>{{ cancelText }}</text>
</view>
<text
class="u-toolbar__title u-line-1"
v-if="title"
>{{ title }}</text>
<view
class="u-toolbar__confirm__wrapper"
hover-class="u-hover-class"
>
<text
class="u-toolbar__wrapper__confirm"
@tap="confirm"
:style="{
color: confirmColor
}"
>{{ confirmText }}</text>
</view>
</view>
</template>
<script>
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
/**
* Toolbar 工具条
* @description
* @tutorial https://ijry.github.io/uview-plus/components/toolbar.html
* @property {Boolean} show 是否展示工具条(默认 true
* @property {String} cancelText 取消按钮的文字(默认 '取消'
* @property {String} confirmText 确认按钮的文字(默认 '确认'
* @property {String} cancelColor 取消按钮的颜色(默认 '#909193'
* @property {String} confirmColor 确认按钮的颜色(默认 '#3c9cff'
* @property {String} title 标题文字
* @event {Function}
* @example
*/
export default {
name: 'u-toolbar',
mixins: [mpMixin, mixin, props],
emits: ["confirm", "cancel"],
methods: {
// 点击取消按钮
cancel() {
this.$emit('cancel')
},
// 点击确定按钮
confirm() {
this.$emit('confirm')
}
},
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-toolbar {
height: 42px;
@include flex;
justify-content: space-between;
align-items: center;
&__wrapper {
&__cancel {
color: $u-tips-color;
font-size: 15px;
padding: 0 15px;
}
}
&__title {
color: $u-main-color;
padding: 0 60rpx;
font-size: 16px;
flex: 1;
text-align: center;
}
&__wrapper {
&__confirm {
color: $u-primary;
font-size: 15px;
padding: 0 15px;
}
}
}
</style>