我是用vue-cli创建的项目
首先我们创建src/filters/index.vue，用于存放filter方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * Convert audio tags to img in html5 and play * @param {含有audio的html内容} htmlstring * @returns */ export function changehtmlaudiotoimgplay(htmlstring){ let reg = new RegExp( '<audio controls="controls" controlslist="nodownload" src="(.*?)"> </audio>', 'g' ) htmlstring = htmlstring.replace( reg, '<img style="width:25px;height:25px;vertical-align: middle;" src="' + require('@/' + '/assets/hornpause.jpg') + '" class="na_htmlplayaudio" data-audio-url="$1" />' ) return htmlstring } |
下一步注册成全局可以使用的filter
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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') |
使用
|
1 2 3 |
{{ HtmlData | changehtmlaudiotoimgplay }} <!--或者--> v-html="$options.filters.changehtmlaudiotoimgplay(HtmlData)" |