163 lines
3.2 KiB
Vue
163 lines
3.2 KiB
Vue
<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 :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: '/static/v-sign/clear.png'
|
||
},
|
||
{
|
||
label: '撤回',
|
||
action: btn_type.PREV,
|
||
icon: '/static/v-sign/prev.png'
|
||
},
|
||
// {
|
||
// label: '取消撤回',
|
||
// action: btn_type.NEXT,
|
||
// icon: '/static/v-sign/next.png'
|
||
// },
|
||
{
|
||
label: '保存',
|
||
action: btn_type.SAVE,
|
||
icon: '/static/v-sign/save.png'
|
||
}
|
||
]
|
||
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: ['getInterface'],
|
||
data() {
|
||
return {
|
||
formatSize
|
||
}
|
||
},
|
||
computed: {
|
||
btns() {
|
||
return btnsConf.filter(item => this.actions.includes(item.action))
|
||
}
|
||
},
|
||
mounted() {
|
||
vSignInterface = this.getInterface()
|
||
},
|
||
methods: {
|
||
async onBtnClick(btn) {
|
||
// console.log(btn, btn.action)
|
||
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.canvasToTempFilePath()
|
||
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;
|
||
}
|
||
&.border {
|
||
border: 2rpx solid #666;
|
||
border-radius: 12rpx;
|
||
}
|
||
.icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
&.icon-clear,
|
||
&.icon-prev,
|
||
&.icon-next {
|
||
margin-right: 4rpx;
|
||
}
|
||
&.icon-save {
|
||
}
|
||
}
|
||
.text {
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|