vue.js3:element-plus使用例子:用滑块调节图片灰度(element-plus@2.2.2 / vue@3.2.36)
Vue 图片 例子 2.2 Element Plus 3.2 36
2023-09-14 09:01:18 时间
一,安装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
相关文章
- 关于nginx的五大面试题_vue面试题大全
- Vue学习笔记2-安装Vue
- vue filters过滤器的统一封装「建议收藏」
- Vue笔记(10) vue-router
- vue网络图片url转Base64「建议收藏」
- vue模态框组件封装
- 三年经验前端vue面试记录
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- vue的双向绑定原理_数据双向绑定原理
- Vue学习笔记之ElementUI的区间设置
- vue.js客服系统实时聊天项目开发(二十一)vue项目中引入静态资源
- Vue子组件向父组件传值this.$emit()
- Vue PC端UI框架
- IDEA安装Vue插件后为什么创建.vue文件不显示vue图标
- 开心档-软件开发入门之Vue.js Ajax(vue-resource)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue中触发Redis订阅通知(vue中订阅redis)
- 研究Oracle VUE价格探究深入探究和分析(oracle vue价格)