使用
前提
需安装 @awesome-image/image 详见
安装
Vue/Nuxt
安装滤镜
@awesome-image/filter-crt 为例。更多滤镜
yarn add @awesome-image/filter-crt
yarn add @awesome-image/filter-crt
yarn add @nuxtjs/composition-api
全局使用
main.js
import FilterCrt from '@awesome-image/filter-crt'
Vue.use(FilterCrt)
main.js
import FilterCrt from '@awesome-image/filter-crt'
createApp().use(FilterCrt)
./plugins/as-image-filter.js
// add ./plugins/as-image-filter.js
import FilterCrt from '@awesome-image/filter-crt'
Vue.use(FilterCrt)
nuxt.config.js
// add plugin path to nuxt.config.js
{
plugins: [
'~~/plugins/as-image-filter.js'
]
}
局部使用
<script>
import AsImage from '@awesome-image/image'
import '@awesome-image/image/dist/style.css'
import AsFilterCrt from '@awesome-image/filter-crt'
export default {
components: {
AsImage,
AsFilterCrt
}
}
</script>
浏览器
引入 @awesome-image/image
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.12.1/lib/index.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/image/dist/vue2/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/filter-crt/dist/vue2/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.12.4/lib/index.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/image/dist/vue3/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/filter-crt/dist/vue3/index.umd.js"></script>
使用
- 滤镜组件作为
AsImage组件的滤镜插槽子组件 - 传递作用域变量
image给滤镜组件
代码示例
<template>
<AsImage
class="demoimage"
:width="1080"
:height="722"
:src="'/mount.jpg'"
>
<template #webglfilter="{ image }">
<div>
<as-filter-crt :image="image"></as-filter-crt>
</div>
</template>
</AsImage>
</template>
在线预览
Loading CodeSandbox...