cari

Rumah  >  Soal Jawab  >  teks badan

Vue js - Tambahkan teks dan kotak lungsur turun ke kotak kandungan HTML yang boleh diedit

<p>Saya menggunakan Vue.js. Saya cuba menambah teks dan kotak lungsur turun dalam div HTML yang boleh diedit. </p><p>Saya mahu menambah kotak lungsur turun menggunakan butang. Kotak lungsur ini boleh ditambah di mana-mana dalam teks, sama seperti tempat saya meletakkan kursor saya. </p><p>Sekarang, ia hampir berfungsi, tetapi saya tidak menemui masalah. </p><p>Apabila saya memasukkan dan menambah berbilang kotak lungsur dan kemudian menekan butang "Dapatkan Model Data", ia sentiasa menunjukkan bahawa pilihan kotak lungsur yang saya pilih adalah salah. Maksud saya ia sentiasa menunjukkan pilihan pertama. </p><p>Menggunakan butang "Dapatkan Model Data" ini, saya cuba mendapatkan semua pilihan teks+pilihan. </p><p>Berikut ialah kod saya:</p><p><br /></p> <pre class="brush:php;toolbar:false;"><template> <div> <div class="content-editable" contenteditable="true" @input="onInput" ref="contentEditable"></div> <butang @click="addDropdown">Tambah Dropdown</button> <button @click="getDataModel">Dapatkan Model Data</button> <div>{{ dataModel }}</div> </div> </template> <skrip> eksport lalai { data() { kembali { kandungan: '', lungsur turun: [], Pilihan jatuh turun: ['Pilihan 1', 'Pilihan 2', 'Pilihan 3'], Model data: '', }; }, kaedah: { onInput(event) { this.content = event.target.innerHTML.replace(/<div><br></div>/g, ''); }, addDropdown() { const dropdown = { selectedOption: this.dropdownOptions[0], }; this.dropdowns.push(dropdown); const editableDiv = this.$refs.contentEditable; const dropdownSelect = document.createElement('select'); dropdownSelect.style.width = '100px'; this.dropdownOptions.forEach((option) => { const dropdownOption = document.createElement('option'); dropdownOption.value = pilihan; dropdownOption.text = pilihan; dropdownSelect.appendChild(dropdownOption); }); editableDiv.appendChild(dropdownSelect); }, getDataModel() { const editableDiv = this.$refs.contentEditable; const clonedDiv = editableDiv.cloneNode(true); const selectElements = clonedDiv.querySelectorAll('select'); this.dropdowns.forEach((dropdown, index) => { const selectedOption = dropdown.selectedOption; const selectedOptionText = Array.from(selectElements[index].options).find((option) => option.value === selectedOption)?.text; const selectedOptionTextNode = document.createTextNode(` ${selectedOptionText}`); selectElements[index].replaceWith(selectedOptionTextNode); }); this.dataModel = clonedDiv.textContent; }, }, }; </skrip> <skop gaya> .content-editable { sempadan: 1px pepejal #ccc; padding: 10px; ketinggian min: 100px; margin-bawah: 10px; } </style></pre> <p><br /></p>
P粉288069045P粉288069045512 hari yang lalu572

membalas semua(1)saya akan balas

  • P粉321584263

    P粉3215842632023-07-28 10:46:58

    Vue.js dipacu data dan mengamalkan pemikiran MVVM. Jika anda ingin membuat berbilang teg "input", lebih masuk akal untuk menggunakan v-for dan bukannya mencipta DOM secara dinamik. 

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style scoped>
        .content-editable {
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 100px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <template>
            <div>
                <button @click="addDropdown">creatSelect</button>
                <div v-for="(dropdown, index) in dropdowns" :key="index">
                    <select v-model="dropdown.selectedValue">
                        <option v-for="option in dropdown.options" :value="option.value" :key="option.value">{{
                            option.label }}</option>
                    </select>
                </div>
            </div>
            <button @click="getAllSelectedValues">getValue：</button>
            <div>valueList：{{ allSelectedValues }}</div>
        </template>

    </div>



</body>

</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dropdowns: [],

            dropdownOptions: [
                { value: 'option1', label: 'option1' },
                { value: 'option2', label: 'option2' },
                { value: 'option3', label: 'option3' },
                { value: 'option4', label: 'option4' },
            ],
            allSelectedValues: [],
        },
        methods: {
            addDropdown() {
                this.dropdowns.push({
                    selectedValue: null,
                    options: this.dropdownOptions,
                });
            },
            getAllSelectedValues() {
                this.allSelectedValues = this.dropdowns.map((dropdown) => dropdown.selectedValue);
            },
        },

    })


</script>

    Semoga ini membantu!

    balas
    0
  • Batalbalas