vue.js3:element-plus使用例子:用滑块调节图片灰度(element-plus@2.2.2 / vue@3.2.36)
Vue 图片 例子 2.2 Element Plus 3.2 36
2023-09-14 08:59:32 时间
一,安装element-plus
从命令行安装:
liuhongdi@lhdpc:/data/vue/imgtouch$ npm install element-plus --save
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,安装后查看版本:
liuhongdi@lhdpc:/data/vue/imgtouch$ npm list element-plus imgtouch@0.1.0 /data/vue/imgtouch └── element-plus@2.2.2
三,使用:
1,代码中调用
main.js
import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' //createApp(App).mount('#app') const app = createApp(App) app.use(ElementPlus) app.mount('#app')
2,例子
Gray.vue
<template> <div style="background: #ffffff;" id="root" > <div> <el-slider v-model="value" show-input /></div> <div style="position: relative;width:500px;height:500px;overflow: hidden;background: lightgray;" > <img class="imgstyle" id="img" src="static/image/back@2x.jpg" :style="{filter: 'grayscale('+grayValue+')'}" /> </div> </div> </template> <script> import {computed, ref} from "vue" export default { name: "GrayImg", setup() { const value = ref(0); const grayValue = computed( ()=> { return value.value / 100; } ); return { value, grayValue, } } } </script> <style scoped> .imgstyle { max-width: 500px; max-height: 500px; } .el-slider { max-width: 500px; margin-top: 0; margin-left: 12px; } </style>
四,查看效果:
![](https://img2022.cnblogs.com/blog/1938691/202206/1938691-20220603202636757-1941087085.png)
![](https://img2022.cnblogs.com/blog/1938691/202206/1938691-20220603202636655-57600239.png)
五,查看vue的版本:
liuhongdi@lhdpc:/data/vue/imgtouch$ npm list vue imgtouch@0.1.0 /data/vue/imgtouch ├─┬ @vue/cli-plugin-babel@5.0.4 │ └─┬ @vue/babel-preset-app@5.0.4 │ └── vue@3.2.36 deduped ├─┬ element-plus@2.2.2 │ ├─┬ @element-plus/icons-vue@1.1.4 │ │ └── vue@3.2.36 deduped │ ├─┬ @vueuse/core@8.6.0 │ │ ├─┬ @vueuse/shared@8.6.0 │ │ │ └── vue@3.2.36 deduped │ │ ├─┬ vue-demi@0.13.1 │ │ │ └── vue@3.2.36 deduped │ │ └── vue@3.2.36 deduped │ └── vue@3.2.36 deduped └─┬ vue@3.2.36 └─┬ @vue/server-renderer@3.2.36 └── vue@3.2.36 deduped
相关文章
- vue基础(二)
- vue项目更新后清除浏览器缓存
- 写给vue转react的同志们(4)
- Vue递归组件:渲染嵌套评论
- webpack和vue cli_vuecli webpack配置
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- 前端常见vue面试题合集
- vue生成二维码并保存图片_vue实现扫描二维码
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue全家桶介绍_vue全家桶有什么好处
- Vue 组件插槽:父子组件间的内容分发和插槽作用域
- 【架构师(第三十三篇)】 Vue 中的实例及本地图片预览
- 解决前后端分离Vue项目部署到服务器后出现的302重定向问题
- 快速上手Vue Router和组合式API:创建灵活可定制的布局
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- Vue结合Redis实现性能优化(vue引入redis)
- 研究Oracle VUE价格探究深入探究和分析(oracle vue价格)