84 lines
2.2 KiB
Vue
84 lines
2.2 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 is-primary" @click="add()">
|
|
<span class="icon">
|
|
<i class="mdi mdi-plus"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="control" @click="remove(i)" v-if="(i>0)">
|
|
<a class="button is-primary">
|
|
<span class="icon">
|
|
<i class="mdi mdi-minus"></i>
|
|
</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" @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.$delete(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> |