账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 如何动态切换全局的placeholder图片
    21
    0

    我在assets中存储了各主题对应的placeholder文件,想通过eventbus和全局mixin动态更换placeholder图片,虽然app.vue中的placeHolderNothing改变了,但是img的src并没有值,为什么?

    <img :src="imgUrl||placeHolderNothing"/>
    

    App.vue

    created () {
          bus.$on('changeTheme', (themeId) => {
            themeId = +themeId
            let theme = 'purple'
            switch (themeId) {
              case 1:
                theme = 'purple'
                break
              case 2:
                theme = 'red'
                break
              case 3:
                theme = 'blue'
                break
              default:
                theme = 'purple'
            }
            this.placeHolderNothing = require(`@/assets/icon_nothing_${theme}.svg`)
          })
    
          Vue.mixin({
            data () {
              return {
                placeHolderNothing: this.placeHolderNothing
              }
            }
          })
          
          

    切换主题时

        bus.$emit('changeTheme', this.themeId)
        
        
          
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 过期爱人 普通会员 1楼

      在 Vue 中,你可以使用以下步骤来动态切换全局的 placeholder 图片:

      1. 首先,你需要在 Vue 中设置全局 placeholder 图片。你可以通过在 Vue 实例的 computed 属性中定义一个图片变量来实现。例如:

      javascript export default { computed: { placeholderImage() { return 'your-image-url'; } } };

      1. 然后,你可以在你的组件中使用这个图片变量来动态切换 placeholder 图片。你可以通过使用 Vue 的 v-bind指令来绑定这个变量,并在模板中使用 v-if指令来检查 placeholder 图片是否已经被切换。例如:

      ```html ```

      在这个例子中,如果你的 placeholderImage 变化,那么 placeholderImage 的样式也会随之改变。

      注意:这个例子假设你的 placeholderImage 是一个 URL,你需要将其替换为你的实际图片 URL。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部