vue.js3:element-plus使用例子：用滑块调节图片灰度(element-plus@2.2.2 / vue@3.2.36)

一，安装element-plus

从命令行安装:

liuhongdi@lhdpc:/data/vue/imgtouch$ npm install element-plus --save

说明：刘宏缔的架构森林是一个专注架构的博客，

网站：https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/01/vue-js3-elementplus-shi-yong-li-zi-yong-hua-kuai-tiao-jie/

         对应的源码可以访问这里获取： 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>

四，查看效果: 

五，查看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