You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
3.5 KiB
168 lines
3.5 KiB
<template>
|
|
<view class="v-sign-action" :style="[customStyle]">
|
|
<view v-for="item in btns" :key="item.label" :class="['btn', { border: border }]"
|
|
:style="[{ 'margin-right': formatSize(space) }]" @click="onBtnClick(item)">
|
|
<image v-if="item.icon" :class="['icon', 'icon-' + item.action]" :src="item.icon"></image>
|
|
<text class="text">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* v-sign-action 控制按钮组（v-sign 子组件）
|
|
* @description 控制 v-sign 组件的一些按钮
|
|
* @tutorial
|
|
* @property {Array} actions 按钮配置 所有值： 清空（clear）, 撤回（prev） 保存图片（save）
|
|
* @property {Boolean} border 按钮是否有边框
|
|
* @property {String/Number} space 按钮间隔
|
|
* @property {Object} customStyle 根元素自定义样式
|
|
* @event {Function} 点击对应类型按钮触发对应事件， 例如点击 clear 则触发 clear 事件
|
|
* @example 示例
|
|
**/
|
|
import {
|
|
formatSize
|
|
} from '../../utils'
|
|
|
|
// v-sign 父组件提供的接口
|
|
let vSignInterface
|
|
// 按钮类型
|
|
const btn_type = {
|
|
CLEAR: 'clear', // 清空
|
|
PREV: 'prev', // 撤回/上一步
|
|
// NEXT: 'next',
|
|
SAVE: 'save' // 保存临时图片
|
|
}
|
|
const all_action = Object.values(btn_type)
|
|
const btnsConf = [{
|
|
label: '清空',
|
|
action: btn_type.CLEAR,
|
|
icon: require('../../static/image/clear.svg')
|
|
},
|
|
{
|
|
label: '撤回',
|
|
action: btn_type.PREV,
|
|
icon: require('../../static/image/prev.svg')
|
|
},
|
|
// ,{
|
|
// label: '取消撤回',
|
|
// action: btn_type.NEXT,
|
|
// icon: '/uni_modules/v-sign/static/image/next.svg'
|
|
// },
|
|
{
|
|
label: '保存',
|
|
action: btn_type.SAVE,
|
|
icon: require('../../static/image/save.svg')
|
|
}
|
|
]
|
|
export default {
|
|
name: 'v-sign-action',
|
|
props: {
|
|
// 按钮配置
|
|
actions: {
|
|
type: Array,
|
|
default: () => all_action
|
|
},
|
|
// 按钮是否有边框
|
|
border: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 按钮间隔
|
|
space: {
|
|
type: [String, Number],
|
|
default: 12
|
|
},
|
|
// 根元素自定义样式
|
|
customStyle: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
inject: ['getSignInterface'],
|
|
data() {
|
|
return {
|
|
formatSize
|
|
}
|
|
},
|
|
computed: {
|
|
btns() {
|
|
return btnsConf.filter(item => this.actions.includes(item.action))
|
|
}
|
|
},
|
|
mounted() {
|
|
vSignInterface = this.getSignInterface()
|
|
},
|
|
methods: {
|
|
async onBtnClick(btn) {
|
|
let emit_result
|
|
switch (btn.action) {
|
|
case btn_type.CLEAR:
|
|
vSignInterface.clear()
|
|
break
|
|
case btn_type.PREV:
|
|
vSignInterface.revoke()
|
|
break
|
|
// case btn_type.NEXT:
|
|
// console.log('next')
|
|
// break
|
|
case btn_type.SAVE:
|
|
emit_result = await vSignInterface.saveImage()
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
// console.log(btn.action, emit_result);
|
|
// 触发按钮对应类型事件
|
|
this.$emit(btn.action, emit_result)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.v-sign-action {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12rpx;
|
|
min-width: 88rpx;
|
|
white-space: nowrap;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&:active {
|
|
transition: transform 0.3s;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
&.border {
|
|
border: 2rpx solid #333;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
|
|
&.icon-clear,
|
|
&.icon-prev,
|
|
&.icon-next {
|
|
margin-right: 4rpx;
|
|
}
|
|
|
|
&.icon-save {}
|
|
}
|
|
|
|
.text {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|