使用 Vue 查找表情符号 table

Question

我正在使用 npm 模块 if-emoji 来检测用户是否可以查看表情符号。 Modernizr 中有一个类似的工具。

如果用户无法查看表情符号，我会改为显示表情符号的图像。所以我的 Vue HTML 看起来像这样：

<h2 v-if="this.emojis"></h2>
<h2 v-if="!this.emojis"><img src="https://example.com/emoji.png">/h2>

这是否仍然为可以查看表情符号的用户下载图像，因此不必要地使用带宽？

有没有更有效的方法，这样我就不需要在每次使用表情符号时都去添加 v-if？如果有表情符号和 !this.emojis，是否可以进行某种查找 table？

Answer 1

这也应该有效：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<h2 v-if="true"></h2>
<h2 v-else><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" width=15 height=15></h2>

<h2 v-if="false"></h2>
<h2 v-else><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" width=15 height=15></h2>

如果语句为真，v-if 部分仅是源代码的一部分 - 否则将使用 else 语句。如果 img 标签不是加载源的一部分，则不会加载图像。

Answer 2

<h2 v-if="emojis"></h2>
<h2 v-else><img src="https://example.com/emoji.png"></h2>

可能是 @Patrick Artner 指出的改进代码的唯一方法。

模板中不需要this.

对于图片未显示是否加载的问题，简单的答案是否定的。 Vue 仅在需要时渲染 v-ifs 而不会渲染它 - 图像仅在 !emojis.

时加载

Answer 3

您也可以通过创建自己的 vue.component

来解决这个问题

<emojiorimage usesmily="false" smily="" imgpath="https://i.stack.imgur.com/QdqVi.png"></emojiorimage>

它封装了决定是图像还是笑脸本身。

  var app = new Vue({
    el: "#app",
    data: function(){
      return {
        extendedCost: 0,
      }
    },
    components: { "emojiorimage" : {
      template : `
        <h2>
          usesmily is {{usesmily}}<br/>
          <div v-if="usesmily === 'true'">{{ smily }}</div>
          <div v-else><img :scr="imgpath" width="50" height="50" :alt="imgpath" /></div>
        </h2>`,
      props: ["usesmily", "smily", "imgpath"],
    }}
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
   <h1>Emoji or Image</h1>
 
  <emojiorimage
    usesmily="false"
    smily=""
    imgpath="https://i.stack.imgur.com/QdqVi.png"
  ></emojiorimage>
 
  <emojiorimage
    usesmily="true"
    smily=""
    imgpath="https://i.stack.imgur.com/QdqVi.png"
  ></emojiorimage>
</div>

然后您可以从您查询一次并存储在某处的 npm 包中为它提供 isemoji。

对于单独的 vue 文件，它看起来有点像这样：

`emojiorimage.vue`

<template>
  <h2>    
    <div v-if="usesmily === 'true'">{{ smily }}</div>
    <div v-else><img :scr="imgpath" width="50" height="50" 
        :alt="imgpath" /></div>
  </h2>
</template>

<script>
export default {
  props: ["usesmily", "smily", "imgpath"],
};
</script>

`App.vue`

<template>
  <div id="app">
    <h1>Emoji or Image</h1>

    <emojiorimage
      usesmily="false"
      smily=""
      imgpath="https://i.stack.imgur.com/QdqVi.png"
    />

    <emojiorimage
      usesmily="true"
      smily=""
      imgpath="https://i.stack.imgur.com/QdqVi.png"
    />
  </div>
</template>

<script>
import emojiorimage from "./components/emojiorimage.vue";

export default {
  components: {
    emojiorimage,
  },
};
</script>

`index.html`

<div id="app"></div>

`index.js`

import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  template: "<App/>",
  components: { App }
});

得到：

学习资源：

Answer 4

感谢@PatrickArtner 发布了使用 Vue 组件渲染表情符号/图像的想法。这是我的最终解决方案，它调整表情符号/图像的大小以适应周围的文本——它使用 fitty 调整表情符号的大小，并将图像设置为 height:1em;.

Emoji.vue

<template>
  <div class="emojiContainer">
    <span id="fittyEmoji" v-if="emojis">{{ insert }}</span>
    <img v-if="!emojis" :src="insert" class="emojiImage">
  </div>
</template>

<style scoped>
  .emojiContainer {
    display: inline;
  }
  .emojiImage {
    height:1em;
  }
</style>

<script src="fitty.min.js"></script>

<script>

import fitty from 'fitty';
import ifEmoji from 'if-emoji'

export default {
  name: 'Emoji',
  props: ['name'],
  data: function() {
    return {
      insert: "",
      emojis: false,
    }
  },
  methods: {
    insertEmoji(){
      var names = ['frog', 'fire']
      var emojis = ['','']
      var urls = ['https://example.com/frog.png',
                  'https://example.com/fire.png']
      if (this.emojis) {
        this.insert = emojis[names.indexOf(this.name)];
      } else {
        this.insert = urls[names.indexOf(this.name)];
      }
      fitty('#fittyEmoji')
    }
  },
  beforeMount() {
    if (ifEmoji('')) {
      this.emojis = true;
    } else {
      this.emojis = false;
    }
    this.insertEmoji();
  }
}
</script>

然后在你的父组件中你可以像这样插入：

<template>
  <div id="app">
    <h1><Emoji name='frog'/> Frog Facts</h1>
    <p>Lorem ipsum <Emoji name='fire'/><p>
  </div>
</template>

<script>
import Emoji from '@/components/Emoji.vue'

export default {
  components: {
    Emoji,
  },
};
</script>

使用 Vue 查找表情符号 table

if-emoji lookup table with Vue

emoji

vue.js

对于单独的 vue 文件，它看起来有点像这样：

emojiorimage.vue

App.vue

index.html

index.js

`emojiorimage.vue`

`App.vue`

`index.html`

`index.js`