html5和css3

videojs的vtt字幕Unsafe attempt to load URL错误

napoleon — Thu, 28 Jul 2022 08:06:25 +0000

video的track外挂vtt字幕，服务器和前端地址分离，所以域名不一致导致如下错误

报错：

Unsafe attempt to load URL from frame with URL . Domains, protocols and ports must match.

解决办法：

在视频标签上添加

如此处所述：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/track

src轨道地址vtt文件，必须是一个有效而且要是相同来源，（重点）除非 track 元素的父元素具有 crossorigin 属性。

Unity3d IIS部署报错

napoleon — Fri, 05 Nov 2021 05:52:22 +0000

Unity 中发布可以正常访问，但是发布到IIS就会出现错误提示

其实很简单我们让WebGL.linkerTarget开启WebAssembly

File -> Build Setting -> Player Setting –>Player 开启 Decompression Fallback

`The value of the ‘Access-Control-Allow-Origin‘ header in the response must not be the wildcard

napoleon — Tue, 05 Oct 2021 10:29:18 +0000

详细错误信息 Access to XMLHttpRequest at ‘http://localhost:7894/Login’ from origin ‘http://localhost:8080′ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

前端可以删除

// axios.defaults.withCredentials = true

或者后端可以加上

Access-Control-Allow-Credentials = true //允许携带验证信息

Element implicitly has an ‘any’ type because index expression is not of type ‘number’

napoleon — Tue, 05 Oct 2021 10:21:47 +0000

for (x in browserPrefix) {
    if (el.style[x] !== undefined) {
    //           ^---- [TS Error]: Element has 'any' type b/c index expression is not of type 'number'
      return browserPrefix[x];
    }
  }

就是上面的代码报的错：

解决：

for (x in browserPrefix) {
    if (el.style[x as any] !== undefined) {
      return browserPrefix[x];
    }
  }

给个any类型就行

[x as any]

svg 变换颜色

napoleon — Mon, 05 Jul 2021 09:43:37 +0000

openlayers中如何使用svg作为图标，并能够对其变换颜色。

let point1_style = new ol.style.Style({//预测点
image: new ol.style.Icon({
            color: 'red',
            src: 'images/home-outline.svg',
            fill: new ol.style.Fill({
                   color: 'red',
            })
})

如何变换颜色呢？或者说我定义的颜色？
下面是我的svg全部内容：

核心重点：我们的color替换的就是

path里一定要写的

style=”fill:#ffffff;”

我们外界定义的color就会替换fill中的颜色

注意：不要写成fill=”#ffffff“ 这样无法替换

vue数组更新不渲染页面

napoleon — Mon, 31 May 2021 02:59:54 +0000

原因：

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

解决方案：

通过splice()方法，删除某个元素后，再添加一个元素，达到“赋值”的效果：

vm.items.splice(index, 1, newElement);

Vue可以监听数组的splice、push、unshift等方法调用正确更新View。

this.$set(this.arr,”key”, 111)

Vue.set( target , key , value)

target: 要更改的数据源（可以是一个对象或者数组）
key 要更改的具体数据（索引）
value 重新赋的值

或者

this.$forceUpdate() //强制刷新

文件下载js-file-download

napoleon — Fri, 21 May 2021 08:24:44 +0000

我这里是一个pdf文件，在页面按钮点击后希望实现文件下载功能，而不是在页面打开pdf预览

有一个插件很好https://github.com/kennethjiang/js-file-download

我们在vue-cli的依赖中找到它，并安装

在src/utils/filedownload.js

import axios from 'axios'
import fileDownload from 'js-file-download';

export function download(url, filename) {
    //因为跨域，去掉域名，使用vue.config.js代理转发
    url = '/' + url.split('/').slice(3).join('/')
    axios.get('/api/'+url, {
    responseType: 'blob',
    withCredentials: true,
    crossDomain: true,
  }).then(res => {
    fileDownload(res.data, filename);
  });
}

如何使用呢？

download(fileurl,filename+'.pdf');

vue 全局过滤器

napoleon — Mon, 17 May 2021 07:46:19 +0000

我是用vue-cli创建的项目

首先我们创建src/filters/index.vue，用于存放filter方法

/**
 * Convert audio tags to img in html5 and play
 * @param {含有audio的html内容} htmlstring 
 * @returns 
 */
export function changehtmlaudiotoimgplay(htmlstring){
  let reg = new RegExp(
    ' ',
    'g'
  )
  htmlstring = htmlstring.replace(
    reg,
    ''
  )
  return htmlstring
}

下一步注册成全局可以使用的filter

import Vue from 'vue'
import App from './App.vue'
import router from './router'
......

// global filters
import * as filters from './filters' 
// register global utility filters
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})


Vue.config.productionTip = false

new Vue({
  router,
  i18n,
  store,
  render: h => h(App)
}).$mount('#app')

使用

{{ HtmlData | changehtmlaudiotoimgplay }}

v-html="$options.filters.changehtmlaudiotoimgplay(HtmlData)"

vue中v-html的内容替换和事件绑定

napoleon — Tue, 04 May 2021 12:21:03 +0000

我们现在要处理一种情况，后台输出了一些html数据，但是希望将audio默认的标签，换成一个喇叭图片，类似百度翻译的发音图标。并能够播放音频

替换audio标签为img

因为数据从后端api获取，所以我们获取数据后，用正则先替换audio为img并记录音频地址

template模板

script方法：

methods: {
    //替换html内容
    htmlchangedaudio(outhtml) {
      let reg = new RegExp(
        ' ',
        'g'
      )
      outhtml = outhtml.replace(
        reg,
        ''
      )
      return outhtml
    },

我们将audio的src音频地址，放到了img的data-audio-url中，以便后面点击事件可以获取到播放的资源。

你会看到我们的div下面还有一个隐藏的audio文件，后面我们会用到它。

事件绑定

如何让小喇叭图片可以播放呢？

//点击图标发声
    htmlaudioplayen() {
      var event = window.event
      window.console.log(event)
      if (
        event.target.tagName === 'IMG' &&
        event.target.className === 'na_htmlplayaudio'
      ) {
        // 获取触发事件对象的属性
       var htmlaudio=  this.$refs.htmlaudio;
       htmlaudio.src = event.target.dataset.audioUrl
       htmlaudio.play()
      }
    },

其实很简单，我们获取到event，拿到此img之前绑定的data-audio-url，然后赋值给之前埋好的audio的src，让这个隐藏的audio播放即可。

img喇叭状态改变

现在喇叭在播放时不会动，我们希望播放时喇叭能够有播放动画。咋办，我们找来了一张gif图，在播放时切换它。并在播放停止后，切换回不同的小喇叭。

要实现这样的效果我们需要加一些代码

//点击图标发声
    htmlaudioplayen() {
      var event = window.event
      this.htmlcurrentaudio = event
      window.console.log(event)
      if (
        event.target.tagName === 'IMG' &&
        event.target.className === 'na_htmlplayaudio'
      ) {
        //切换图标
        event.target.src = require('@/' + '/assets/horn.gif')
        // 获取触发事件对象的属性
       var htmlaudio=  this.$refs.htmlaudio;
       htmlaudio.src = event.target.dataset.audioUrl
       htmlaudio.play()
      }
    },
    //播放停止还原图标
    htmlaudioenden(){
        this.htmlcurrentaudio.target.src = require('@/' + '/assets/hornpause.jpg')
    },

完活！还有优化空间，后续你们自己发挥把，拜拜

vue国际化多语言

napoleon — Sun, 18 Apr 2021 11:19:25 +0000

使用的vue2 + element ui + i18n来实现的国际化

安装i18n

直接使用的vue-cli4界面的运行依赖中，来安装的i18n

创建翻译的配置文件

把他放到assets目录下即可

使用配置文件并和element国际化兼容

在src下新建i18n目录，创建一个 index.js；路径src\i18n\index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import ElementLocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

import langZh from "@/assets/languages/zh.js"
import langEN from "@/assets/languages/en.js"

Vue.use(VueI18n)
 
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': {...langZh,...zhLocale},
    'en': {...langEN,...enLocale}
  }
})
ElementLocale.i18n((key, value) => i18n.t(key, value))

export default i18n

引用

在main.js中引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import './icons' // icon

import i18n from './i18n/index' //新加-国际化

Vue.config.productionTip = false

new Vue({
  router,
  i18n, //新加
  store,
  render: h => h(App)
}).$mount('#app')

如何使用

模板中我们使用$t

{{$t('common.icao_service')}}

//script中使用方式
this.$t('common.icao_service')

语言如何切换



switchLang() {
      console.log(this.$i18n.locale);
      if (this.$i18n.locale === "zh") {
        this.$i18n.locale = "en";
      } else {
        this.$i18n.locale = "zh";
      }
      // this.$i18n.locale = val; //此处val为 zh 或者 en
    },

最终效果

【转载文章】https://blog.csdn.net/qq_45949366/article/details/108535247