javascript - ventana - vue modal npm
¿Cómo mostrar un valor de elementos en un modal vue? (3)
Tengo varios elementos que se muestran como elementos <li> en un bucle. Para cada elemento deseo un comportamiento tal que cuando se hace clic en el elemento se abra un cuadro modal. Dentro del cuadro modal quiero contenidos que sean específicos del elemento al que se hizo clic.
Los datos a continuación muestran todos los elementos:
{value: 10, name: "foo"},
{value: 12, name: "bar"},
{value: 14, name: "foobar"},
{value: 22, name: "test"},
{value: 1, name: "testtooo"},
{value: 8, name: "something"}
Cuando hago clic en un elemento, quiero ver la propiedad de value dentro del cuadro modal.
He creado un violín para esto: https://jsfiddle.net/hvb9hvog/14/
Pregunta
Obtuve el funcionamiento modal, sin embargo, ¿cómo puedo mostrar cada propiedad de value elementos dentro del modal?
No estoy seguro si estás pidiendo esto usando Vue.js o solo JS. Entonces, aquí están mis respuestas (ejemplos básicos). Te recomiendo que leas sobre la delegación de eventos + eventos en vuejs.
Vue Js
<template>
<div class="content">
<ul>
<li v-for="item in items" @click.prevent="showModal(item)">{{ item }}</li>
</ul>
<div class="modal" v-show="isModalVisible">
{{ JSON.stringify(selectedItem) }}
<a href="#" @click.prevent="selectedItem = null">close modal</a>
</div>
</div>
</template>
<script>
export default {
name: ''something'',
data () {
return {
selectedItem: item,
items: [{
id: 1,
name: ''something''
}, {
id: 2,
name: ''something #2''
}]
}
},
computed: {
isModalVisible () {
return this.selectedItem !== null
}
}
methods: {
showModal (item) {
this.selectedItem = item
}
}
}
</script>
Simple javascript
const toggleModal = content => {
const $body = document.querySelector(''body'')
const $modal = $body.querySelector(''.modal'')
$modal && $modal.remove()
$body.insertAdjacentHTML(''beforeend'',`<div class="modal">${content}</div>`)
}
document.querySelector(''ul'').addEventListener(''click'', e => {
if (! e.target.matches(''li'')) {
return
}
toggleModal(e.target.innerText)
});
- Acerca de la delegación de eventos .
- Acerca de insertAdjacentHtml .
- Acerca del manejo de eventos de Vuejs
Agregar propiedad "req" a los datos
data() {
return {
...
req: {},
...
}
}
establecer evento de clic:
<a href="#" @click="showModal = true;req = request">{{request.name}}</a>
agregar tragamonedas
...
<h3 slot="header">custom header</h3>
<div slot="body">
{{req.value}}
</div>
...
Estoy seguro de que hay varias maneras de hacerlo, pero una forma sería crear una nueva propiedad de data , vamos a llamarlo value . Cuando haces @click el valor de li , obtienes su value , lo configuras en la propiedad de value y muestra esa propiedad de value en el body del modal ( {{this.value}} ).
Puede tener dos métodos @click , así que cree otro que actualice la propiedad de data que acaba de crear, llamada value .
Cambios de código relevantes:
En tu elemento li :
<li v-for="request in filteredRequests">
<a href="#" @click="showModal = true; setVal(request.value)">{{request.name}}</a>
</li>
En su marcado modal:
<modal v-if="showModal" @close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
<div slot="body">
{{this.value}}
</div>
</modal>
En data vue:
data: {
requests: [
{value: 10, name: "foo"},
{value: 12, name: "bar"},
{value: 14, name: "foobar"},
{value: 22, name: "test"},
{value: 1, name: "testtooo"},
{value: 8, name: "something"}
],
num: 0,
showModal: false,
value: 9999999999
},
En vue methods :
methods: {
setVal(val) {
this.value = val;
}
},
Vue.component(''modal'', {
template: ''#modal-template''
})
var vm = new Vue({
el: "#app",
data: {
requests: [{
value: 10,
name: "foo"
},
{
value: 12,
name: "bar"
},
{
value: 14,
name: "foobar"
},
{
value: 22,
name: "test"
},
{
value: 1,
name: "testtooo"
},
{
value: 8,
name: "something"
}
],
num: 0,
showModal: false,
value: 9999999999
},
methods: {
setVal(val) {
this.value = val;
}
},
computed: {
c: function() {
return `Slider Number: (${this.num})`
},
filteredRequests() {
return this.requests.filter(r => r.value > this.num)
}
},
});
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit(''close'')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<div id="app">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">色</label>
<div class="col-md-10">
<input class="form-control" v-model="c" :style="{backgroundColor: c}" />
<div class="help-block">
<input type="range" min="0" max="360" v-model.number="num" />
<ul class="ml-thumbs">
<li v-for="request in filteredRequests">
<a href="#" @click="showModal = true; setVal(request.value)">{{request.name}}</a>
</li>
</ul>
<modal v-if="showModal" @close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
<div slot="body">
{{this.value}}
</div>
</modal>
</div>
</div>
</div>
</div>
</div>