vue2实现一个组件采集器
Test.vue
<AddComponents
ref="AddComponentsRef"
@refreshList="getPageData"
/>
TestAddComponents.vue
<template>
<!-- :visible.sync="dialogVisible" -->
<el-dialog
v-loading="loading"
class="add-components"
width="800px"
:close-on-click-modal="false"
:visible.sync="dialogVisible"
@close="closeDialog"
>
<template #title>
<div>
<span>
{{ type === 'add' ? '新增' : type === 'edit' ? '配置' :type === 'see' ? '查看':'' }}组件
</span>
<el-button
v-if="type ==='see'"
type="text"
size="small"
@click="configurationClick"
>
配置
</el-button>
</div>
</template>
<!-- {{ form }} -->
<!-- isDisabled {{ isDisabled }} -->
<el-form
ref="formRef"
:model="form"
label-width="120px"
:rules="rules"
>
<el-form-item
label="组件类型"
prop="type"
>
<el-select
v-model="form.type"
placeholder="请选择"
:disabled="isDisabled"
>
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
label="组件名称"
prop="name"
>
<el-input
v-model="form.name"
placeholder="请输入组件名称"
maxlength="20"
show-word-limit
:disabled="isDisabled"
/>
</el-form-item>
<el-form-item
label="描述"
prop="desc"
>
<el-input
v-model="form.desc"
placeholder="请输入描述"
maxlength="200"
show-word-limit
type="textarea"
:rows="5"
:disabled="isDisabled"
/>
</el-form-item>
<el-form-item
label="录入模式"
prop="entryMode"
>
<div class="tab-wrap">
<div
class="tab-item"
:class="[form.entryMode === 'form' ? 'active':'' , isDisabled ? 'disabled-div' : '']"
@click="changeTab('form')"
>
表单模式
</div>
<div
class="tab-item"
:class="[form.entryMode === 'code' ? 'active':'', isDisabled ? 'disabled-div' : '' ]"
@click="changeTab('code')"
>
编码模式
</div>
</div>
</el-form-item>
</el-form>
<div class="table-wrap">
<table
v-show="form.entryMode === 'form'"
class="dataTabble"
>
<thead
height="40"
style="background: #F8F8F8"
>
<tr>
<th>字段名称</th>
<th>字段类型</th>
<th>默认值</th>
<th>是否必填</th>
<th width="140">
操作
</th>
</tr>
</thead>
<draggable
v-if="cacheSelected.length > 0"
v-model="cacheSelected"
element="tbody"
chosen-class="chosen"
animation="300"
:handle="'.mover'"
>
<tr
v-for="(item,index) in cacheSelected"
:key="index"
>
<td
class="my-td"
width="100"
>
{{ item.name }}
</td>
<td
class="my-td"
width="100"
>
{{ item.type ? fieldTypeObj[item.type] : '-' }}
</td>
<td
class="my-td"
width="220"
>
<div v-if="item.type === 'singlelist'">
<el-radio
v-for="(it,idx) in item.options"
:key="idx"
v-model="item.defaultVal"
:label="it"
disabled
>
{{ it ? it.split("-")[0] : '-' }}
</el-radio>
</div>
<div v-else>
{{ item.defaultVal }}
</div>
</td>
<td
class="my-td"
width="100"
>
<el-checkbox
v-model="item.require"
disabled
/>
</td>
<td
class="my-td"
width="140"
:class="[isDisabled ? 'disabled-div' : '']"
>
<el-button
type="text"
size="mini"
style="color: #727272"
class="operate-btn"
@click="handleEdit(item)"
>
<i class="el-icon-edit-outline" />
</el-button>
<el-button
type="text"
size="mini"
style="color: #FD6061"
class="operate-btn"
@click="handleDelete(item)"
>
<i class="el-icon-delete" />
</el-button>
<el-button
type="text"
size="mini"
style="color: #727272"
class="mover operate-btn"
>
<i class="el-icon-menu" />
</el-button>
</td>
</tr>
</draggable>
</table>
</div>
<div
v-show="form.entryMode === 'form' && cacheSelected.length <= 0"
class="no-data"
>
<span>暂无数据</span>
</div>
<div v-show="form.entryMode === 'code'">
<el-input
v-model="form.codeVal"
placeholder="请输入"
type="textarea"
:rows="5"
maxlength="10000"
show-word-limit
/>
</div>
<div
v-show="form.entryMode === 'form'"
class="primary-btn"
:class="[isDisabled ? 'disabled-div' : '']"
@click="addField"
>
添加字段
</div>
<span
slot="footer"
class="dialog-footer"
>
<el-button @click="closeDialog">取 消</el-button>
<el-button
v-show="!isDisabled"
type="primary"
:loading="loading"
@click="submitForm"
> {{ loading ? '提交中 ...' : '确 定' }}</el-button>
</span>
<!-- 新建字段 -->
<AddField
ref="AddFieldRef"
@addFieldSubmit="addFieldSubmit"
/>
</el-dialog>
</template>
<script>
import AddField from './TestAddFileld.vue';
import { createTips } from '@/components/modalTips';
import draggable from 'vuedraggable';
import { Message } from 'element-ui';
export default {
name: 'TestAddComponents',
components: {AddField, draggable},
data() {
return {
dialogVisible: false,
type: 'add',
loading: false,
form: {
type: '',
name: '',
desc: '',
entryMode: 'form', // 录入模式
codeVal: '' // 编码模式
},
rules: {
type: [
{ required: true, message: '请选择组件归属类型', trigger: 'change' }
],
name: [
{ required: true, message: '请输入组件名称', trigger: 'change' }
]
},
// 定义要被拖拽对象的数组
cacheSelected: [],
fieldTypeObj: {
select: '下拉选择框',
line: '单行文本',
mulline: '多行文本',
int: '整数',
float: '浮点数',
singlelist: '单选列表',
upload: '上传',
ciphertext: '密文'
},
typeOptions: [],
id: '', // 编辑的id
isDisabled: false // 查询状态为禁用
};
},
async mounted() {
},
methods: {
// 打开弹框
async openDialog(params) {
// console.log('openDialog', params);
this.loading = false;
this.dialogVisible = true;
this.type = params.type;
this.id = params.id;
this.form.entryMode = 'form';
// 组件归属类型 下拉
this.typeOptions = [{label: 'ttt', value: 'ttt'}];
// 查询 组件的详情
if (this.type === 'edit' || this.type === 'copy' || this.type === 'see') {
if (this.type === 'see') {
this.isDisabled = true;
}
// 编辑逻辑
}
},
// 录入模式
changeTab(val) {
this.form.entryMode = val;
},
// 新增字段
addField() {
const params = {
type: 'add'
};
this.$refs.AddFieldRef.openDialog(params);
},
// table-编辑
handleEdit(row) {
// console.log('handleEdit', 'row', row, 'this', this.cacheSelected);
const index = this.cacheSelected.findIndex(({code}) => code === row.code);
const params = {
type: 'edit',
row,
index
};
this.$refs.AddFieldRef.openDialog(params);
},
// table-删除
handleDelete(row) {
// console.log('handleDelete', 'row', row);
createTips({
title: '提示',
type: 'isConfirm',
cancelStatus: true,
tipsContent: '确定删除该任务?',
confirmText: '确定后，将会从用户端租户的服务计划列表中删除',
submitCallback: () => {this.submitRecall(row);}
});
},
submitRecall(row) {
this.cacheSelected = this.cacheSelected.filter(item=> item.code !== row.code);
},
// 拿到 新增字段 数据
addFieldSubmit(obj, editIndex) {
// console.log('addFieldSubmit', obj, 'editIndex', editIndex, '');
let resArr = [...this.cacheSelected];
if (editIndex === 0 || editIndex) {
resArr.forEach((item, idx)=>{
if (idx === editIndex) {
resArr[editIndex] = obj;
}
});
} else {
resArr = [...this.cacheSelected, obj];
}
// console.log('resArr', resArr);
this.cacheSelected = [...resArr];
},
// 新增组件 - 确定
submitForm() {
this.$refs.formRef.validate(valid => {
if (valid) {
let submitObj = {};
let editId = this.type === 'edit' || this.type === 'see' ? this.id : '';
if (this.form.entryMode === 'form') {
if (!this.cacheSelected.length) { Message.error('请添加字段'); return;}
submitObj = {
id: editId,
...this.form,
fields: this.cacheSelected
};
// console.log('form-submitObj', submitObj);
this.loading = true;
this.$api.cloudMonitoring.addCollectorComponents(submitObj).then(res => {
// console.log('新增res', res);
this.loading = false;
if (res.code == 200) {
this.$emit('refreshList');
let msg = '';
msg = this.type === 'edit' ? '编辑' : '新增';
this.$message({
message: `${msg}成功`,
type: 'success'
});
this.closeDialog();
}
});
} else {
submitObj = {
id: editId,
...this.form,
fields: []
};
// console.log('编码-submitObj', submitObj);
this.loading = true;
this.$api.cloudMonitoring.addCollectorComponents(submitObj).then(res => {
this.loading = false;
if (res.code == 200) {
this.$emit('refreshList');
let msg = '';
msg = this.type === 'edit' ? '编辑' : '新增';
this.$message({
message: `${msg}成功`,
type: 'success'
});
this.closeDialog();
}
});
}
}
});
},
// 新增组件 - 关闭
closeDialog() {
this.$refs.formRef.resetFields();
Object.keys(this.form).forEach(key=>{this.form[key] = '';});
this.dialogVisible = false;
this.type = '';
this.cacheSelected = [];
this.id = '';
this.isDisabled = false;
this.loading = false;
},
// 查看状态下的 配置
configurationClick() {
this.isDisabled = false;
}
}
};
</script>
<style lang="scss" scoped>
.add-components {
::v-deep .el-select {
width: 100%;
}
.tab-wrap {
display: flex;
.tab-item {
width: 100px;
height: 32px;
line-height: 32px;
text-align: center;
background: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
.active {
background: #2469F1;
color: #fff;
border: 1px solid #2469F1;
}
}
.input-item {
outline: none;
}
.primary-btn {
margin-top: 10px;
cursor: pointer;
border-radius: 4px;
padding: 0 17px;
font-size: 14px;
height: 32px;
line-height: 32px;
text-align: center;
margin-right: 8px;
background: #2469F1;
color: #fff;
width: 90px;
}
.operate-btn {
font-size: 14px;
}
.dataTabble {
border-collapse: collapse;
tr {
border-bottom: 1px solid #f5f6f8
}
.my-td {
text-align: center;
}
}
.table-wrap {
max-height: 310px;
overflow-y: scroll;
}
.no-data {
height: 40px;
line-height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.disabled-div {
pointer-events: none;
cursor: not-allowed;
}
::v-deep .el-checkbox__input.is-disabled.is-checked
.el-checkbox__inner::after {
border-color: #fff;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
color: #606266;
}
::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
background-color: #409eff;
border-color: #409eff;
}
::v-deep .el-radio__input.is-disabled + span.el-radio__label {
color: #606266!important;
}
}
</style>
TestAddFileld.vue
<!-- 新建字段 -->
<template>
<el-dialog
v-loading="addFieldLoading"
class="add-field-dailog"
:title="`${type === 'add' ? '新建' : '编辑'}字段`"
:visible.sync="addFieldVisible"
width="600px"
:close-on-click-modal="false"
append-to-body
@close="closeAddFieldDialog"
>
<!-- addFieldform {{ addFieldform }} -->
<el-form
ref="addFieldRef"
:model="addFieldform"
label-width="100px"
:rules="addFieldRules"
>
<el-form-item
label="字段名称"
prop="name"
>
<el-input
v-model="addFieldform.name"
placeholder="请输入字段名称"
maxlength="20"
show-word-limit
clearable
/>
</el-form-item>
<el-form-item
label="字段编码"
prop="code"
>
<el-input
v-model="addFieldform.code"
placeholder="请输入字段编码"
maxlength="20"
show-word-limit
clearable
/>
</el-form-item>
<el-form-item
label="字段类型"
prop="type"
>
<el-select
v-model="addFieldform.type"
placeholder="请选择字段类型"
style="width: 100%"
clearable
@change="typeChange"
>
<el-option
v-for="(item,idx) in fieldTypeOptions"
:key="idx"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<!-- 单选列表 || 下拉列表 -->
<div
v-if="addFieldform.type === 'singlelist' || addFieldform.type === 'select'"
class="value-selected"
>
<!-- currentHoverVal {{ currentHoverVal }} -->
<div class="value-selected-title">
<span class="require">*</span> 待选值
</div>
<div class="single-select-con">
<el-input
v-model="singlelistKey"
placeholder="输入选项值的key"
class="single-select"
clearable
maxlength="100"
show-word-limit
@keyup.enter.native="singlelistEnter()"
/>
<el-input
v-model="singlelistVal"
placeholder="输入选项值的value"
class="single-select"
clearable
maxlength="100"
show-word-limit
@keyup.enter.native="singlelistEnter()"
>
<el-button
slot="append"
@click="singlelistConfirm"
>
确认
</el-button>
</el-input>
</div>
<draggable
v-if="cacheSelected.length > 0"
v-model="cacheSelected"
class="dataTabble"
element="tbody"
chosen-class="chosen"
animation="300"
:handle="'.mover'"
>
<div
v-for="(item,index) in cacheSelected"
:key="index"
style="mariginBottom: 10"
class="row-tr"
>
<td
class="row-td"
width="150"
>
{{ item.key }}
</td>
<td
class="row-td"
width="150"
>
{{ item.value }}
</td>
<td
class="row-set-td row-set"
width="200"
@mouseover="setDefaultMousemove(item)"
@mouseout="setDefaultMouseout()"
>
<div
v-show="currentHoverVal === item.key + '-' + item.value"
class="default"
>
{{ currentHover === item.key + '-' + item.value ? '' : '默认值' }}
</div>
<div
v-show="currentHover ===item.key + '-' + item.value"
@click="setDefault(item)"
>
{{ currentHoverVal === item.key + '-' + item.value ? '默认值' : '设为默认值' }}
</div>
</td>
<td
class="row-set-td"
width="60"
>
<el-button
type="text"
size="mini"
style="color: #FD6061"
class="operate-btn"
@click="handleDelete(item)"
>
<i class="el-icon-delete" />
</el-button>
<el-button
type="text"
size="mini"
style="color: #727272"
class="mover operate-btn"
>
<i class="el-icon-menu" />
</el-button>
</td>
</div>
</draggable>
</div>
<!-- 单行文本 -->
<div
v-else-if="addFieldform.type === 'line'"
class="value-selected"
>
<div class="value-selected-title">
默认值
</div>
<div class="value-selected-con">
<el-input
v-model="lineVal"
placeholder="请输入默认值"
class="input-with-select"
clearable
/>
</div>
</div>
<!-- 多行文本 -->
<div
v-else-if="addFieldform.type === 'mulline'"
class="value-selected"
>
<div class="value-selected-title">
默认值
</div>
<div class="value-selected-con">
<el-input
v-model="mullineVal"
placeholder="请输入默认值"
class="input-with-select"
clearable
:rows="5"
maxlength="10000"
show-word-limit
type="textarea"
/>
</div>
</div>
<!-- 整数 -->
<div
v-else-if="addFieldform.type === 'int'"
class="value-selected"
>
<div class="value-selected-title">
默认值
</div>
<div class="value-selected-con">
<el-input
v-model="intVal"
placeholder="请输入默认值"
class="input-with-select"
clearable
maxlength="10"
show-word-limit
type="number"
@input="intConfirm(intVal)"
/>
</div>
</div>
<!-- 浮点数 -->
<div
v-else-if="addFieldform.type === 'float'"
class="value-selected"
>
<div class="value-selected-title">
默认值
</div>
<div class="value-selected-con">
<el-input
v-model="floatVal"
placeholder="请输入默认值"
class="input-with-select"
clearable
maxlength="20"
show-word-limit
@input="floatConfirm(floatVal)"
/>
</div>
</div>
<el-form-item label="是否必填">
<el-radio-group v-model="addFieldform.require">
<el-radio :label="false">
否
</el-radio>
<el-radio :label="true">
是
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="字段校验"
prop="checkRule"
>
<el-input
v-model="addFieldform.checkRule"
placeholder="请输入字段校验"
clearable
/>
</el-form-item>
</el-form>
<span
slot="footer"
class="dialog-footer"
>
<el-button @click="closeAddFieldDialog">取 消</el-button>
<el-button
type="primary"
:loading="addFieldLoading"
@click="addFieldSubmit"
>确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { Message } from 'element-ui';
import draggable from 'vuedraggable';
export default {
name: 'TestAddField',
components: {draggable},
data() {
return {
// 新建字段 start
addFieldLoading: false,
addFieldVisible: false,
addSubmitLoading: false,
type: '',
addFieldform: {
name: '',
code: '',
type: '',
require: '',
checkRule: ''
},
addFieldRules: {
name: [
{ required: true, message: '请输入字段名称', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入字段编码', trigger: 'blur' }
],
type: [
{ required: true, message: '请选择字段类型', trigger: 'change' }
]
},
// 字段类型
fieldTypeOptions: [
{
label: '下拉选择框',
value: 'select'
},
{
label: '单行文本',
value: 'line'
},
{
label: '多行文本',
value: 'mulline'
},
{
label: '整数',
value: 'int'
},
{
label: '浮点数',
value: 'float'
},
{
label: '单选列表',
value: 'singlelist'
},
{
label: '上传',
value: 'upload'
},
{
label: '密文',
value: 'ciphertext'
}
],
// 单选列表 - start
singlelistKey: '',
singlelistVal: '', // 待选值
// 待选值的 列表
cacheSelected: [],
currentHover: '',
currentHoverVal: '', // 默认值
// 单选列表 - end
// 单行文本
lineVal: '',
// 多选文本
mullineVal: '',
// 整数
intVal: '',
// 浮点数
floatVal: '',
editIndex: '' // 编辑的index
};
},
methods: {
// 打开弹框
async openDialog(params) {
// console.log('openDialog', params);
this.addFieldVisible = true;
this.type = params.type;
if (params.type === 'edit') {
this.addFieldform.name = params.row.name;
this.addFieldform.code = params.row.code;
this.addFieldform.type = params.row.type;
this.addFieldform.require = params.row.require;
this.addFieldform.checkRule = params.row.checkRule;
this.editIndex = params.index;
// 单行文本 多行文本 整数 浮点数 单选列表 上传 密文 下拉列表
this.resetFields();
if (params.row.type === 'line') {
this.lineVal = params.row.defaultVal;
} else if (params.row.type === 'mulline') {
this.mullineVal = params.row.defaultVal;
} else if (params.row.type === 'int') {
this.intVal = params.row.defaultVal;
} else if (params.row.type === 'float') {
this.floatVal = params.row.defaultVal;
} else if (params.row.type === 'singlelist' || params.row.type === 'select') {
let cacheSelected = [];
params.row.options.forEach(item=>{
let resItem = item.split('-');
cacheSelected.push({
key: resItem[0],
value: resItem[1]
});
});
this.cacheSelected = [...cacheSelected];
this.currentHoverVal = params.row.defaultVal;
}
}
},
// 确定
addFieldSubmit() {
this.$refs.addFieldRef.validate(valid => {
if (valid) {
let submitObj = {};
// 单选列表 || 下拉列表
if (this.addFieldform.type === 'singlelist' || this.addFieldform.type === 'select') {
// console.log('cacheSelected', this.cacheSelected, 'currentHoverVal', this.currentHoverVal);
// && this.currentHoverVal
if (this.cacheSelected.length) {
let options = [];
this.cacheSelected.forEach(item=>{
options.push(item.key + '-' + item.value);
});
submitObj = {
...this.addFieldform,
options,
defaultVal: this.currentHoverVal
};
// console.log('singlelist-submitObj', submitObj);
this.$emit('addFieldSubmit', submitObj, this.editIndex);
this.closeAddFieldDialog();
} else {
let msg = this.addFieldform.type == 'singlelist' ? '单选列表' : this.addFieldform.type == 'select' ? '下拉选择框' : '';
Message.error(`${msg}的待选值-key与value值需要填写`);
}
} else if (this.addFieldform.type === 'line' || this.addFieldform.type === 'mulline' ||
this.addFieldform.type === 'int' || this.addFieldform.type === 'float' ||
this.addFieldform.type === 'upload' || this.addFieldform.type === 'ciphertext'
) {
let defaultVal = '';
// 单行文本 || 多行文本 || 整数 || 浮点 || 上传 || 密文
if (this.addFieldform.type === 'line') {
defaultVal = this.lineVal;
} else if (this.addFieldform.type === 'mulline') {
defaultVal = this.mullineVal;
} else if (this.addFieldform.type === 'int') {
defaultVal = this.intVal;
} else if (this.addFieldform.type === 'float') {
defaultVal = this.floatVal;
} else if (this.addFieldform.type === 'upload') {
defaultVal = '';
} else if (this.addFieldform.type === 'ciphertext') {
defaultVal = '';
}
submitObj = {
...this.addFieldform,
defaultVal,
options: []
};
this.$emit('addFieldSubmit', submitObj, this.editIndex);
this.closeAddFieldDialog();
}
}
});
},
// 重置字段
resetFields() {
this.lineVal = '';
this.mullineVal = '';
this.intVal = '';
this.floatVal = '';
this.currentHover = '';
this.currentHoverVal = '';
this.cacheSelected = [];
this.singlelistKey = '';
this.singlelistVal = '';
},
// 关闭
closeAddFieldDialog() {
this.$refs.addFieldRef.resetFields();
Object.keys(this.addFieldform).forEach(key=>{this.addFieldform[key] = '';});
this.addFieldVisible = false;
this.editIndex = '';
this.resetFields();
},
// key || value的回车
singlelistEnter() {
this.singlelistConfirm('enter');
},
// 单选列表 || 下拉列表 确认 start
singlelistConfirm(type) {
// console.log('singlelistConfirm', this.singlelistVal);
if (this.singlelistVal && this.singlelistKey) {
if (this.cacheSelected.length > 0) {
// console.log('this.cacheSelected', this.cacheSelected);
this.cacheSelected.forEach(item=>{
if (item.key === this.singlelistKey) {
this.$message.error('请勿添加重复项');
} else {
this.cacheSelected.push({
key: this.singlelistKey,
value: this.singlelistVal
});
this.cacheSelected = this.cacheSelected.filter(item =>{ return item.key && item.value;});
this.singlelistVal = '';
this.singlelistKey = '';
}
});
} else {
this.cacheSelected.push({
key: this.singlelistKey,
value: this.singlelistVal
});
this.singlelistVal = '';
this.singlelistKey = '';
}
} else {
if (type === 'enter') return false;
this.$message.error('待选值-表单的key与value两者需要填写');
}
},
// 删除
handleDelete(row) {
this.cacheSelected = this.cacheSelected.filter(item=> item.key !== row.key);
row.name === this.currentHoverVal ? this.currentHoverVal = '' : '';
},
// 设置 默认值
setDefault(row) {
this.currentHoverVal = row.key + '-' + row.value;
this.currentHover = '';
},
// 鼠标移入
setDefaultMousemove(row) {
this.currentHover = row.key + '-' + row.value;
},
// 鼠标移出
setDefaultMouseout() {
this.currentHover = '';
},
// 单选列表 end
// 整数
intConfirm(v) {
this.intVal = v.replace(/[^-0-9]/g, '');
},
// 浮点数
floatConfirm(v) {
this.floatVal = v.replace(/^(\d*\.?\d{0,2}).*/, '$1');
},
// 类型切换 重置字段
typeChange() {
this.resetFields();
}
}
};
</script>
<style lang="scss" scoped>
.add-field-dailog {
.require {
color: #ef3f3f;
}
.value-selected {
padding: 0 25px;
.value-selected-title {
}
.value-selected-con {
margin: 10px 0;
}
.dataTabble {
border-collapse: collapse;
.row-tr {
border: 1px solid #f5f6f8;
background: #fff;
margin-bottom: 8px;
}
.row-td {
text-align: left;
padding-left: 10px;
}
.row-set-td {
padding-right: 10px;
text-align: right;
}
.row-set {
font-size: 14px;
color: #409eff;
cursor: pointer;
}
.operate-btn {
font-size: 14px;
}
}
.default {
color: #666;
}
}
.single-select-con {
display: flex;
justify-content: center;
align-items: center;
margin: 5px 0;
}
}
</style>
效果
1100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
