メモ的に。

VuerifyのSASSでちょっと変更したい場合。

例えば、disabledの時の文字色が薄すぎて何書いてあるか分からないみたいな場合に、どうにか濃くしたい。

StackoverFlowとかだと例えば

https://stackoverflow.com/questions/49450065/how-to-change-override-the-default-color-for-disabled-fields-in-vuetify-js

こういう解決方法もあるんだけど、小手先じゃなくて、ちゃんとCSS側の定義として対応をしたい。

そういう時はSASS変数とか、

https://vuetifyjs.com/ja/features/sass-variables/

グローバル設定とか、

https://vuetifyjs.com/ja/features/global-configuration/

でやるのが良く出てくるんだけど、前述のDisableを濃くしたいとかの場合、本体のSass変数を一律でいじりたかったりする。

この場合は、本体のSASS変数はThemeの中で定義されてるので、そっちを変更する。

customeThemeでやってる事になると思うので、plugin内のvutify.tsなんかで、下記の感じで変数の上書き指定をやる。

const customTheme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: colors.blue.base,
  },
  variables: {
    "disabled-opacity": 1.0, // この辺の感じ。
  },
};

disabledの文字あたりを濃くしたい場合は"disabled-opacity"を変更。

どんな変数があるかは下記参照

https://vuetifyjs.com/en/features/theme/#javascript

VueでUIを作ってて、axios使用でajaxで画像ファイルを取得した後に、

そのデータを表示したり、ローカルに保存したりしたい。

その場合のやり方。

//リクエストヘッダでコレつけた方がいいっぽ
const config = {
  responseType: 'arraybuffer'
}

//サーバに送信
this.$axios
.post('http://hogehoeg/sample.png', { data: 'somedata'}, config)
.then(response => {
  //base64でエンコードしたい場合
  let bstr = new Buffer(response.data, 'binary').toString('base64')
  
  //blobオブジェクトにしたい場合
  let blob = new Blob([response.data], { type: 'image/png' })

  //imgタグをidでとって、srcにblobのObjectURLを突っ込んで画像表示する
  let img = document.getElementById('img_tag_id')
  let url = window.URL || window.webkitURL
  img.src = url.createObjectURL(blob)
  
  //保存させたい場合（ダウンロードっぽくさせたい場合）
  let link = document.createElement('a')
  link.href = window.URL.createObjectURL(blob)
  link.download = 'download-filename.png'
  link.click()

  //Vueで別のコンポーネントにデータ渡したい場合はこんな感じ？
  this.imgdata = response.data
})

base64でやる場合は、画像サイズは32kb未満くらいで考えた方が良いのかしら。まーあんま大きい画像はやめた方がよさそうですね。

ajaxで取ってきた画像ファイルとかをダウンロードっぽく保存させたい場合は前述の感じでやるっぽ。リンク作って、ﾛｰｶﾙのオブジェクトのURLを突っ込んで中で、Clickを発火させてる感じ？

ちょっとイレギュラーなやらせ方のような気もするんだけど、StackOverFlowとかいろいろ見てるとこのやり方しかないっぽいですかね？

で、いい感じにまとめてくれるのが↓のGitHubのリポジトリ

https://github.com/kennethjiang/js-file-download/blob/master/file-download.js

IE11だと上述のやり方じゃ上手くいかないらしく、それにも↑のリポジトリは対応してる。

これ使った方がいいと思う。車輪の再発明は控えたい。

あと、vueでaxios使う場合、下の感じで書くと、中でthisが使えない。

this.$axios
.post('http://hogehoeg/sample.png', { data: 'somedata'}, config)
.then(function(response){
  this.dataval = ''//これ無理
})

で、これをやるには呼ぶ前に「let self = this」みたいにしておくのが昔見たやり方なんだけど、

最近の書き方的にはアロー関数でやるとthisもいける。

this.$axios
.post('http://hogehoeg/sample.png', { data: 'somedata'}, config)
.then(response => {
  this.dataval = ''//これいける
})