mirror of
https://github.com/doocs/md.git
synced 2025-01-23 20:34:41 +08:00
b50ae32834
* update framework to uni-app * fix: bug fix * fix: bug fix * 修改输出路径 * feat: publicPath * feat: manifest update * fix: cssEditor theme * fix: style * style: format code with prettier * fix: table style & copy style on the night mode * fix: upload image * fix: style Co-authored-by: yanglbme <szuyanglb@outlook.com>
123 lines
2.7 KiB
Vue
123 lines
2.7 KiB
Vue
<template>
|
||
<el-dialog
|
||
title="插入表格"
|
||
class="insert__dialog"
|
||
:visible="value"
|
||
@close="$emit('input', false)"
|
||
border
|
||
>
|
||
<el-row class="tb-options" type="flex" align="middle" :gutter="10">
|
||
<el-col>
|
||
行数：
|
||
<el-input-number
|
||
v-model="rowNum"
|
||
controls-position="right"
|
||
:min="1"
|
||
:max="100"
|
||
size="small"
|
||
></el-input-number>
|
||
</el-col>
|
||
<el-col>
|
||
列数：
|
||
<el-input-number
|
||
v-model="colNum"
|
||
controls-position="right"
|
||
:min="1"
|
||
:max="100"
|
||
size="small"
|
||
></el-input-number>
|
||
</el-col>
|
||
</el-row>
|
||
<table style="border-collapse: collapse" class="input-table">
|
||
<tr
|
||
:class="{ 'head-style': row === 1 }"
|
||
v-for="row in rowNum + 1"
|
||
:key="row"
|
||
>
|
||
<td v-for="col in colNum" :key="col">
|
||
<el-input
|
||
align="center"
|
||
v-model="tableData[`k_${row - 1}_${col - 1}`]"
|
||
:placeholder="row === 1 ? '表头' : ''"
|
||
/>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button :type="btnType" plain @click="$emit('input', false)"
|
||
>取 消</el-button
|
||
>
|
||
<el-button :type="btnType" @click="insertTable" plain>确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import config from "../../assets/scripts/config";
|
||
import { createTable } from "../../assets/scripts/util";
|
||
import { mapState, mapMutations } from "vuex";
|
||
export default {
|
||
props: {
|
||
value: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
config: config,
|
||
rowNum: 3,
|
||
colNum: 3,
|
||
tableData: {},
|
||
};
|
||
},
|
||
computed: {
|
||
btnType() {
|
||
return this.nightMode ? "default" : "primary";
|
||
},
|
||
...mapState({
|
||
nightMode: (state) => state.nightMode,
|
||
editor: (state) => state.editor,
|
||
}),
|
||
},
|
||
methods: {
|
||
// 插入表格
|
||
insertTable() {
|
||
const cursor = this.editor.getCursor();
|
||
const table = createTable({
|
||
data: this.tableData,
|
||
rows: this.rowNum,
|
||
cols: this.colNum,
|
||
});
|
||
|
||
this.tableData = {};
|
||
this.rowNum = 3;
|
||
this.colNum = 3;
|
||
this.editor.replaceSelection(`\n${table}\n`, "end");
|
||
this.$emit("input", false);
|
||
this.editorRefresh();
|
||
},
|
||
...mapMutations(["editorRefresh"]),
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
/deep/ .el-dialog {
|
||
width: 55%;
|
||
min-height: 375px;
|
||
min-width: 440px;
|
||
}
|
||
.tb-options {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.input-table ::v-deep .el-input__inner {
|
||
border-radius: 0;
|
||
}
|
||
|
||
.head-style /deep/ .el-input__inner {
|
||
background-color: #f2f2f2;
|
||
}
|
||
</style>
|