グレーフィルターと互換性のあるソリューションの使用
1.要件：
現在、ほとんどの主流のWebサイトと政府のWebサイトは、ネットワーク全体または戦没者追悼記念日のホームページでグレー表示されます。既存のプロジェクトのニーズを要約します。
2.コード
html,img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter: gray;
}
この設定はネットワーク全体をグレー表示する可能性がありますが、一部の政府のWebサイトがさまざまなブラウザーと互換性がある場合、この属性はIE10、IE11と互換性がないため、IE
3に対して対象を絞った処理を行う必要があります。IE11、IE10と互換性があります。
<script type="text/javascript" src="grayscale.js"></script>
<script type="text/javascript">
// 判断浏览器版本
var navStr = navigator.userAgent.toLowerCase();
if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){
// 判断是IE10或者IE11
grayscale(document.body);
}
</script>
- パッケージ画像のグレー表示されたコンポーネント
<template>
<div>
<img :src="src" alt="" :width="currentWidth" :height="currentHeight" v-if="!IeFilterValue" :class="calssName">
<svg v-else overflow="visible" :width="width" :height="height" :viewBox="viewBox" preserveAspectRatio="none slice" >
<image overflow="visible" preserveAspectRatio="none slice" xmlns:xline="http://www.w3.org/1999/xlink" :xlink:href="src" x="0" y="0" :width="width" :height="height" filter=url('#grayscale') /></image>
</svg>
</div>
</template>
<script>
export default {
name: "img-box",
data() {
return {
};
},
props:{
src:String,className:String,width:String,height:String},
computed:{
viewBox(){
return('0 0 '+this.filterPx(this.width)+' '+this.filterPx(this.height))
}
},
IeFilterValue(){
return this.$store.state.app.IeFilterValue;
},
currentWidth(){
return this.filterNumber(this.width)
},
currentHeight(){
return this.filterNumber(this.heigth)
},
created(){
},
methods:{
filterPx(val){
return val&&val.replace? val.replace('px',''):val},
filterNumber(val){
if(!val) return ""
return String(val)
}
};
</script>