<!--
|
* @Author: 张嘉彬
|
* @Date: 2022-03-03 17:47:43
|
* @Description:
|
-->
|
<template>
|
<div class="drawer-container">
|
<div>
|
<div class="drawer-item">
|
<span>样式</span>
|
<el-radio-group v-model="btnStyleVal.type" style="margin-left:20px;">
|
<el-radio label="text">文字样式</el-radio>
|
<el-radio label="base">基础样式</el-radio>
|
</el-radio-group>
|
</div>
|
<div class="drawer-item">
|
<span>尺寸</span>
|
<el-radio-group v-model="btnStyleVal.size" style="margin-left:20px;">
|
<el-radio label="">默认</el-radio>
|
<el-radio label="medium">中等</el-radio>
|
<el-radio label="small">小型</el-radio>
|
<el-radio label="mini">超小</el-radio>
|
</el-radio-group>
|
</div>
|
<div class="drawer-item">
|
<span style="margin-right:20px;">预览</span>
|
<el-button :size="btnStyleVal.size" :type="btnStyleVal.type==='text'?'text':'primary'">
|
{{btnStyleVal.type==='text'?'文字样式':'基础样式'}}
|
</el-button>
|
</div>
|
<div style="text-align:center;margin-top:100px;">
|
<el-button size="small" type="primary" icon="el-icon-circle-check" @click="saveSetting">
|
保存配置
|
</el-button>
|
<el-button size="small" icon="el-icon-refresh" @click="resetSetting">
|
重置配置
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
data () {
|
return {
|
btnStyleVal: {
|
type: 'text',
|
size: ''
|
}
|
}
|
},
|
created () {
|
this.btnStyleVal = { ...this.$store.state.btnStyleVal }
|
},
|
methods: {
|
saveSetting () {
|
this.$store.commit('setBtnStyle', this.btnStyleVal)
|
this.$message.success('保存成功')
|
this.$emit('close')
|
},
|
resetSetting () {
|
this.$store.commit('setBtnStyle', {
|
type: 'text',
|
size: ''
|
})
|
this.$message.success('重置成功')
|
this.$emit('close')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.setting-drawer-content {
|
.setting-drawer-title {
|
margin-bottom: 12px;
|
color: rgba(0, 0, 0, 0.85);
|
font-size: 14px;
|
line-height: 22px;
|
font-weight: bold;
|
}
|
|
.setting-drawer-block-checbox {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
margin-top: 10px;
|
margin-bottom: 20px;
|
|
.setting-drawer-block-checbox-item {
|
position: relative;
|
margin-right: 16px;
|
border-radius: 2px;
|
cursor: pointer;
|
|
img {
|
width: 48px;
|
height: 48px;
|
}
|
|
.setting-drawer-block-checbox-selectIcon {
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
padding-top: 15px;
|
padding-left: 24px;
|
color: #1890ff;
|
font-weight: 700;
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
|
.drawer-container {
|
padding: 24px;
|
font-size: 14px;
|
line-height: 1.5;
|
word-wrap: break-word;
|
|
.drawer-title {
|
margin-bottom: 12px;
|
color: rgba(0, 0, 0, 0.85);
|
font-size: 14px;
|
line-height: 22px;
|
}
|
|
.drawer-item {
|
color: rgba(0, 0, 0, 0.65);
|
font-size: 14px;
|
padding: 12px 0;
|
}
|
|
.drawer-switch {
|
float: right;
|
}
|
}
|
</style>
|
