/var/log/messages

Jan 13, 2019 - 2 minute read - Comments - programming

element-ui と rwdImageMaps を nuxt.js に盛り込む記録

git log を確認しつつ記録してみます。

element-ui

以下を yarn add --save-dev している模様。(関係ない? もの含め)

  • @nuxtjs/pwa
  • css-loader
  • file-loader
  • url-loader
  • vue-loader
  • webpack
  • firebase-tools
  • element-ui

基本的な作りとしてタブで表示する画像を切り替えてその中のナニを imagemap で云々、な形になっています。

nuxt.config.js のてっぺんあたりが以下なカンジで

const webpack = require('webpack')
module.exports = {
  mode: 'spa',
  /*
  ** Headers of the page
  */

あるいは build なブロックの最後あたり以降が以下なカンジ?

    },
    vendor: ['jquery', 'bootstrap', 'element-ui'],
    modules: [
      '@nuxtjs/pwa',
    ],
  },
  plubins: [
    '~plugins/element-ui'
  ],
  css: [
    'element-ui/lib/theme-chalk/index.css'
  ]
}  

jquery 導入って次のステップのはずなのですがスルーしてくださひ。plugins/element-ui.js の中身が以下です。

import Vue from 'vue'
import ElementUI from 'element-ui'

const locale = require('element-ui/lib/locale/lang/ja')
Vue.use(ElementUI, { locale })

で、pages/index.vue が以下なカンジでした。template あたりが以下で

<template>
  <section class="page">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="User" name="first">
        <image src="../assets/map1.jpg" width="1024" height="705" usemap="#ImageMap" alt="" />
        <map name="ImageMap">
          <area shape="rect" coords="9,29,520,105" href="#" alt="" />
        </map>
      </el-tab-pane>
      <el-tab-pane label="Config" name="second">

script あたりが以下。

export default {
  components: {
    AppLogo
  },
  data () {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log("handleClick");
      console.log(tab, event);
    }
  }

handleClick の定義とか初期表示に選択されてるタブの指定とか、どこで確認したのかとか忘却の彼方。。あとは style あたりで以下の指定を追加しています。

.page {
  height: 100vh;
}

img[usemap] {
  max-width: 100%;
  height: auto;
}

これでとりあえず何とかなったのですが、レスポンシブな表示に imagemap が対応できず、ということで rwdImageMaps を使ってみたのですが上の handleClick を見いだすまで、あるいは next.js から jquery な手続きを呼び出す云々というあたりでかなりハメられました。

rwdImageMaps

とりあえず差分のみ、ということでとりあえず jquery を yarn add --save-dev しています。あと、中身は略しますが、jquery.rwdImageMaps.js を入手して plugins 配下に投入しています。nuxt.config.js は以下なカンジで (build ブロック末端あたり)。

    modules: [
      '@nuxtjs/pwa',
    ],
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        JQuery: 'jquery',
        'window.JQuery': 'jquery'
      })
    ]
  },
  plugins: [
    '~plugins/element-ui',
    '~pulgins/jquery.rwdImageMaps.js'
  ],

で、index.vue の script なブロックが以下。

export default {
  components: {
    AppLogo
  },
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      $('img[usemap').rwdImageMaps();
      console.log("handleClick");
      console.log(tab, event);
    }
  }
}  
</script>

ただ、これだけだと初期表示で rwdImageMaps が有効になっていなかったため、別途で以下な修正を盛り込んでいます。

export default {
  components: {
    AppLogo
  },
  data() {
    return {
      activeName: 'first'
    };
  },
  mounted: function() {
    $('img[usemap]').rwdImageMaps();
  },
  methods: {
    handleClick(tab, event) {
      $('img[usemap').rwdImageMaps();
      console.log("handleClick");
      console.log(tab, event);
    }
  }
}  
</script>

その後

  • pwa にしたり
  • vue-carousel 盛り込んだり

しているのですが特に難しいことはしていないので記録は略で。

プログラミング Elixir (3) プログラミング Elixir (4)

comments powered by Disqus