vue 图片左侧可看到，右边透明

在Vue.js中创建一个图片展示效果，可以右侧透明左侧可见，通常通过CSS布局来实现，比如使用`position`, `opacity`, 和`display`属性。下面是一个简单的示例：

<template>
  <div class="image-container">
    <img :src="imageUrl" alt="图片" :style="{ position: 'relative', display: 'flex', opacity: isTransparent ? 0.5 : 1 }" />
    <span v-if="isTransparent" class="mask" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/your/image.jpg',
      isTransparent: false // 初始设置为false，点击切换透明度
    };
  },
  methods: {
    toggleTransparent() {
      this.isTransparent = !this.isTransparent;
    }
  }
};
</script>

<style scoped>
.image-container {
  align-items: center;
  justify-content: space-between;
}

.mask {
  pointer-events: none;
}
</style>

在这个例子中，我们有一个图片元素和一个透明遮罩层。当`isTransparent`为`true`时，图片的`opacity`设置为0.5，看起来会稍微透明；同时显示透明遮罩层，背景颜色设置为半透明黑色。通过`toggleTransparent`方法可以切换图片的透明状态。