Ву.Яш - элемент пользовательского интерфейса - сообщения в сообщение


Ву.Яш - элемент пользовательского интерфейса - сообщения в сообщение

31.05.2017 11:25:09 Просмотров 62 Источник

Я использую vue-js 2.3 и element-ui. Этот вопрос более специфичен для компонента MessageBox, для которого вы можете найти документацию здесь

Проблема

Я хотел бы иметь возможность вводить html-сообщение в MessageBox Более конкретно, я хотел бы отобразить данные, содержащиеся в dataForMessage, используя цикл v-for.

По-видимому, мы можем вставить vnodeв сообщение, но я понятия не имею, где найти некоторую информацию о синтаксисе.

https://jsfiddle.net/7ugahcfz/

var Main = {
   data:function () {
   return {
    dataForMessage: [
     {
        name:'Paul',
        gender:'Male',
      },
      {
        name:'Anna',
        gender:'Female',
      },
    ],
   }
   },
    methods: {
      open() {
        const h = this.$createElement;
        this.$msgbox({
          title: 'Message',
          message: h('p', null, [
            h('span', null, 'Message can be '),
            h('i', { style: 'color: teal' }, 'VNode '),
            h('span', null, 'but I would like to see the data from '),
             h('i', { style: 'color: teal' }, 'dataForMessage'),
          ])
        }).then(action => {
        });
      },
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
vue.js vuejs2
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/44294060/vue-js-element-ui-html-message-in-messagebox#comment75594853_44294060
Можете ли вы привести пример HTML-макета, который вы хотите? jsfiddle.net/7ugahcfz/1
https://stackoverflow.com/questions/44294060/vue-js-element-ui-html-message-in-messagebox#comment75594875_44294060
Кроме того, это документация для createElement. vuejs.org/v2/guide/render-function.html#createElement-Arguments
https://stackoverflow.com/questions/44294060/vue-js-element-ui-html-message-in-messagebox#comment75594961_44294060
https://stackoverflow.com/questions/44294060/vue-js-element-ui-html-message-in-messagebox#comment80453207_44294060
Может быть, вы можете использовать" диалог " вместо этого : element.eleme.io/#/en-US/component/dialog

Ответы - Ву.Яш - элемент пользовательского интерфейса - сообщения в сообщение / Vue.js - Element UI - HTML message in MessageBox

Является ответом!
Bert

31.05.2017 11:45:22

Я думаю, это то, чего ты хочешь.

methods: {
  open() {
    const h = this.$createElement;
    let people = this.dataForMessage.map(p => h('li', `${p.name} ${p.gender}`))
    const message = h('div', null, [
      h('h1', "Model wished"),
      h('div', "The data contained in dataForMessage are:"),
      h('ul', people)
    ])
    this.$msgbox({
      title: 'Message',
      message
    }).then(action => {
    });
  },
}

Пример .

Источник
https://stackoverflow.com/questions/44294060/vue-js-element-ui-html-message-in-messagebox/44294368#comment75595159_44294368
Это именно то, что я искал. Еще раз спасибо вам!
marlar

16.09.2019 05:04:37

Вы также можете использовать HTML напрямую и конвертировать в vnodes с помощью domProps:

const html = '<div><h1>Model wished</h1><div>The data contained in dataForMessage are:</div><ul><li>Paul Male</li><li>Anna Female</li></ul></div>'
const message = h("div", {domProps:{innerHTML: html}})

(Вышеизложенное упрощается без цикла. Просто чтобы понять идею)

Скрипка

Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X