112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<p class="fsb-20 mb-5">Điều chỉnh tiêu đề</p>
|
|
<div
|
|
v-for="(v, i) in arr"
|
|
:key="i"
|
|
:class="i > 0 ? 'mt-4' : null"
|
|
>
|
|
<p class="fsb-14">Dòng thứ {{ i + 1 }}<span class="has-text-danger"> *</span></p>
|
|
<div class="field has-addons mt-1">
|
|
<div class="control is-expanded">
|
|
<input
|
|
class="input"
|
|
type="text"
|
|
v-model="v.label"
|
|
/>
|
|
</div>
|
|
<div class="control">
|
|
<a
|
|
class="button px-2 is-primary"
|
|
@click="add()"
|
|
>
|
|
<span> <SvgIcon v-bind="{ name: 'add1.png', type: 'white', size: 17 }"></SvgIcon></span>
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="control"
|
|
@click="remove(i)"
|
|
v-if="i > 0"
|
|
>
|
|
<a class="button px-2 is-dark">
|
|
<span>
|
|
<SvgIcon v-bind="{ name: 'bin.svg', type: 'white', size: 17 }"></SvgIcon>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p
|
|
class="help has-text-danger"
|
|
v-if="v.error"
|
|
>
|
|
{{ v.error }}
|
|
</p>
|
|
</div>
|
|
<div class="buttons mt-5">
|
|
<button
|
|
class="button is-primary has-text-white"
|
|
@click="update()"
|
|
>
|
|
Cập nhật
|
|
</button>
|
|
<button
|
|
class="button is-dark"
|
|
@click="$emit('close')"
|
|
>
|
|
Hủy bỏ
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ["label"],
|
|
data() {
|
|
return {
|
|
arr: [],
|
|
};
|
|
},
|
|
created() {
|
|
let arr1 = this.label.replace("<div>", "").replace("</div>", "").split("</p>");
|
|
arr1.map((v) => {
|
|
if (!this.$empty(v)) {
|
|
let label = v + "</p>";
|
|
label = this.$stripHtml(label);
|
|
this.arr.push({ label: label });
|
|
}
|
|
});
|
|
},
|
|
methods: {
|
|
add() {
|
|
this.arr.push({ label: undefined });
|
|
},
|
|
remove(i) {
|
|
this.$remove(this.arr, i);
|
|
},
|
|
checkError() {
|
|
let error = false;
|
|
this.arr.map((v) => {
|
|
if (this.$empty(v.label)) {
|
|
v.error = "Nội dung không được bỏ trống";
|
|
error = true;
|
|
}
|
|
});
|
|
if (error) this.arr = this.$copy(this.arr);
|
|
return error;
|
|
},
|
|
update() {
|
|
if (this.checkError()) return;
|
|
let label = "";
|
|
if (this.arr.length > 1) {
|
|
this.arr.map((v, i) => {
|
|
label += `<p${i < this.arr.length - 1 ? ' style="border-bottom: 1px solid white;"' : ""}>${v.label.trim()}</p>`;
|
|
});
|
|
label = `<div>${label}</div>`;
|
|
} else label = this.arr[0].label.trim();
|
|
this.$emit("modalevent", { name: "label", data: label });
|
|
this.$emit("close");
|
|
},
|
|
},
|
|
};
|
|
</script>
|